☰

WebSocket と Server-Sent イベント/EventSource [closed] 質問する

tag-icon • tag-icon html browser websocket server-sent-events
WebSocket と Server-Sent イベント/EventSource [closed] 質問する

両方Webソケットそしてサーバー送信イベントブラウザにデータをプッシュすることができます。私には、これらは競合するテクノロジーのように思えます。これらの違いは何でしょうか? どちらを選択するのでしょうか?

事実と引用を添えて回答してください。

ベストアンサー1

Websocket と SSE (Server Sent Events) はどちらもデータをブラウザにプッシュできますが、競合するテクノロジではありません。

Websocket 接続では、ブラウザにデータを送信したり、ブラウザからデータを受信したりできます。Websocket を使用できるアプリケーションのよい例としては、チャット アプリケーションがあります。

SSE 接続は、データをブラウザにプッシュすることしかできません。オンライン株価情報や、タイムラインやフィードを更新する Twitter などは、SSE のメリットを享受できるアプリケーションの良い例です。

実際には、SSE で実行できることはすべて Websockets でも実行できるため、Websockets はより多くの注目と愛着を集めており、SSE よりも多くのブラウザーが Websockets をサポートしています。

ただし、一部の種類のアプリケーションでは過剰になる可能性があり、バックエンドは SSE などのプロトコルを使用して実装する方が簡単になる可能性があります。

さらに、SSEはJavaScriptだけでネイティブにサポートされていない古いブラウザにポリフィルすることができます。SSEポリフィルの実装のいくつかは、Modernizr github ページ。

注意点:

  • SSEは、開いている接続の最大数に制限があり、制限はブラウザごとに非常に低い数（6）に設定されているため、複数のタブを開くときに特に問題となる可能性があります。この問題は、クロムそしてファイアフォックスこの制限はブラウザ + ドメインごとに適用されるため、すべてのタブで 6 つの SSE 接続を開くことができwww.example1.com、さらに 6 つの SSE 接続を開くことができますwww.example2.com(Phate に感謝)。
  • WS のみがバイナリ データと UTF-8 の両方を送信できますが、SSE は UTF-8 に制限されています。(Chado Nihi 氏に感謝します)。
  • パケット検査機能を備えた一部のエンタープライズ ファイアウォールでは、WebSocket の処理に問題があります (Sophos XG Firewall、WatchGuard、McAfee Web Gateway)。

HTML5ロックSSE に関する有益な情報があります。そのページから:

サーバー送信イベントと WebSocket

WebSocket ではなく Server-Sent Events を選択する理由は何でしょうか? 良い質問ですね。

SSE が影に隠れている理由の 1 つは、WebSocket などの最近の API が双方向の全二重通信を実行するためのより豊富なプロトコルを提供しているためです。双方向チャネルを持つことは、ゲームやメッセージング アプリなど、双方向でほぼリアルタイムの更新が必要な場合に、より魅力的です。ただし、シナリオによっては、クライアントからデータを送信する必要がありません。必要なのは、サーバーのアクションからの更新だけです。いくつかの例としては、友人のステータス更新、株価表示、ニュース フィード、その他の自動データ プッシュ メカニズム (クライアント側の Web SQL データベースまたは IndexedDB オブジェクト ストアの更新など) があります。サーバーにデータを送信する必要がある場合は、XMLHttpRequest が常に役立ちます。

SSE は従来の HTTP 経由で送信されます。つまり、動作させるために特別なプロトコルやサーバー実装は必要ありません。一方、WebSocket では、プロトコルを処理するために全二重接続と新しい Web Socket サーバーが必要です。さらに、Server-Sent Events には、自動再接続、イベント ID、任意のイベントを送信する機能など、WebSocket には設計上欠けているさまざまな機能があります。

TLDR要約:

Websocket と比較した SSE の利点:

  • カスタムプロトコルではなくシンプルなHTTP経由で転送される
  • SSE をまだサポートしていないブラウザに「バックポート」するために、JavaScript でポリフィルすることができます。
  • 再接続とイベントIDのサポートを内蔵
  • よりシンプルなプロトコル
  • 企業のファイアウォールがパケット検査を行うので問題なし

SSE に対する Websocket の利点:

  • リアルタイムの双方向通信。
  • より多くのブラウザでネイティブサポート

SSE の理想的な使用例:

  • 株価ティッカーストリーミング
  • Twitterフィードの更新
  • ブラウザへの通知

SSE の注意点:

  • バイナリサポートなし
  • 最大オープン接続数制限

おすすめ記事