WebSocket 连接失败:WebSocket 握手期间出错:意外响应代码:400 [英] WebSocket connection failed: Error during WebSocket handshake: Unexpected response code: 400

问题描述

我正在尝试将 Socket.io 与 Angular 集成，但在建立从客户端到服务器的连接时遇到困难.我查看了其他相关问题，但我的问题发生在本地，因此中间没有网络服务器.

I am trying to integrate Socket.io with Angular and I'm having difficulties making a connection from the client-side to the server. I've looked through other related questions but my issue is happening locally, so there's no web server in the middle.

这是我的服务器代码的样子:

This is what my server code looks like:

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 文件:

I'm loading the client side JavaScript files using Grunt in the following order:

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 库之前，我想确保我可以正确获得连接，但我在控制台中收到以下错误:

Before actually using the btford/angular-socket-io library, I want to make sure that I can get a connection correctly, but I get the following error in the console:

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

The interesting thing is that if I restart the Node.js server process, it does manage to send the message but using polling instead of websockets.

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

I tried all sorts of different options in the socket.connect call, but nothing worked.

任何帮助将不胜感激.

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

I just realized that websockets is working partially. I see a 101 Switching Protocols request in the Chrome developer console. However the only frames I see there are the engine.io protocol packets (ping, pong). However my application socket messages still fall back to polling for some reason...

推荐答案

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

Problem solved! I just figured out how to solve the issue, but I would still like to know if this is normal behavior or not.

似乎即使 Websocket 连接建立正确(由 101 Switching Protocols 请求指示)，它仍然默认为长轮询.修复就像将此选项添加到 Socket.io 连接函数一样简单:

It seems that even though the Websocket connection establishes correctly (indicated by the 101 Switching Protocols request), it still defaults to long-polling. The fix was as simple as adding this option to the Socket.io connection function:

{transports: ['websocket']}

所以代码最终是这样的:

So the code finally looks like this:

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 问题 为我指明了正确的方向.感谢所有帮助过的人！

This Github issue pointed me in the right direction. Thanks to everyone who helped out!

这篇关于WebSocket 连接失败:WebSocket 握手期间出错:意外响应代码:400的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！