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 を使用する利点

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

効率

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

シンプルさ

SSE は、理解しやすく、実装しやすいシンプルなプロトコルです。特別なライブラリやフレームワークは必要なく、JavaScript や HTTP などの標準的な Web テクノロジーを使用して実装できます。

信頼性

SSE は、ネットワークが中断された場合に自動再接続を提供する信頼性の高いプロトコルです。これにより、接続が一時的に失われた場合でも、クライアントは更新を受信し続けることが保証されます。

結論

サーバー送信イベント (SSE) は、HTTP 接続を介してサーバーからクライアントにリアルタイムの更新を送信する簡単かつ効率的な方法です。これは HTML5 仕様の一部であり、最新のすべての Web ブラウザーでサポートされています。 SSE は単方向データ フローを使用し、サーバーはクライアントにメッセージを送信しますが、クライアントはサーバーにメッセージを送り返すことはできません。これにより、サーバーにイベントを常にポーリングする必要がなくなり、パフォーマンスが向上するだけでなく、複雑さも軽減されます。

これが役に立ったと思われた場合は、 ニュースレターの購読をご検討ください ウェブ開発に関するさらに役立つ記事やツールをご覧ください。読んでいただきありがとうございます!