誤解
WebSocket と Socket.IO に関してよくある誤解がいくつかあります。
最初の誤解は、WebSocket を使用するよりも Socket.IO を使用する方がはるかに簡単であるということですが、そうではないようです。以下の例を参照してください。
2 つ目の誤解は、WebSocket がブラウザで広くサポートされていないということです。詳細については、以下を参照してください。
3 つ目の誤解は、Socket.IO が古いブラウザーのフォールバックとして接続をダウングレードするというものです。実際には、ブラウザーが古いものであると想定し、サーバーへの AJAX 接続を開始します。トラフィックが交換された後、WebSocket をサポートするブラウザーで後でアップグレードされます。詳細については、以下を参照してください。
私の実験
WebSocket と Socket.IO の違いを示すために npm モジュールを作成しました。
これはサーバー側とクライアント側のコードの簡単な例です。クライアントは WebSocket または Socket.IO を使用してサーバーに接続し、サーバーは 1 秒間隔で 3 つのメッセージを送信し、クライアントによって 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
ネットワーク トラフィック
ネットワーク トラフィックの違いを確認するには、my test を実行します。私が得た結果は次のとおりです。
WebSocket の結果
2 リクエスト、1.50 KB、0.05 秒
これらの 2 つの要求から:
- HTML ページ自体
- WebSocket への接続のアップグレード
(接続アップグレード要求は、101 Switching Protocols 応答で開発者ツールに表示されます。)
Socket.IO の結果
6 リクエスト、181.56 KB、0.25 秒
これらの 6 つの要求から:
- HTML ページ自体
- Socket.IO の JavaScript (180キロバイト)
- 最初のロング ポーリング AJAX リクエスト
- 2 番目の長いポーリング AJAX 要求
- 3 番目のロング ポーリング AJAX リクエスト
- WebSocket への接続のアップグレード
スクリーンショット
localhost で取得した 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 Mini 以外のすべてで動作し、IE 9 以降も含まれます。
これは、 2016 年 6 月現在のCan I Useでの WebSocket のブラウザー互換性です。

最新情報については、 http://caniuse.com/websocketsを参照してください。