误解
关于WebSocket和Socket.IO的误解很少：
第一个误解是，使用Socket.IO比使用WebSocket容易得多，而事实并非如此。请参阅下面的示例。
第二个误解是浏览器未广泛支持WebSocket。请参阅下面的更多信息。
第三个误解是Socket.IO将连接降级作为旧版浏览器的后备。实际上，它假定浏览器是旧的，并开始与服务器建立AJAX连接，然后在交换某些流量之后，在支持WebSocket的浏览器上对其进行升级。有关详情，请参见下文。
我的实验
我编写了一个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客户端
使用普通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 s
从这2个请求中：
- HTML页面本身
- 连接升级到WebSocket
（连接升级请求在开发人员工具上显示为101交换协议响应。）
Socket.IO结果
6个请求，181.56 KB，0.25 s
从这6个请求中：
- HTML页面本身
- Socket.IO的JavaScript（180 KB）
- 第一个长期轮询AJAX请求
- 第二次长时间轮询AJAX请求
- 第三次长时间轮询AJAX请求
- 连接升级到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 Opera以外的所有平台上运行，包括高于9的IE。
自2016年6月起，这是WebSocket在“我可以使用”上的浏览器兼容性：
有关最新信息，请参见http://caniuse.com/websockets。