WebSocket连接失败：WebSocket握手时出错：意外响应代码：400

Question

我正试图将socket.io与Angular集成，但在建立从客户端到服务器的连接时遇到了困难。我已经查看了其他相关问题，但我的问题发生在本地，所以中间没有web服务器。

这就是我的服务器代码的样子：

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');
  });
});

我使用Grunt按以下顺序加载客户端JavaScript文件：

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!' });
    });

    ...
}

我刚刚意识到websockets正在部分工作。我在Chrome开发者控制台看到一个101交换协议请求。但是，我看到的帧只有Engine.io协议包(ping、pong)。然而，由于某种原因，我的应用程序套接字消息仍然返回轮询...

Answer 1

问题解决了！我刚刚想出了如何解决这个问题，但我仍然想知道这是否是正常的行为。

看起来，即使Websocket连接正确建立（由101交换协议请求指示），它仍然默认为长轮询。修复方法非常简单，只需将此选项添加到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问题为我指明了正确的方向。感谢所有帮忙的人！