サーバー送信イベント (SSE) の仕組み-jsチュートリアル-php.cn

How Server-Sent Events (SSE) Work

SSE (Server Sent Events) は Web 開発の世界ではあまり使用されていません。この記事では、SSE とは何か、SSE がどのように機能し、どのような利点があるのかについて詳しく説明します。あなたのアプリケーション。

SSEとは何ですか?

SSE は、HTTP 接続を介してサーバーからクライアントにリアルタイムの更新を送信するためのシンプルかつ効率的な方法です。これは HTML5 仕様の一部であり、最新のすべての Web ブラウザーでサポートされています。 SSE は単方向のデータフローに基づいており、サーバーはクライアントにメッセージを送信しますが、クライアントはサーバーにメッセージを送り返すことはできません。

SSE は、「サーバー送信イベント」として知られるテキストベースの形式を使用して、クライアントにデータを送信します。データは一連のイベントとして送信され、各イベントにはメッセージとオプションのイベントタイプが含まれます。イベントタイプは、さまざまなタイプのメッセージを区別するために使用され、クライアントがメッセージを異なる方法で処理できるようにします。

SSEはどのように機能しますか?

SSE プロトコルは、サーバーとクライアントの間に永続的な HTTP 接続を確立することで機能します。この接続は、クライアントがサーバーから更新を受け取りたい限り開いたままになります。サーバーに送信する新しいデータがある場合、特別な MIME タイプ「text/event-stream」を使用して HTTP 応答を送信します。

応答には一連のイベントが含まれており、各イベントは改行文字 (「n」) で区切られています。各イベントの形式は次のとおりです:

event: [event type]\n
data: [message]\n\n

ログイン後にコピー

「イベント」フィールドはオプションであり、イベントの名前を指定するために使用されます。「データ」フィールドには、送信される実際のメッセージが含まれます。各イベントの末尾にある 2 つの改行文字は、イベントの終了を示すために使用されます。

簡単な SSE 応答の例を次に示します。

HTTP/1.1 200 OK
Content-Type: text/event-stream

event: message
data: Hello, world!

event: message
data: This is a test message.

event: customEvent
data: {"foo": "bar", "baz": 123}

ログイン後にコピー

この例では、3 つのイベントをクライアントに送信します。最初の 2 つのイベントはイベントタイプ「メッセージ」を持ち、単純なテキストメッセージが含まれています。 3 番目のイベントのイベントタイプは「customEvent」で、メッセージとして JSON オブジェクトが含まれています。

クライアントは SSE 応答を受信すると、そのデータを使用してユーザーインターフェイスを更新します。これは、たとえば JavaScript を使用して DOM を操作することで実行できます。

SSEの導入

アプリケーションへの SSE の実装は比較的簡単です。以下は、Node.js と Express フレームワークを使用して SSE を実装する方法の例です:

const express = require('express');
const app = express();

// Set up SSE endpoint
app.get('/events', (req, res) => {
  // Set headers
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  // Send initial event
  res.write('data: Connected\n\n');
  // Set interval to send periodic events
  const intervalId = setInterval(() => {
    res.write('data: Hello, world!\n\n');
  }, 1000);
  // Clean up on connection close
  req.on('close', () => {
    clearInterval(intervalId);
  });
});

// Start server
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

ログイン後にコピー

この例では、「/events」に SSE エンドポイントを設定しています。 SSE に必要なヘッダーを設定し、接続が確立されたことを確認するためにクライアントに初期イベントを送信します。

次に、定期的なイベントをクライアントに毎秒送信する間隔を設定します。最後に、クライアントによって接続が閉じられたときの間隔をクリーンアップします。

クライアント側では、次の JavaScript コードを使用して SSE イベントをリッスンできます。

const source = new EventSource('/events');

source.addEventListener('message', (event) => {
  console.log(event.data);
});
source.addEventListener('error', (event) => {
  console.error('Error:', event);
});

ログイン後にコピー

この例では、新しい EventSource オブジェクトを作成し、SSE エンドポイントの URL を渡しています。次に、「メッセージ」イベントをリッスンし、データをコンソールに記録します。接続の問題が発生した場合に備えて、「エラー」イベントもリッスンしています。

フロントエンドの EventSource パスは GET リクエストでのみ使用できることに注意してください。POST やその他の HTTP メソッドを使用したい場合は、応答データを自分で解析する必要があります。

ネイティブの Node.js 実装が必要な場合は、ここに実装します

SSE の使用例

SSE は、リアルタイム更新を必要とする幅広いアプリケーションで使用できます。以下にいくつかの例を示します:

ソーシャルメディアプラットフォーム: SSE を使用すると、新しいメッセージ、コメント、いいね! の通知など、ソーシャルメディアプラットフォームのリアルタイム更新を提供できます。
金融アプリケーション: SSE を使用して、株価、為替レート、ニュースなどの金融アプリケーションのリアルタイム更新を提供できます。
オンラインゲーム: SSE を使用すると、ゲームイベント、スコア、ランキングの通知など、オンラインゲームアプリケーションのリアルタイム更新を提供できます。

SSE を使用する利点

ポーリングや WebSocket などの他のリアルタイム通信方法に比べて、SSE を使用すると、いくつかの利点があります。

効率

SSE は永続的な HTTP 接続を使用します。これは、接続の確立と維持にかかるオーバーヘッドが他の方法よりもはるかに低いことを意味します。これにより、SSE の効率が向上し、リソースの消費量が減ります。これは、多数のクライアントを扱う場合に特に重要です。

Kesederhanaan

SSE ialah protokol ringkas yang mudah difahami dan dilaksanakan. Ia tidak memerlukan sebarang perpustakaan atau rangka kerja khas dan boleh dilaksanakan menggunakan teknologi web standard seperti JavaScript dan HTTP.

Kebolehpercayaan

SSE ialah protokol yang boleh dipercayai yang menyediakan penyambungan semula automatik sekiranya berlaku gangguan rangkaian. Ini memastikan pelanggan akan terus menerima kemas kini walaupun sambungan terputus buat sementara waktu.

Kesimpulan

Peristiwa Dihantar Pelayan (SSE) ialah cara yang mudah dan cekap untuk menghantar kemas kini masa nyata daripada pelayan kepada klien melalui sambungan HTTP. Ia adalah sebahagian daripada spesifikasi HTML5 dan disokong oleh semua pelayar web moden. SSE menggunakan aliran data satu arah, di mana pelayan menghantar mesej kepada klien, tetapi klien tidak boleh menghantar mesej kembali ke pelayan. Ini menjimatkan anda daripada terus mengundi pelayan untuk acara, yang bukan sahaja meningkatkan prestasi tetapi juga mengurangkan kerumitan.

Jika anda mendapati ini membantu, sila pertimbangkan melanggan surat berita saya untuk lebih banyak artikel dan alatan berguna tentang pembangunan web. Terima kasih kerana membaca!

以上がサーバー送信イベント (SSE) の仕組みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。