第一个误解是，使用socket.io比使用WebSocket要容易得多，但事实似乎并非如此。见下面的示例。

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

第三个误解是，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连接到服务器，服务器以1s的间隔发送三条消息，这些消息由客户端添加到DOM中。

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

使用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执行相同操作的客户端示例:

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

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

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

从这两个请求中:

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

（在开发人员工具上可以看到连接升级请求，其中包含101个交换协议响应。）

在这6项请求中:

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

我在本地主机上得到的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打开developer tools，打开Network选项卡并使用Ctrl+R重新加载页面，以查看WebSocket版本的网络流量。

在浏览器中打开http://localhost:3002/，使用Shift+Ctrl+I打开developer tools，打开Network选项卡并使用Ctrl+R重新加载页面，以查看socket.io版本的网络流量。

卸载:

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

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

这是截至2016年6月WebSocket在Can I Use上的浏览器兼容性:

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