質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

Q&A

解決済

1回答

435閲覧

node.jsを使用したwebsocketで正常に接続ができない

chemical_3981

総合スコア2

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

0グッド

0クリップ

投稿2023/05/13 14:05

編集2023/05/16 00:01

発生している問題・エラーメッセージ

https://qiita.com/okumurakengo/items/a8ccea065f5659d1a1de
こちらのページのサンプル1を参考にwebsocketの実装を行っているのですが、htmlからサーバーに接続しようとすると
WebSocket connection to 'wss://localhost:5001/' failed:
のエラーが出て正常に接続できません。

何かお気づきのことがありましたらご教授頂けないでしょうか。
宜しくお願い致します。

該当のソースコード

######index.js var server = require('ws').Server; var s = new server({port:5001}); s.on('connection',function(ws){ ws.on('message',function(message){ console.log("Received: "+message); s.clients.forEach(function(client){ client.send(message+' : '+new Date()); }); }); ws.on('close',function(){ console.log('I lost a client'); }); });
【追記】 こちらのhtmlはindex.jsをアップしているのと同じさくらvpsに上げて実行しています。 ######index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <input type="button" id="sample" value="送信"> <script> var sock = new WebSocket('ws://127.0.0.1:5001'); // 接続 sock.addEventListener('open',function(e){ console.log('Socket 接続成功'); }); // サーバーからデータを受け取る sock.addEventListener('message',function(e){ console.log(e.data); }); document.addEventListener('DOMContentLoaded',function(e){ // サーバーにデータを送る document.getElementById('sample').addEventListener('click',function(e){ sock.send('hello'); }); }); </script> </body> </html>

試したこと

firewallのポートが解放されていないのが原因かと思い、解放を試したのですが、変わらずエラーが出ます。

public (active) target: default icmp-block-inversion: no interfaces: ens3 sources: services: cockpit dhcpv6-client http https ssh ports: 5001/tcp 3000/tcp 5000/tcp protocols: forward: yes masquerade: no forward-ports: source-ports: icmp-blocks: rich rules:

補足情報(FW/ツールのバージョンなど)

【追記】 サーバー さくらvps Server version: Apache/2.4.53 (CentOS Stream) Server built: Jan 30 2023 00:00:00 node.js v16.18.1 NAME="CentOS Stream" VERSION="9" ID="centos" ID_LIKE="rhel fedora" VERSION_ID="9" PLATFORM_ID="platform:el9" PRETTY_NAME="CentOS Stream 9" ANSI_COLOR="0;31" LOGO="fedora-logo-icon" CPE_NAME="cpe:/o:centos:centos:9" HOME_URL="https://centos.org/" BUG_REPORT_URL="https://bugzilla.redhat.com/" REDHAT_SUPPORT_PRODUCT="Red Hat Enterprise Linux 9" REDHAT_SUPPORT_PRODUCT_VERSION="CentOS Stream"

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2023/05/13 19:36

サーバーはどこで動かしてますか?
chemical_3981

2023/05/14 01:43

ありがとうございます。 サーバーはさくらのvpsを使用しています。 また、パケットフィルターについても使用していません。
CHERRY

2023/05/14 02:24

Web ブラウザはどこで動かしてアクセスしていますか?
hoshi-takanori

2023/05/14 03:03

ブラウザが手元のパソコンで動いてるなら、ws://127.0.0.1:5001/ は手元のパソコンのことなので、さくらの VPS で動いてるサーバーには繋がらないでしょうね…。
chemical_3981

2023/05/14 04:12 編集

ありがとうございます。 ブラウザはindex.htmlのファイルを、index.jsをアップしているのと同じvpsに上げてアクセスしています。 すみません、サンプルはローカルでindex.htmlを動かしていましたね… 同一サーバーにファイルを上げていれば、127.0.0.1がローカルホストで同じサーバーにアクセスしていることになるという認識だったのですが、合っていますでしょうか? ただ、ws://サーバーのipアドレス:5001/で実行した場合も同じエラーが発生しておりますが、こちらも何か認識が間違っていますでしょうか?
guest

回答1

0

自己解決

すみません、下記で解決しました。
ws://vpsのipアドレス:5001/

質問の回答でダメだったと記載したのですが、その際は、
wss://vpsのipアドレス:5001/
で書いていたようです…。

投稿2023/05/15 15:01

chemical_3981

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問