soket.io.js的坑

客户端和服务器端要么都用websocket要么都用socket.io这样才能连接,否则不能连接.

客户端html中关于socket.io/socket.io.js的引用必须保证html页与server实现的代码文件在同一目录.

 

使用Socket.IO实现websocket时,遇到两个小坑,记录如下:

1.Socket.IO无法创建一个可使用(js原生WebSocket方法)连接的websocket,

<!DOCTYPE html>
<html>
<head>
<script>
var socketClient = new WebSocket("ws://localhost:9999");
</script>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
会有如下报错:
WebSocket connection to ‘ws://localhost:9999/’ failed: Connection closed before receiving a handshake response

原因是“socket.io不是 websocket 的实现。尽管socket.io确实在可能的时候使用WebSocket传输,它为每个包增加了一些metadata:包类型(packet type)、namespace以及当需要确认消息时的ack id。这也是为什么一个WebSocket客户端无法成功连接到Socket.io服务端,同样一个socket.io客户端也无法连接到WebServer服务端。”

Socket.IO官网原文(https://socket.io/docs/#What-Socket-IO-is-not):

What Socket.IO is not
Socket.IO is NOT a WebSocket implementation. Although Socket.IO indeed uses WebSocket as a transport when possible, it adds some metadata to each packet: the packet type, the namespace and the ack id when a message acknowledgement is needed. That is why a WebSocket client will not be able to successfully connect to a Socket.IO server, and a Socket.IO client will not be able to connect to a WebSocket server either. Please see the protocol specification here.

js中引入socket.io.js路径问题
根据官网给出的code,要想连接socket.io建立的server,需要在client端引入socket.io.js,此文件可由server端代码自动生成,也可以通过cdn引入。

<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
</script>
1
2
3
4
5
6
7
8
但以上代码会报错
GET file:///socket.io/socket.io.js net::ERR_FILE_NOT_FOUND

此时,需要在把index.html与实现server的代码放在同一文件路径的前提下,将

<script src="http://localhost:9999/socket.io/socket.io.js"></script>
1
OVER

以下为Socket.IO官网有关其是什么的解释,所以大部分情况下官方文档才是第一选择。

什么是Socket.IO
Socket.IO是一个library,支持浏览器和服务器之间实时、双向以及基于事件的通信。
Socket.IO的构成包括:
一个Node.js实现的server
一个运行于浏览器的 js客户端库(同样可以运行在Node.js中)
————————————————
版权声明:本文为CSDN博主「Bbigticket」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/sinat_20846487/article/details/88662802

posted on   DreamOnTheGo  阅读(1060)  评论(0编辑  收藏  举报

编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2015-04-26 找到webbrowser中的控件句柄发送消息-转
2015-04-26 设置ie cookie 转
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示