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

Question

我正在尝试将 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');
  });
});

我按以下顺序使用 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!' });
    });

    ...
}

在实际使用 btford/angular-socket-io 库之前，我想确保我可以正确获得连接，但我在控制台中收到以下错误：

有趣的是，如果我重新启动 Node.js 服务器进程，它确实可以发送消息，但使用轮询而不是 websockets。

我在 socket.connect 调用中尝试了各种不同的选项，但没有任何效果。

任何帮助，将不胜感激。

---

更新（2016 年 12 月 30 日）：

我刚刚意识到 websockets 正在部分工作。我在 Chrome 开发者控制台中看到 101 Switching Protocols 请求。然而，我看到的唯一帧是 engine.io 协议数据包（ping、pong）。但是，由于某种原因，我的应用程序套接字消息仍然退回到轮询…

原文由 ashe540 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

似乎即使 Websocket 连接建立正确（由 101 Switching Protocols 请求指示），它仍然默认为长轮询。修复就像将这个选项添加到 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 问题 为我指明了正确的方向。感谢所有帮助过的人！

原文由 ashe540 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这对我适用于 Nginx、Node 服务器和 Angular 4

将您的 nginx Web 服务器配置文件编辑为：

 server {
listen 80;
server_name 52.xx.xxx.xx;

location / {
    proxy_set_header   X-Forwarded-For $remote_addr;
    proxy_set_header   Host $http_host;
    proxy_pass         "http://127.0.0.1:4200";
    proxy_http_version 1.1;
    proxy_set_header   Upgrade $http_upgrade;
    proxy_set_header   Connection "upgrade";
}

原文由 Abhijeet 发布，翻译遵循 CC BY-SA 3.0 许可协议