HTML5サーバーセントイベント（SSE）でリアルタイムデータを受信します。

サーバーセントイベント（SSE）は、HTML5が提供する軽量ソリューションで、リアルタイムの更新をブラウザにプッシュします。株式市場、通知、その他のシナリオに適した長いHTTP接続を介した一方向通信を実現します。それを使用するとき、eventsourceインスタンスを作成し、メッセージを聞きます：const eventsource = new Eventsource（ '/stream'）; eventsource.onmessage = function（event）{console.log（ '受信メッセージ：'、event.data）; };サーバーは、コンテンツタイプをテキスト/イベントストリームに設定し、接続を開いたままにし、データの出力：コンテンツ\ n \ nを形式で出力する必要があります。一般的な考慮事項は次のとおりです。1。クロスドメインの問題を解決するようにCORを構成します。 2。自動再接続を達成するための再試行時間を制御します。 3.イベントの使用：カスタムイベントタイプを定義します。 4.リソースの漏れを防ぐために、接続タイムアウトを管理します。 WebSocketと比較して、SSEはよりシンプルで使いやすく、HTTPプロトコルをサポートしてファイアウォールに浸透しますが、単方向の通信のみであり、互換性がわずかに低いです。頻繁に相互作用することなく、リアルタイムのプッシュシナリオに適しています。

Web開発では、サーバーからブラウザにリアルタイムの更新をプッシュする必要がある場合、HTML5は軽量ソリューションであるサーバーセントイベント（SSE）を提供します。 WebSocketと比較して、実装がよりシンプルで簡単であり、特にサーバーのみがクライアントに通信する必要があるシナリオに適しています。

サーバーセントイベントとは何ですか？

サーバーセントイベントはHTML5の一部であり、サーバーがHTTP Long接続を介してデータをブラウザにプッシュできるようにします。従来のポーリング方法とは異なり、SSEは接続を確立した後は開いたままになり、サーバーは在庫の見積もり、リアルタイム通知、チャットメッセージなど、いつでも新しいデータを送信できます。

その基本的な使用法は、 EventSourceインスタンスを作成し、サーバー側のURLを指すことです。

 const eventsource = new Eventsource（ '/stream'）;
eventsource.onmessage = function（event）{
    console.log（ '受信メッセージ：'、event.data）;
};

サーバーが引き続きデータを送信している限り、クライアントはそれを受信し続けることができます。

サーバー側にSSEサポートを設定する方法は？

バックエンド言語が異なりますが、実装方法は異なりますが、コアポイントは同じです。接続を開いたままにして、SSE形式でコンテンツを出力します。

node.js Expressを例として取ります：

 app.get（ '/stream'、（req、res）=> {
    res.setheader（ 'content-type'、 'text/event-stream'）;
    Res.Setheader（ 'Cache-Control'、 'No-Cache'）;

    // SEMSENT DATA datasetinterval（（）=> {
        res.write（ `data：$ {new date（）} \ n \ n`）;
    }、1000）;
}）;

キーポイント：

• 正しい応答ヘッダー、特にtext/event-streamを設定します
• 応答が早すぎないで、接続を開いたままにしないでください
• データ形式はdata: 内容\n\n 、および2つのニューラインはメッセージの終了を示しています

Python（Flask）、PHP、またはJava Spring Bootなどの他の言語も同様に実装できます。

よくある質問やメモ

1。クロスドメインの問題 フロントエンドとバックエンドが同じEventSource名の下にない場合、CORSを設定する必要があります。

 Access-Control-Allow-Origin： *

または、特定のドメイン名を指定します。

2。自動再接続メカニズム 接続が中断されると、ブラウザは自動的に再接続しようとし、デフォルトの待機時間は3秒です。サーバー側のこの間隔を制御できます。

再試行：5000

3。カスタムイベントタイプ デフォルトのonmessageに加えて、他のイベント名を定義することもできます。

イベント：更新
データ：{"Type"： "News"、 "Content"： "新しいニュースが来ている"}

フロントエンドモニタリング：

 eventsource.addeventlistener（ 'update'、function（event）{
    console.log（ 'update receece：'、event.data）;
}）;

4。接続タイムアウトとリソースリリース 接続を無期限に吊るさないように注意してください。サーバーには、クライアントが切断され、メモリの漏れを避けるためにリソースを時間内にリリースするかどうかを検出するメカニズムが必要です。

Websocketの代わりにSSEをいつ使用する必要がありますか？

WebSocketはより強力であり、双方向通信をサポートしますが、複雑さも高くなっています。クライアントに情報をプッシュするためにサーバーのみが必要であり、頻繁なインタラクションを必要としない場合、SSEはより良い選択です。

利点は次のとおりです。

• 開発プロセスを簡素化し、フロントエンドとバックエンドの両方を簡単に実装できます
• 自動再接続をサポートします
• 標準のHTTPプロトコルを使用して、ファイアウォールに浸透しやすくすることができます

短所も明らかです。

• サーバーからクライアントへの片道通信のみがサポートされています
• ブラウザの互換性はわずかに貧弱です（つまり、EDGEの古いバージョンと古いバージョンはサポートされていません）

基本的にそれだけです。 SSEは複雑ではありませんが、実際の展開では、接続管理、エラー処理、パフォーマンスの最適化に注意を払う必要があります。シンプルなリアルタイム通知システムを作成したい場合、SSEは軽量で実用的な選択です。

以上がHTML5サーバーセントイベント（SSE）でリアルタイムデータを受信します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。