web-dev-qa-db-ja.com

socket.ioとwebsocketsの違い

Node.jsのsocket.ioとwebsocketsの違いは何ですか？
どちらもサーバープッシュテクノロジですか。私が感じた唯一の違いは、

  1. socket.ioにより、イベント名を指定してメッセージを送信/送信することができました。

  2. Socket.ioの場合、サーバーからのメッセージはすべてのクライアントに届きますが、WebSocketの場合と同じように、すべての接続の配列を保持し、それをループしてすべてのクライアントにメッセージを送信する必要がありました。

また、なぜWebインスペクタ（Chrome/firebug/fiddlerのような）がサーバーからこれらのメッセージ（socket.io/websocketから）を捕らえることができないのだろうか？

これを明確にしてください。

node.jsgoogle-chromefirebugwebsocketsocket.io
374
Vivek

その利点は、＃2で説明したようにWebSocketの使用が簡単になることです。さらに重要なのは、WebSocketがブラウザまたはサーバーでサポートされていない場合に他のプロトコルへのフェイルオーバーを提供することです。あなたがそれらが働かない環境に非常に精通していて、あなたがそれらの制限を回避することができるならば、私はWebSocketを直接使うことを避けます。

これはWebSocketsとSocket.IOの両方についての優れた読み物です。

http://davidwalsh.name/websocket

292
Timothy Strimple

誤解

WebSocketとSocket.IOに関してよくある誤解はほとんどありません。

  1. 最初の誤解は、Socket.IOを使用することは、そうではないと思われるWebSocketを使用することよりもはるかに簡単であるということです。以下の例を参照してください。

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

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

私の実験

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

これは、サーバーサイドおよびクライアントサイドのコードの簡単な例です。クライアントはWebSocketまたはSocket.IOを使用してサーバーに接続し、サーバーは1秒間隔で3つのメッセージを送信し、それらはクライアントによってDOMに追加されます。

サーバ側

Express.jsアプリケーションでWebSocketとSocket.IOを使用して同じことを行うサーバーサイドの例を比較します。

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秒

これら2つの要求から：

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

（接続アップグレード要求は101スイッチングプロトコル応答と開発者ツールで目に見えます。）

Socket.IOの結果

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

これら6つの要求から：

  1. hTMLページ自体
  2. Socket.IOのJavaScript（180キロバイト）
  3. 最初のロングポーリングAJAXリクエスト
  4. 2回目のロングポーリングAJAX要求
  5. 3回目のロングポーリングAJAX要求
  6. webSocketへの接続アップグレード

スクリーンショット

Localhostで取得したWebSocketの結果：

WebSocket results - websocket-vs-socket.io module

Socket.IOの結果、私はlocalhostを手に入れました。

Socket.IO results - websocket-vs-socket.io module

自分を試す

クイックスタート：

# Install:
npm i -g websocket-vs-socket.io
# Run the server:
websocket-vs-socket.io

ブラウザで http：// localhost：3001 / を開き、Shift + Ctrl + Iで開発者用ツールを開き、[ネットワーク]タブを開いてページをリロードします。 WebSocketバージョンのネットワークトラフィックを表示するには、Ctrl + Rを押します。

ブラウザで http：// localhost：3002 / を開き、Shift + Ctrl + Iを押して開発者ツールを開き、[ネットワーク]タブを開いてページをリロードします。 Socket.IOバージョンのネットワークトラフィックを表示するには、Ctrl + Rを押します。

アンインストールするには：

# Uninstall:
npm rm -g websocket-vs-socket.io

ブラウザの互換性

2016年6月現在、WebSocketは9以上のIEを含む、Opera Mini以外のすべてに対応しています。

これは、2016年6月現在、 使用可能 のWebSocketのブラウザ互換性です。

enter image description here

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

416
rsp

私は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モジュールは驚くほど簡単に使用できます。

26
Victorio Berra

Socket.IOを使うことは基本的にjQueryを使うことに似ています - あなたはより古いブラウザをサポートしたい、あなたはより少ないコードを書く必要がありライブラリはフォールバックを提供するでしょう。 Socket.ioは、利用可能であればWebSocketsテクノロジを使用し、利用可能でない場合は、利用可能な最良の通信タイプを確認して使用します。

18
Dev Agrawal

Socket.IOはWebSocketを使用し、WebSocketが利用できない場合はフォールバックアルゴを使用してリアルタイム接続を確立します。

3
Nitin Tyagi

最近のブラウザが現在WebSocketをサポートしていても、SocketIOを捨てる必要はないと思いますし、今日のプロジェクトでもその位置を占めています。わかりやすいし、個人的には、SocketIOのおかげでWebSocketがどのように機能するかを学びました。

このトピックで述べたように、Angular、Reactなどのための多数の統合ライブラリと、TypeScriptや他のプログラミング言語のための定義型があります。

私がSocket.ioとWebSocketsの違いに付け加えるもう1つの点は、Socket.ioを使ったクラスタリングは大した問題ではないということです。 Socket.ioは、拡張性を高めるためにRedisとリンクするために使用できる アダプタ を提供しています。たとえば、 ioredis や socket.io-redis があります。

はい、私は知っています、 SocketCluster は存在しますが、それは話題外です。

1
Maxime Lafarie