[解決済み】WebSocket接続に失敗しました。WebSocket のハンドシェイク中にエラーが発生しました。予期しない応答コードです。400

質問

Socket.ioをAngularと統合しようとしていますが、クライアントサイドからサーバーへの接続に問題があります。私は他の関連する質問に目を通しましたが、私の問題はローカルで起こっているので、真ん中にウェブサーバーはありません。

私のサーバーコードはこんな感じです。

const app = express();
const server = http.createServer(app);
const io = require('socket.io').listen(server);

io.on('connection', function(socket) {
  socket.emit('greet', { hello: 'Hey, Mr.Client!' });

  socket.on('respond', function(data) {
    console.log(data);
  });
  socket.on('disconnect', function() {
    console.log('Socket disconnected');
  });
});

クライアント側のJavaScriptファイルをGruntを使って以下の順番で読み込んでいます。

dist: {
    src: [
        public/bower_components/angular/angular.min.js,
        ...
        public/bower_components/socket.io-client/dist/socket.io.min.js,
        public/bower_components/angular-socket-io/socket.min.js,
        ...
    ]
}

そして、私のコントローラーで

function MyController($scope) {

    let socket = io.connect(window.location.href);
    socket.connect('http://localhost:3000');
    socket.on('greet', function(data) {
      console.log(data);
      socket.emit('respond', { message: 'Hello to you too, Mr.Server!' });
    });

    ...
}

実際に使用する前に btford/angular-socket-io ライブラリで、正しく接続できることを確認したいのですが、コンソールに次のようなエラーが表示されます。

面白いのは、Node.jsのサーバープロセスを再起動すると、websocketの代わりにポーリングを使ってメッセージを送信することができることです。

socket.connectの呼び出しでいろいろなオプションを試したのですが、何もうまくいきませんでした。

何かお手伝いいただけると幸いです。

を更新しました（2016/12/30）。

今気づいたのですが、websocketsは部分的に動作しています。Chromeのデベロッパーコンソールで101 Switching Protocolsのリクエストが表示されるんです。しかし、私がそこに見る唯一のフレームは、engine.ioプロトコルのパケット（ping、pong）です。しかし、私のアプリケーションソケットメッセージは、なぜかまだポーリングにフォールバックします。

解決方法は？

問題解決 この問題を解決する方法はわかりましたが、これが正常な動作なのかどうか、まだ知りたいです。

Websocket 接続が正しく確立されても (101 Switching Protocols リクエストで示される)、デフォルトで long-polling になっているようです。この修正は、Socket.io の接続関数にこのオプションを追加することで簡単に行うことができました。

{transports: ['websocket']}

それで、最終的にこのようなコードになりました。

const app = express();
const server = http.createServer(app);
var io = require('socket.io')(server);

io.on('connection', function(socket) {
  console.log('connected socket!');

  socket.on('greet', function(data) {
    console.log(data);
    socket.emit('respond', { hello: 'Hey, Mr.Client!' });
  });
  socket.on('disconnect', function() {
    console.log('Socket disconnected');
  });
});

で、クライアントでは

var socket = io('ws://localhost:3000', {transports: ['websocket']});
socket.on('connect', function () {
  console.log('connected!');
  socket.emit('greet', { message: 'Hello Mr.Server!' });
});

socket.on('respond', function (data) {
  console.log(data);
});

そして、メッセージはフレームとして表示されるようになりました。

作業用ウェブソケット

この Githubイシュー が正しい方向を指し示してくれました。助けてくれた皆さん、ありがとうございました