socket.io和websockets之间的差异

杀马特。学长 韩版系。学妹 提交于 2020-02-28 06:34:32

node.js中socket.io和websockets之间有什么区别?
它们都是服务器推送技术吗? 我觉得唯一的区别是,

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

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

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

请澄清一下。


#1楼

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

这是对WebSockets和Socket.IO的良好读取。

http://davidwalsh.name/websocket


#2楼

我将提供反对使用socket.io的论据。

我认为使用socket.io只是因为它有后备不是一个好主意。 让IE8 RIP。

在过去,很多情况下NodeJS的新版本已经破坏了socket.io。 您可以查看这些列表以获取示例... https://github.com/socketio/socket.io/issues?q=install+error

如果你去开发一个Android应用程序或需要使用现有应用程序的东西,你可能会马上使用WS,socket.io可能会给你带来一些麻烦......

此外,Node.JS的WS模块使用起来非常简单。


#3楼

误区

关于WebSocket和Socket.IO几乎没有什么误解:

  1. 第一个误解是使用Socket.IO比使用WebSocket要容易得多,而WebSocket似乎并非如此。 见下面的例子。

  2. 第二个误解是WebSocket在浏览器中没有得到广泛支持。 有关详细信息,请参见下文

  3. 第三个误解是Socket.IO将连接降级为旧浏览器的后备。 它实际上假设浏览器是旧的并且启动与服务器的AJAX连接,稍后在交换一些流量之后在支持WebSocket的浏览器上升级。 请参阅下文了解详情。

我的实验

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

它是服务器端和客户端代码的简单示例 - 客户端使用WebSocket或Socket.IO连接到服务器,服务器以1s间隔发送三条消息,由客户端添加到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

Socket.IO服务器

使用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客户端

使用vanilla 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

Socket.IO客户端

使用vanilla 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 s

从这2个请求:

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

(连接升级请求在具有101个交换协议响应的开发人员工具上可见。)

Socket.IO结果

6个请求,181.56 KB,0.25 s

从这6个请求中:

  1. HTML页面本身
  2. Socket.IO的JavaScript(180千字节)
  3. 第一次长轮询AJAX请求
  4. 第二次长轮询AJAX请求
  5. 第三次长轮询AJAX请求
  6. 连接升级到WebSocket

截图

我在localhost上获得的WebSocket结果:

我在localhost上得到的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


#4楼

使用Socket.IO基本上就像使用jQuery - 你想支持旧版浏览器,你需要编写更少的代码,库将提供回退。 Socket.io使用websockets技术(如果可用),如果没有,则检查可用的最佳通信类型并使用它。


#5楼

Socket.IO使用WebSocket,当WebSocket不可用时,使用后备算法进行实时连接。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!