node.jsにおけるsocket.ioとwebsocketの違いは何ですか?
node.jsにおけるsocket.ioとwebsocketの違いは何ですか?
どちらもサーバープッシュ型の技術ですか?
私が感じた唯一の違いは
1.socket.ioでは、イベント名を指定してメッセージを送受信することができました。
2.socket.ioの場合、サーバーからのメッセージはすべてのクライアントに届きますが、websocketの場合、同じようにすべての接続の配列を保持し、すべてのクライアントにメッセージを送るためにそれをループする必要がありました。
また。 なぜウェブインスペクター(Chrome/firebug/fiddlerなど)は、サーバーからのこれらのメッセージ(socket.io/websocketから)をキャッチできないのでしょうか?
これを明らかにしてください。
WebSocketとSocket.IOに関しては、よくある誤解があります。
1.1. 最初の誤解は、Socket.IOを使う方がWebSocketを使うよりもはるかに簡単であるというものですが、実際にはそうではないようです。以下の例をご覧ください。
2.2. 2つ目の誤解は、WebSocketがブラウザで広くサポートされていないことです。詳細は以下を参照してください。
3.3.3つ目の誤解は、Socket.IOは古いブラウザではフォールバックとして接続をダウングレードするということです。実際には、ブラウザが古いことを想定して、サーバーへのAJAX接続を開始しますが、WebSocketをサポートするブラウザでは、いくつかのトラフィックが交換された後、後でアップグレードされます。詳細は以下を参照してください。
WebSocketとSocket.IOの違いを示すために、npmモジュールを書きました。
これは、サーバーサイドとクライアントサイドのコードの簡単な例です。クライアントはWebSocketまたはSocket.IOを使ってサーバーに接続し、サーバーは1秒間隔で3つのメッセージを送信し、それらはクライアントによってDOMに追加されます。
WebSocketとSocket.IOを使ったサーバーサイドの例を、Express.jsのアプリで同じことをする場合と比較してみましょう。
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を使ったクライアントサイドの例を、ブラウザで同じことができるかどうか比較してみましょう。
バニラ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
ネットワークトラフィックの違いを見るには、私のテストを実行することができます。私が得た結果は以下の通りです。
その2つのリクエストから
1.HTMLページ自体 2. WebSocketへの接続アップグレード
(接続アップグレードのリクエストは、101 Switching Protocolsのレスポンスで開発者ツール上で確認できます)
この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 をご覧ください。
その利点は、2で述べたように、WebSocketの使用を単純化すること、そしておそらくより重要なのは、WebSocketがブラウザやサーバでサポートされていない場合に、他のプロトコルへのフェイルオーバーを提供することです。私は、WebSocketsがどのような環境で使えないかを熟知し、その制限を回避する能力がない限り、WebSocketsを直接使用することは避けます。
WebSocketとSocket.IOについては、こちらの記事が参考になります。
ここでは、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モジュールは驚くほど簡単に使えます。