socket.io和websockets之間的差別

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之間的區別：

• https://www.npmjs.com/package/websocket-vs-socket.io
• https://github.com/rsp/node-websocket-vs-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不可用時，使用後備算法進行實時鏈接。