socket.io 和 websockets 的区别

Question

node.js中的socket.io和websockets有什么区别？

它们都是服务器推送技术吗？我感觉到的唯一不同是，

1. socket.io 允许我通过指定事件名称来发送/发送消息。

2. 在 socket.io 的情况下，来自服务器的消息将到达所有客户端，但对于 websockets 中的相同，我被迫保留所有连接的数组并循环通过它以向所有客户端发送消息。

另外，我想知道为什么网络检查器（如 Chrome/firebug/fiddler）无法从服务器捕获这些消息（来自 socket.io/websocket）？

请澄清这一点。

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

Answer 1

它的优点是它简化了 WebSockets 的使用，正如您在 #2 中描述的那样，并且可能更重要的是，它提供了在浏览器或服务器上不支持 WebSockets 的情况下对其他协议的故障转移。我会避免直接使用 WebSockets，除非您非常熟悉它们不工作的环境并且您能够解决这些限制。

这是一本关于 WebSockets 和 Socket.IO 的好书。

http://davidwalsh.name/websocket

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

Answer 2

误解

关于 WebSocket 和 Socket.IO，有一些常见的误解：

1. 第一个误解是使用 Socket.IO 比使用 WebSocket 容易得多，但事实并非如此。请参阅下面的示例。

2. 第二个误解是浏览器并未广泛支持 WebSocket。有关更多信息，请参见下文。

3. 第三个误解是 Socket.IO 将连接降级为旧浏览器的后备。它实际上假定浏览器是旧的并启动到服务器的 AJAX 连接，稍后在交换一些流量后在支持 WebSocket 的浏览器上升级。详情见下文。

我的实验

我写了一个 npm 模块来演示 WebSocket 和 Socket.IO 之间的区别：

• https://www.npmjs.com/package/websocket-vs-socket.io
• https://github.com/rsp/node-websocket-vs-socket.io

这是服务器端和客户端代码的一个简单示例 - 客户端使用 WebSocket 或 Socket.IO 连接到服务器，服务器以 1 秒的间隔发送三个消息，这些消息由客户端添加到 DOM。

服务器端

比较使用 WebSocket 和 Socket.IO 在 Express.js 应用程序中执行相同操作的服务器端示例：

WebSocket 服务器

使用 Express.js 的 WebSocket 服务器示例：

 var path = require('path');
var app = require('express')();
var ws = require('express-ws')(app);
app.get('/', (req, res) => {
  console.error('express connection');
  res.sendFile(path.join(__dirname, 'ws.html'));
});
app.ws('/', (s, req) => {
  console.error('websocket connection');
  for (var t = 0; t < 3; t++)
    setTimeout(() => s.send('message from server', ()=>{}), 1000*t);
});
app.listen(3001, () => console.error('listening on http://localhost:3001/'));
console.error('websocket example');

来源： https ://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.js

套接字服务器

使用 Express.js 的 Socket.IO 服务器示例：

 var path = require('path');
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', (req, res) => {
  console.error('express connection');
  res.sendFile(path.join(__dirname, 'si.html'));
});
io.on('connection', s => {
  console.error('socket.io connection');
  for (var t = 0; t < 3; t++)
    setTimeout(() => s.emit('message', 'message from server'), 1000*t);
});
http.listen(3002, () => console.error('listening on http://localhost:3002/'));
console.error('socket.io example');

来源： https ://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.js

客户端

比较使用 WebSocket 和 Socket.IO 在浏览器中执行相同操作的客户端示例：

WebSocket 客户端

使用普通 JavaScript 的 WebSocket 客户端示例：

 var l = document.getElementById('l');
var log = function (m) {
    var i = document.createElement('li');
    i.innerText = new Date().toISOString()+' '+m;
    l.appendChild(i);
}
log('opening websocket connection');
var s = new WebSocket('ws://'+window.location.host+'/');
s.addEventListener('error', function (m) { log("error"); });
s.addEventListener('open', function (m) { log("websocket connection open"); });
s.addEventListener('message', function (m) { log(m.data); });

来源： https ://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.html

套接字客户端

使用普通 JavaScript 的 Socket.IO 客户端示例：

 var l = document.getElementById('l');
var log = function (m) {
    var i = document.createElement('li');
    i.innerText = new Date().toISOString()+' '+m;
    l.appendChild(i);
}
log('opening socket.io connection');
var s = io();
s.on('connect_error', function (m) { log("error"); });
s.on('connect', function (m) { log("socket.io connection open"); });
s.on('message', function (m) { log(m); });

来源： https ://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.html

网络流量

要查看网络流量的差异，您可以 运行我的测试。这是我得到的结果：

WebSocket 结果

2 个请求，1.50 KB，0.05 秒

从这两个请求中：

1. HTML 页面本身
2. 连接升级到 WebSocket

（连接升级请求在开发者工具上可见，响应为 101 Switching Protocols。）

Socket.IO 结果

6 个请求，181.56 KB，0.25 秒

从这 6 个请求中：

1. HTML 页面本身
2. Socket.IO 的 JavaScript（180 KB）
3. 第一个长轮询 AJAX 请求
4. 第二个长轮询 AJAX 请求
5. 第三个长轮询 AJAX 请求
6. 连接升级到 WebSocket

截图

我在本地主机上获得的 WebSocket 结果：

我在本地主机上获得的 Socket.IO 结果：

测试自己

快速开始：

 # Install:
npm i -g websocket-vs-socket.io
# Run the server:
websocket-vs-socket.io

在浏览器中打开 http://localhost:3001/ ，使用 Shift+Ctrl+I 打开开发人员工具，打开网络选项卡并使用 Ctrl+R 重新加载页面以查看 WebSocket 版本的网络流量。

在浏览器中打开 http://localhost:3002/ ，使用 Shift+Ctrl+I 打开开发人员工具，打开网络选项卡并使用 Ctrl+R 重新加载页面以查看 Socket.IO 版本的网络流量。

卸载：

 # Uninstall:
npm rm -g websocket-vs-socket.io

浏览器兼容性

截至 2016 年 6 月，WebSocket 适用于除 Opera Mini 之外的所有内容，包括高于 9 的 IE。

这是截至 2016 年 6 月 我可以使用 WebSocket 的浏览器兼容性：

有关最新信息，请参阅 http://caniuse.com/websockets 。

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