Node.jsを利用したWebSocket connection to 'wss://localhost:8888/' failed: のエラーに関して

前提

ここに質問の内容を詳しく書いてください。
（例）
node.jsでチャットアプリを作っています。

https://don-bu-rakko.com/javascript-websocket-api/
上記のサイトを参照して、4.1までは問題なく動作していました。
ところが
4.2:WebSocketへの接続処理を書いてみる
を実装中に、ブラウザで以下のエラーメッセージが発生しました。

 WebSocket connection to 'wss://localhost:8888/' failed:

色々と調べてみたのですが、関連しそうな参考記事が見つからず、質問した次第です。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

ブラウザでwebsocketの通信エラーが起きない様にしたい

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

WebSocket connection to 'wss://localhost:8888/' failed:

該当のソースコード

index.html
1<!doctype html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport"
7        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
8    <meta http-equiv="X-UA-Compatible" content="ie=edge">
9    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
10    <title>WebSocket受け渡しテスト</title>
11</head>
12
13<body>
14    <main class="py-8 px-12 w-96 mx-auto bg-gray-100">
15        <section class="my-4">
16            <div>
17                <span class="text-sm font-bold">WS Status</span>
18                <div class="bg-indigo-200 p-2 mb-2">
19                    <span class="websocket-status">null</span>
20                </div>
21            </div>
22        </section>
23        <section class="my-4">
24            <div class="bg-gray-300 p-2 rounded shadow">
25                <div>
26                    <input
27                        class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
28                        id="send-message" type="text" placeholder="メッセージを入力">
29                </div>
30                <div class="text-right">
31                    <button id="send-button" class="py-2 px-4 rounded bg-indigo-600 text-white">
32                        メッセージ送信
33                    </button>
34                </div>
35            </div>
36        </section>
37        <section class="my-4">
38            <div class="text-sm font-bold">メッセージ一覧</div>
39            <div id="messages">
40            </div>
41        </section>
42    </main>
43
44    <script>
45        // 設定
46        const URL = 'ws://localhost:8888/'
47        const PROTOCOL = 'ws-sample'
48
49        // WebSocket 通信を開始する
50        const socket = new WebSocket(URL, PROTOCOL)
51
52        // ------------------------------
53        // WebSocket イベント
54        // ------------------------------
55
56        // WebSocket が開通したら発火する
57        // socket.onopen = () => {} でも可
58        socket.addEventListener('open', (event) => {
59            console.log('open')
60            socket.send('メッセージ') // メッセージの送信
61        })
62
63        // WebSocketサーバ からメッセージを受け取ったら発火する
64        // socket.onmessage = () => {} でも可
65        socket.addEventListener('message', ({ data }) => {
66            console.log('message: ' + data)
67            socket.close()
68        })
69
70        // WebSocketサーバ からエラーメッセージを受け取ったら発火する
71        // socket.onerror = () => {} でも可
72        socket.addEventListener('error', (event) => {
73            console.log('error')
74        })
75
76        // WebSocket がクローズしたら発火する
77        // socket.onclose = () => {} でも可
78        socket.addEventListener('close', (event) => {
79            console.log('close')
80        })
81
82    </script>
83</body>
84
85</html>

server.js
1const http = require('http')
2const fs = require('fs')
3const WebSocketServer = require('websocket').server 
4
5// ポート番号
6const PORT = 3000
7
8// リクエスト・レスポンスの対応内容を記述
9const server = http.createServer((request, response) => {
10  const url = request.url
11  switch (url) {
12    case '/':
13      fs.readFile('./public/index.html', 'utf-8', (error, data) => {
14        response.writeHead(200, { 'Content-Type': 'text/html' })
15        response.write(data)
16        response.end()
17      })
18      break
19    default:
20      response.writeHead(404)
21      response.end()
22  }
23})
24
25// リスナーを起動
26server.listen(PORT, () => {
27  console.log(`${new Date()} サーバ起動 http://localhost:${PORT}`)
28})
29
30const wsServer = new WebSocketServer({
31  httpServer: server,
32  // autoAcceptConnections は本番環境NG
33})
34
35const originIsAllowed = (origin) => {
36  // アクセス元が信頼できるかを検証する用の関数。今回はlocal環境なので常にtrue
37  return true
38}
39
40wsServer.on('request', (request) => {
41  if (!originIsAllowed(request.origin)) {
42    request.reject()
43    console.log(`${new Date()} ${request.origin} からのアクセスが拒否されました`)
44  }
45
46  const connection = request.accept('ws-sample', request.origin)
47  console.log(`${new Date()} 接続が許可されました`)
48  connection.on('message', message => {
49    switch (message.type) {
50      case 'utf8':
51        console.log(`メッセージ: ${message.utf8Data}`)
52        connection.sendUTF(message.utf8Data)
53        break
54      case 'binary':
55        console.log(`バイナリデータ: ${message.binaryData.length}byte`)
56        connection.sendBytes(message.binaryData)
57        break
58    }
59  })
60
61  connection.on('close', (reasonCode, description) => {
62    console.log(`${new Date()} ${connection.remoteAddress} が切断されました`)
63  })
64})

試したこと

ファイアウォールの設定などを見直した。
ポート番号を変えてみた。

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

node.js
-v18.12.1

行動規範の内容に同意します

回答1件

ベストアンサー

下記手順を試してください。
①いったんCtrl+C等で、ローカルのwebsocketサーバーを全部停止させる
②index.html 中にある <script>　の

        // 設定
        const URL = 'ws://localhost:8888/'

のポート番号 8888 を、server.js に記載されているポート番号と同じ「3000」に変更して保存。
（ 'ws://localhost:3000/' にするという意味です）

③再度ターミナルで「node server.js」と入力してサーバーを立ち上げて、
ブラウザで http://localhost:3000/
にもう一度アクセスする。

ブラウザのデベロッパーツールのコンソールを開くと

open
メッセージ
close

というようにエラーなしで想定した出力がなされます。
これは記事の記載通り、正常に動いていることを確認したことになります。

投稿2022/11/12 21:31

編集2022/11/12 23:42

退会済みユーザー

総合スコア0

Roines

2022/11/13 03:12

ありがとうございます、ご提示いただいた内容で解決いたしました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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