誤認識

WebSocketとSocket.IOに関しては、よくある誤解があります。

1.1. 最初の誤解は、Socket.IOを使う方がWebSocketを使うよりもはるかに簡単であるというものですが、実際にはそうではないようです。以下の例をご覧ください。

2.2. 2つ目の誤解は、WebSocketがブラウザで広くサポートされていないことです。詳細は以下を参照してください。

3.3.3つ目の誤解は、Socket.IOは古いブラウザではフォールバックとして接続をダウングレードするということです。実際には、ブラウザが古いことを想定して、サーバーへのAJAX接続を開始しますが、WebSocketをサポートするブラウザでは、いくつかのトラフィックが交換された後、後でアップグレードされます。詳細は以下を参照してください。

私の実験

WebSocketとSocket.IOの違いを示すために、npmモジュールを書きました。

• https://www.npmjs.com/package/websocket-vs-socket.io
• https://github.com/rsp/node-websocket-vs-socket.io

これは、サーバーサイドとクライアントサイドのコードの簡単な例です。クライアントは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

ソケット.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

ソケット.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.50KB、0.05秒

その2つのリクエストから

1.HTMLページ自体 2. WebSocketへの接続アップグレード

(接続アップグレードのリクエストは、101 Switching Protocolsのレスポンスで開発者ツール上で確認できます)

ソケット.IOの結果

6リクエスト、181.56KB、0.25秒

この6つのリクエストから

1.HTMLページそのもの 2.Socket.IOのJavaScript(180キロバイト) 最初の長いポーリングAJAXリクエスト 4. 2回目のロングポーリングAJAXリクエスト 3番目のロングポーリングAJAXリクエスト 6. 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は9以上のIEを含め、Opera Miniを除くすべてのブラウザで動作します。

2016年6月現在のCan I UseにおけるWebSocketのブラウザ互換性です。

[![Enter image description here][3]][3].

最新の情報は http://caniuse.com/websockets をご覧ください。

[3]： http://i.stack.imgur.com/igTKM.png

その利点は、2で述べたように、WebSocketの使用を単純化すること、そしておそらくより重要なのは、WebSocketがブラウザやサーバでサポートされていない場合に、他のプロトコルへのフェイルオーバーを提供することです。私は、WebSocketsがどのような環境で使えないかを熟知し、その制限を回避する能力がない限り、WebSocketsを直接使用することは避けます。

WebSocketとSocket.IOについては、こちらの記事が参考になります。

http://davidwalsh.name/websocket

ここでは、socket.ioを使うことに反対する意見を述べます。

フォールバックがあるという理由だけでsocket.ioを使うのは良いアイデアではないと思います。IE8はもう終わりにしましょう。

過去には、NodeJSの新しいバージョンでsocket.ioが壊れるケースがたくさんありました。 以下のリストで例を確認することができます... https://github.com/socketio/socket.io/issues?q=install+error

Androidアプリや、既存のアプリとの連携が必要なものを開発しに行く場合、おそらくWSをすぐに使っても問題ないと思いますが、socket.ioはそこそこ苦労するかもしれません...。

それに、Node.JSのWSモジュールは驚くほど簡単に使えます。