web-dev-qa-db-ja.com

「ws：// localhost：3000 /」へのWebSocket接続が失敗しました：ハンドシェイク応答を受信する前に接続が閉じられました

私は友人が作ったゲームを取り、WebRTCとwebsocketのピア間でキープレスデータを送信することにより、ブラウザ間でプレイできるようにしたいと考えました。ただし、コンソールで次のエラーが発生します。

「ws：// localhost：3000 /」へのWebSocket接続が失敗しました：ハンドシェイク応答を受信する前に接続が閉じられました

私のサーバーファイルには次の数行があります：

'use strict';

const express = require('express');
const SocketServer = require('ws').Server;
const path = require('path');

const PORT = process.env.PORT || 3000;
const INDEX = path.join(__dirname, 'index.html');

const server = express();

server.use(express.static(path.join(__dirname, 'lib')));
server.use('/assets', express.static(path.join(__dirname, 'assets')));
server.listen(PORT, () => console.log(`Listening on ${ PORT }`));

const wss = new SocketServer({ server });
var users = {};
let usernames = [];


wss.on('connection', function(connection) {

   connection.on('message', function(message) {

      var data;
      try {
         data = JSON.parse(message);
      } catch (e) {
         console.log("Invalid JSON");
         data = {};
      }

      switch (data.type) {
         case "login":
            console.log("User logged", data.name);
            if(users[data.name]) {
               sendTo(connection, {
                  type: "login",
                  success: false
               });
            } else {
               users[data.name] = connection;
               connection.name = data.name;
               usernames.Push(data.name);

               sendTo(connection, {
                  type: "login",
                  success: true,
                  users: usernames
               });
            }

            break;

         case "offer":
            console.log("Sending offer to: ", data.name);
            var conn = users[data.name];

            if(conn != null) {
               connection.otherName = data.name;

               sendTo(conn, {
                  type: "offer",
                  offer: data.offer,
                  name: connection.name
               });
            }

            break;

         case "answer":
            console.log("Sending answer to: ", data.name);
            var conn = users[data.name];

            if(conn != null) {
               connection.otherName = data.name;
               sendTo(conn, {
                  type: "answer",
                  answer: data.answer
               });
            }

            break;

         case "candidate":
            console.log("Sending candidate to:",data.name);
            var conn = users[data.name];

            if(conn != null) {
               sendTo(conn, {
                  type: "candidate",
                  candidate: data.candidate
               });
            }

            break;

         case "leave":
            console.log("Disconnecting from", data.name);
            var conn = users[data.name];
            conn.otherName = null;

            if(conn != null) {
               sendTo(conn, {
                  type: "leave"
               });
            }

            break;

         default:
            sendTo(connection, {
               type: "error",
               message: "Command not found: " + data.type
            });

            break;
      }
   });

接続のクライアント側は次のようになります。

const Game = require("./game");
const GameView = require("./game_view");
var Host = location.Origin.replace(/^http/, 'ws');
console.log('Host: ', Host);
console.log(process.env.PORT);

document.addEventListener("DOMContentLoaded", function() {
  const connection = new WebSocket(Host);

.....

これがエラーが発生するポイントであり、これは私が受け取るキャッチされたエラーです：

bubbles
:
false
cancelBubble
:
false
cancelable
:
false
composed
:
false
currentTarget
:
WebSocket
defaultPrevented
:
false
eventPhase
:
0
isTrusted
:
true
path
:
Array(0)
returnValue
:
true
srcElement
:
WebSocket
target
:
WebSocket
timeStamp
:
213.01500000000001
type
:
"error"
__proto__
:
Event

私はサーバー側のプログラミングにあまり慣れておらず、理解しようとしていました。この問題を調べてみましたが、さまざまな原因で問題が発生しているようです。リポジトリを確認したい場合は、自分で確認して試すことができます（webpackを使用）。 SlidingWarfare Repo

javascriptnode.jsexpresswebsocketserver
7
Yasin Hosseinpur

混乱はここから始まります：

_const server = express();
_

express関数は実際にはサーバーを返しません。アプリケーションを返します。通常、これに使用される変数はappですが、もちろんこれは慣例にすぎません（つまり、要件ではありません）。

ただし、アプリをWSサーバーに渡すと問題になります。

_const wss = new SocketServer({ server });
_

これは、SocketServerにはHTTPサーバーインスタンスが必要であり、serverには必要ないためです。

変数の名前を変更せずに修正します。

_let httpServer = server.listen(PORT, () => console.log(`Listening on ${ PORT }`));
...
const wss = new SocketServer({ server : httpServer });
_

（Expressインスタンスで.listen()を呼び出すと、HTTPサーバーインスタンスが返されるため）

変数の命名規則を使用すると、次のようになります。

_const app = express();

app.use(express.static(path.join(__dirname, 'lib')));
app.use('/assets', express.static(path.join(__dirname, 'assets')));

let server = app.listen(PORT, () => console.log(`Listening on ${ PORT }`));

const wss = new SocketServer({ server });
_
8
robertklep