socket.io和websockets之间的区别

node.js中的socket.io和websockets有什么区别？
他们都是服务器推送技术吗？ 我唯一的区别是，

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

  2. 在socket.io的情况下，服务器的消息将会到达所有的客户端，但是对于websockets来说，我不得不保留所有连接的数组并通过循环来发送消息给所有的客户端。

另外，我不知道为什么networking督察（如铬/萤火虫/ fiddler）无法从服务器捕获这些消息（从socket.io/websocket）？

请澄清这一点。

Socket.IO可以使用WebSockets。

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

这是对WebSockets和Socket.IO的一个很好的阅读。

http://davidwalsh.name/websocket

误区

关于WebSocket和Socket.IO几乎没有什么常见的误解：

  1. 第一个误解是，使用Socket.IO比使用WebSocket要容易得多，这似乎并不是这样。 看下面的例子。

  2. 第二个误解是WebSocket在浏览器中不被广泛支持。 请参阅下面的更多信息。

  3. 第三个误解是，Socket.IO将连接降级为旧浏览器的后备。 它实际上假设浏览器是旧的，并开始一个AJAX连接到服务器，后来升级支持WebSocket的浏览器，一些stream量交换后。 详情请参阅下文。

我的实验

我写了一个npm模块来演示WebSocket和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客户端

使用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的Socket.IO客户端示例JavaScript： 

 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

networkingstream量

要查看networkingstream量的差异，您可以运行我的testing 。 这是我得到的结果：

WebSocket结果

2个请求，1.50 KB，0.05秒

从这两个请求：

  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结果：

WebSocket结果 - websocket-vs-socket.io模块

我在localhost上得到的Socket.IO结果：

Socket.IO结果 - websocket-vs-socket.io模块

testing自己

快速开始： 

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

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

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

要卸载： 

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

浏览器兼容性

截至2016年6月，除了Opera Mini之外，WebSocket都可以运行，其中IE高于9。

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

在这里输入图像说明

请参阅http://caniuse.com/websockets获取最新的信息。;

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

使用Socket.IO基本上就像使用jQuery一样 – 您希望支持旧浏览器，您需要编写更less的代码，并且库将提供后备。 如果可用的话，Socket.io使用websocket技术，如果没有的话，检查可用的最佳通信types并使用它。

Socket.IO使用WebSocket，当WebSocket不可用时，使用后备algorithm进行实时连接。

    Interesting Posts

    表格内的forms

    如何添加项目到jQuery中的数组？

    如何检查浏览器中的消失元素？

    在iPad上debuggingJavascript

    Firefox插件查看/编辑/创buildlocalStorage数据？

    是否有可能在浏览器中模拟方向？