socket.io和WebSockets的差异socket.io和WebSockets的差异(Dif

2019-05-13 12:26发布

什么是socket.io之间的WebSockets在node.js的区别在哪里?
他们是两个服务器推技术? 我觉得唯一的区别是,

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

  2. 在socket.io的情况下,从服务器的消息将到达所有客户端,但对于的WebSockets同我被迫保持通过它的所有连接和环路的阵列将消息发送到所有客户端。

另外,我不知道为什么网上督察(如镀铬/萤火虫/小提琴手)是无法赶上从服务器这些邮件(来自socket.io/websocket)?

请澄清这一点。

Answer 1:

它的优点是,你所描述#2,可能更重要的是它提供了故障接管到WebSockets的是不支持的浏览器或服务器事件的其它协议,它简化的WebSockets的使用。 我会避免直接使用的WebSockets,除非你非常熟悉什么样的环境,他们不工作,你是能够围绕这些限制工作。

这是双方的WebSockets和Socket.IO很好看。

http://davidwalsh.name/websocket



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

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

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

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

从这些2个请求:

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

(连接请求升级是在开发工具与101交换协议响应可见。)

Socket.IO结果

6个请求,181.56 KB,0.25秒

从这些6个请求:

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

截图

WebSocket的结果,我在localhost上了:

Socket.IO结果我在localhost上了:

测试自己

快速开始:

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

打开HTTP://本地主机:3001 /在你的浏览器,开放的开发工具使用SHIFT + CTRL + I,打开网络选项卡,并重新加载按Ctrl + R的页面看到网络流量WebSocket的版本。

打开HTTP://本地主机:3002 /在你的浏览器,开放的开发工具使用SHIFT + CTRL + I,打开网络选项卡,并重新加载按Ctrl + R页面,查看网络流量的Socket.IO版本。

要卸载:

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

浏览器兼容性

截至6月2016年的WebSocket适用于一切,除了Opera Mini的,包括IE高于9。

这是的WebSocket的浏览器兼容性我可以使用如2016年6月的:

见http://caniuse.com/websockets长达最新信息。



Answer 3:

我要去提供对使用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模块是非常简单易用。



Answer 4:

使用Socket.IO是基本上像使用jQuery - 要支持旧的浏览器,你需要写更少的代码和库将回退提供。 Socket.io使用的WebSockets技术如果有的话,如果没有,检查最佳的通信类型提供并使用它。



Answer 5:

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



Answer 6:

即使现代的浏览器都支持WebSockets的,我觉得也没有必要抛出SocketIO远,它仍然有它的位置在现在的任何项目。 这很容易理解,并亲自,我学到的WebSockets是如何工作的感谢SocketIO。

正如本主题中说,有一个大量的集成库为角,反应过来,等和定义类型打字稿和其他编程语言。

另外一点我想补充到Socket.io和WebSockets的之间的差异是与Socket.io该集群是不是一个大问题。 Socket.io提供适配器 ,可用于将它与Redis的链接,以提高可扩展性。 你有ioredis和socket.io,Redis的 ,例如。

是的,我知道, SocketCluster存在,但那是题外话。



文章来源: Differences between socket.io and websockets