質問

両方 ウェブソケット と サーバー送信イベント は、ブラウザにデータをプッシュすることが可能です。私には、これらは競合する技術のように思えます。両者の違いは何でしょうか？また、どのような場合にどちらかを選ぶのでしょうか？

解決方法は？

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

Websocket接続は、ブラウザにデータを送信することも、ブラウザからデータを受信することもできます。ウェブソケットを使用できるアプリケーションの良い例は、チャットアプリケーションです。

SSE 接続は、データをブラウザにプッシュすることだけが可能です。オンライン株価やtwittersのタイムラインやフィードの更新は、SSEの恩恵を受けることができるアプリケーションの良い例です。

SSEでできることはすべてWebsocketでもできるので、実際にはWebsocketの方がより注目され、愛されており、SSEよりも多くのブラウザがWebsocketをサポートしています。

しかし、アプリケーションの種類によってはやりすぎの場合もあり、バックエンドはSSEのようなプロトコルで実装する方が簡単な場合もあります。

さらにSSEは、ネイティブに対応していない古いブラウザでも、JavaScriptだけでポリフィルすることが可能です。SSE のポリフィルの実装のいくつかは Modernizr githubページ .

ガッチャ。

• SSE は、開いている接続の最大数に制限があるため、さまざまなタブを開いているときに、特につらい思いをすることがあります。 ブラウザごとに という非常に低い数値(6)に設定されています。この問題は、以下のサイトで "Won't fix" としてマークされています。 クローム と ファイアフォックス . この制限はブラウザ + ドメインごとなので、すべてのタブで 6 つの SSE 接続を開くと www.example1.com に、さらに6つのSSE接続があります。 www.example2.com (Phateさんありがとうございます)。
• バイナリデータとUTF-8の両方を伝送できるのはWSのみで、SSEはUTF-8に限定されます。(新井茶土さんに感謝).
• パケット検査機能を持つ一部の企業向けファイアウォールは、WebSocket の扱いに問題があります (Sophos XG Firewall、WatchGuard、McAfee Web Gateway)。

HTML5Rocks は、SSEに関する良い情報を持っています。そのページより。

サーバー送信型イベントとWebSocketの比較

なぜWebSocketではなくServer-Sent Eventsを選ぶのでしょうか？良い質問です。

SSEが影を潜めていた理由のひとつは、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のゴチャゴチャ。

• バイナリ非対応
• 最大オープン接続数制限