web-dev-qa-db-ja.com

WebSockets対サーバー送信イベント/ EventSource

WebSockets および Server-Sent Events の両方で、データをブラウザにプッシュできます。私にとって彼らは競合する技術のようです。それらの違いは何ですか？どちらを選択しますか。

html5websocketserver-sent-events
693
Mads Mobæk

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

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

SSE接続はデータをブラウザにプッシュすることしかできません。 SSEの恩恵を受ける可能性のあるアプリケーションの例としては、オンラインの株価、またはタイムラインやフィードを更新するTwitterがあります。

実際にはSSEを使ってできることはすべてWebsocketを使ってもできるので、WebsocketsはSSEよりもWebSocketをサポートしていることに注目が集まっています。

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

さらにSSEは、JavaScriptだけを使用してネイティブにサポートされていない古いブラウザにも埋め込むことができます。 SSE polyfillsの実装例は Modernizr githubページ にあります。

ガッチャーズ：

  • SSEはオープン接続の最大数に制限があります。制限はブラウザあたりで、非常に低い数（6）に設定されているため、さまざまなタブを開くときには特に面倒です。この問題は Chrome および Firefox で「修正できない」としてマークされています
  • WSのみがバイナリデータとUTF-8の両方を送信できます。SSEはUTF-8に制限されています。 （Chado Nihiに感謝します）.

HTML5Rocks はSSEに関する良い情報を持っています。そのページから：

サーバー送信イベントとWebソケット

WebSocketを介してサーバー送信イベントを選択する理由は何ですか？良い質問。

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

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

TLDRの要約：

Webソケットに対するSSEの利点：

  • カスタムプロトコルではなく単純なHTTPを介して転送される
  • まだそれをサポートしていないブラウザに "backport" SSEするためにjavascriptでpoly-filledできます。
  • 再接続とイベントIDの組み込みサポート
  • より簡単なプロトコル

SSEに勝るWebソケットの利点：

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

SSEの理想的なユースケース：

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

SSE問題：

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

Caniuse.comによると：

SSEのサポートを他の多くのブラウザに拡張するには、クライアント専用のポリフィルを使用できます。これはWebSocketの場合はあまりありません。いくつかのEventSourceポリフィル：

すべてのブラウザをサポートする必要がある場合は、 web-socket-js 、 SignalR 、または socket.io のようなライブラリを使用してください。 、SSE、フォーエバーフレーム、およびAJAXロングポーリング。これらはしばしばサーバー側への変更も必要とします。

SSEの詳細については、下記をご覧ください。

WebSocketの詳細については、以下を参照してください。

その他の違い

  • WebSocketは任意のバイナリデータをサポートし、SSEはUTF-8のみを使用します
97
Drew Noakes

Opera、Chrome、SafariはSSE、Chrome、SafariはSharedWorker Firefox内でSSEをサポートしていますFirefoxはXMLHttpRequest readyStateインタラクティブをサポートしているので、Firefox用のEventSource polyfilを作成できます。

15
Yaffle

WebソケットVS SSE

Webソケット - 単一のTCP接続で全二重通信チャネルを提供するプロトコルです。例えば、サーバとブラウザ間の双方向通信プロトコルはより複雑なので、サーバとブラウザはsocket.ioであるウェブソケットのライブラリに頼らなければなりません。

Example - Online chat application.

SSE（Server-Sent Event） - /サーバ送信イベントの場合、サーバからブラウザへの通信のみが行われ、ブラウザからサーバにデータを送信することはできません。この種の通信は主に、更新されたデータを表示することだけが必要な場合に使用され、データが更新されるたびにサーバーがメッセージを送信します。たとえば、サーバーからブラウザへの一方向の通信です。このプロトコルはそれほど複雑ではないので、外部ライブラリに頼る必要はありません。JAVASCRIPT自体がサーバーから送信されたメッセージを受け取るためのEventSourceインターフェースを提供します。

Example - Online stock quotes or cricket score website.
6
Gaurav Tiwari

注意すべき点が1つあります。
ウェブソケットと企業のファイアウォールに問題がありました。 （HTTPSを使用すると役立ちますが、常にそうとは限りません。）

https://github.com/LearnBoost/socket.io/wiki/Socket.IO-and-firewall-softwarehttps://github.com/sockjs/sockjs-client/issues）を参照してください。/94

I 仮定 Server-Sent Eventsに関する問題はそれほど多くありません。しかし、私は知りません。

とは言っても、WebSocketは非常に楽しいものです。 （Socket.IO経由で）WebSocketを使用する小さなWebゲームがあります（ http://minibman.com ）

3
Drew LeSueur

ここ はWebソケットとサーバー送信イベントの違いについての話です。 Java EE 7以降、 WebSocket APIはすでに仕様の一部であり、サーバー送信イベントはエンタープライズ版の next バージョンでリリースされる予定です。

1
Patrick Leitermann