Q&A
前提
ここに質問の内容を詳しく書いてください。
（例）
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件
0
ベストアンサー
下記手順を試してください。
①いったん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
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/11/13 03:12