WebSocket连接失败:WebSocket握手期间出错:意外的响应代码:400 [英] WebSocket connection failed: Error during WebSocket handshake: Unexpected response code: 400
问题描述
我正在尝试将Socket.io与Angular集成在一起,并且在建立从客户端到服务器的连接时遇到了困难.我已经浏览了其他相关问题,但是我的问题发生在本地,所以中间没有Web服务器.
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交换协议"请求.但是,我看到的唯一帧是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屋!