SSE(Server-Sent Events)

デフォルトでは、HTTPはデータのインポート時に要求応答を中心としています.
サーバから変更データを取得する既存の方法は?

チャネル:クライアントはサーバにデータを繰り返し要求します.

Long Pooling:プールのバリエーション.サーバは、新しいデータが使用可能になるまで応答を保持します.

Websocket:クライアントとサーバの間に双方向の低遅延通信チャネルを作成します.HTTP接続を使用して、Websocketプロトコルを使用できる独立TCP接続にアップグレードします.

SSEは、サーバ上のデータをリアルタイムで持続的に拡張できる代替案です.

動作原理

従来のHTTPは、TCPに基づいて一度データの送受信を行い、その後接続を終了するが、接続を保持してデータの送信を継続する場合もある.

は、大量のデータを送信するファイル転送などが必要である.

サーバは、最初の接続時にデータを交換し、接続状態を維持したままデータを一方向に転送します.

サーバが最初のリクエストに応答する場合は、次のタイトルを送信する必要があります.

Content-Type: text/event-stream		// text 형태의 event-stream을 전송할 것임.
Cache-Control: no-cache				// 새로운 데이터를 받기 위함이므로 캐시 필요 없음.
Connection: keep-alive				// connection을 계속 유지해야 함.

keep-alive

HTTP/1.1からサポートを開始し、Handsharkをスキップし、接続されたTCP接続を再使用します.
接続されたSocketでは、I/Oアクセスの最後の終了から定義された期間までアクセスがない場合でも、セッションは保持されます.

で定義された時間内にアクセスした場合、接続状態は維持されます.

keep-aliveを静的リソースのみで構成されたWebサーバに使用すると、パフォーマンスは約50%向上します.

Websocket vs SSE

Websocket Server-SEnd Events通信方向双方向サーバ->クライアント一方向リアルタイム性完全リアルタイム比較リアルタイムデータ形態バイナリ、UTF-8 UTF-8自動再接続X一定時間ごとに最大再試行可能(Default 3秒)最大同時接続数サーバ設定異なるブラウザ6個または100個のバッテリ消費量小プロトコルWebsocket HTTP FirewallフレンドリーXO

つうしんほうこう

Websocketは双方向通信が可能であり、SSEは一方向通信しかできないため、双方向通信が必要な場合はWebsocketを使用する必要がある.

リアルタイム性

Websocketはより正確なリアルタイム性をサポートするため、リアルタイム性が非常に重要なゲームなどのアプリケーションではWebsocketを使用することが望ましい.

最大同時接続数

HTTP/2まで:ブラウザあたり最大6個まで許可する.

ということは、6つ以上のタブを開けば作動しない可能性があるということです.

HTTP/2以降:サーバと協議可能.(Default 100)

バッテリーとデータの使用状況

Websocketは握手を続けますが、SSEは一度開いてから待ち続けるだけなので、Websocketの負荷はもっと大きいです.

プロトコル

WebsocketはHTTP上で動作しないため、HTTPの多くの利点を得ることができない.

HTTP圧縮はサポートされていません.

HTTP/2は多重化をサポートしていません.

同じホストの複数の要求／応答は、同じTCP接続を共有する.

Websocketをサポートしていないエージェントに問題が発生する可能性があります.

Cross-Site Websocket Hijackingから保護されていません.

Originヘッダを手動でチェックし、許可されていないドメインが接続を切断している必要があります.

一方,SSEはHTTP伝送により特別なプロトコルやサーバ実装を必要としない.

ブラウザとReactネイティブのサポート状況

WebsocketはIE 10から提供され、世界中の98.16%のユーザーが使用できるようになった.
SSEはIEにpolyfillsをサポートすることを要求し、世界の97%のユーザーがそれを使用することができる.
React Nativeにも関連ライブラリが存在します.

https://www.npmjs.com/package/react-native-sse

参考資料

https://www.html5rocks.com/en/tutorials/eventsource/basics/

https://boxfoxs.tistory.com/403

https://subscription.packtpub.com/book/web_development/9781782166320/6/ch06lvl1sec43/listening-for-server-sent-events

https://surviveasdev.tistory.com/entry/%EC%9B%B9%EC%86%8C%EC%BC%93-%EA%B3%BC-SSEServer-Sent-Event-%EC%B0%A8%EC%9D%B4%EC%A0%90-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B3%A0-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0

https://goodgid.github.io/HTTP-Keep-Alive/

https://developer.mozilla.org/ko/docs/Web/API/Server-sent_events/Using_server-sent_events

https://germano.dev/sse-websockets/