node.jsでサーバーセントイベントを使用する方法-jsチュートリアル-php.cn

How to Use Server-sent Events in Node.js

コアポイント

サーバー送信イベント（SSE）を使用すると、サーバーはいつでもブラウザにデータをプッシュでき、リアルタイムニュースレポート、天気予報、株価などの機能を有効にします。ブラウザは、接続を確立するための最初の要求を発行し、サーバーは接続を開いたままにしてテキストメッセージを送信します。

サーバーは、任意の数のSSEチャネルURLまたは単一のエンドポイントURLを提供できます。サーバーからのメッセージには、特定のタイプの情報を識別するための関連するイベントがある場合があります。また、接続が切断されたときに見逃されたメッセージを再送信するために、データラインの後にIDを送信することもできます。

ブラウザは、eventsourceオブジェクトの.close（）メソッドを使用してSSE通信を終了できます。サーバーは、res.End（）をトリガーするか、再試行の遅延を送信することにより接続を終了し、同じブラウザが再接続しようとしたときにHTTPステータス204を返すことができます。新しいEventSourceオブジェクトを作成することにより、ブラウザのみが接続を再確立できます。

この記事では、Server Send Events（SSE）を使用して、クライアントがHTTP接続を介してサーバーから自動更新を受信できるようにする方法について説明します。また、その使用を調査し、node.jsを使用してサーバーを使用してイベントを送信する方法の実用的なデモを示します。

サーバーの送信イベントの利点

サーバー送信イベントのクイックスタート
重要なヒント
高度なサーバー送信イベント
シングルおよび複数のSSEチャネル
- 単一のチャネルで異なるデータを送信します
- retry遅延を指定
- その他のイベントハンドラー
- SSE通信を終了します
結論

イベントを送信するサーバーの利点

Webは、リクエスト応答に基づいてHTTPメッセージに応答します。ブラウザはURL要求を発行し、サーバーはデータを返します。これにより、ブラウザは画像、CSS、JavaScriptなどをより多くのリクエストを行い、サーバーが応答する場合があります。サーバーはブラウザに積極的にメッセージを送信できないので、データが変更されたことをどのように示していますか？幸いなことに、サーバー送信イベント（SSE）を使用して、ライブニュースリリース、天気予報、株価などの機能を追加できます。

標準のWebテクノロジーを使用してリアルタイムのデータの更新を実現することは常に可能でした：

1990年代のWebは、フルページまたはフレーム/iframeを使用して更新されました。

2000年代のWebはAjaxを導入しました。これは、長いポーリングを使用してデータを要求し、新しい情報で対応するDOM要素を更新できます。

サーバー送信イベント（SSE）により、サーバーはいつでもブラウザにデータをプッシュできます。

本質的に、SSEは無制限のデータストリームです。インターセプトして読み取ることができる小片でダウンロードされた無限に大きなファイルをダウンロードすると考えてください。

SSEはもともと2006年に実装され、すべての主要なブラウザでこの標準をサポートしています。 WebSocketsとしてはあまり知られていないかもしれませんが、サーバーはイベントを簡単に送信し、標準のHTTPを使用し、一元配置通信をサポートし、自動再接続を提供します。このチュートリアルは、サードパーティモジュールのないNode.jsコードの例を提供しますが、SSEはPHPを含む他のサーバー側の言語で使用できます。

サーバーの送信イベントのクイックスタート

次のデモでは、少なくとも3秒ごとにランダムな間隔でランダムな間隔でランダム数を出力するnode.js Webサーバーを実装しています。

ここでnode.js SSEデモを見つけることができます。

このコードは、標準node.js HTTPおよびURLモジュールを使用してWebサーバーを作成し、URLを解析します。

サーバーは、 /ランダムパスに遭遇したときに着信URL要求をチェックし、反応します：

import http from "node:http";
import url from "node:url";

ログイン後にコピー

それは最初にSSE HTTPイベントストリームヘッダーで応答します：

const port = 8000;

http.createServer(async (req, res) => {

  // 获取 URI 路径
  const uri = url.parse(req.url).pathname;

  // 返回响应
  switch (uri) {
    case "/random":
      sseStart(res);
      sseRandom(res);
      break;
  }

}).listen(port);

console.log(`server running: http://localhost:${port}\n\n`);

ログイン後にコピー

別の関数は乱数を送信し、ランダムな間隔が通過した後にそれ自体を呼び出します：

// SSE 头
function sseStart(res) {
  res.writeHead(200, {
    Content-Type: "text/event-stream",
    Cache-Control: "no-cache",
    Connection: "keep-alive"
  });
}

ログイン後にコピー

コードをローカルに実行する場合、端末でCurlを使用して応答をテストできます。

// SSE 随机数
function sseRandom(res) {
  res.write("data: " + (Math.floor(Math.random() * 1000) + 1) + "\n\n");
  setTimeout(() => sseRandom(res), Math.random() * 3000);
}

ログイン後にコピー

ctrl

|を押します。

$> curl -H Accept:text/event-stream http://localhost:8000/random
data: 481

data: 127

data: 975

ログイン後にコピー

ブラウザのクライアントJavaScriptは、EventSourceオブジェクトコンストラクターを使用して /ランダムURIに接続します：

入力データは、メッセージイベントハンドラーをトリガーします。ここで、データ：文字列はイベントオブジェクトの.dataプロパティで使用可能です： 重要なヒント

fetch（）と同様に、ブラウザは標準のHTTPリクエストを発行するため、CSP、CORSを処理し、2番目の

パラメーターをEventSourceコンストラクターに渡してCookieを送信する必要がある場合があります。

// 客户端 JS
const source = new EventSource("/random");

ログイン後にコピー

サーバーは、接続された各ユーザーがデータを送信するために個別のRES応答オブジェクトを保持する必要があります。これは、次の呼び出しのために値を閉鎖に渡すことにより、上記のコードで達成されます。

source.addEventListener('message', e => {
  console.log('RECEIVED', e.data);
});

ログイン後にコピー

メッセージデータは、形式データの文字列のみになります：

nn（おそらくJSON）。キャリッジリターンを終了することが重要です。

サーバーは、res.End（）を使用していつでもSSE応答を終了できますが、...{ withCredentials: true }
Advanced Serverはイベントを送信します

SSEは上記よりも多くのコードを必要としませんが、次のセクションでは他のオプションについて説明します。

シングルおよび複数のSSEチャネル

サーバーは、任意の数のSSEチャネルURLを提供できます。たとえば、

/最新/ニュース
/最新/天気
/最新/stockprice

これは、単一ページにトピックが表示されている場合は実用的かもしれませんが、単一のページにニュース、天候、株価が表示されている場合はそうではありません。この場合、サーバーは各ユーザーの3つの接続を維持する必要があります。これにより、トラフィックが増加するとメモリの問題が発生する可能性があります。

別のオプションは、1つの通信チャネルにデータ型を送信する /最新 /最新などの単一のエンドポイントURLを提供することです。ブラウザは、 /最新の？type = news、weather、stockpriceなどのURLクエリ文字列に関心のあるトピックを示すことができます。これにより、サーバーは特定のメッセージに対するSSE応答を制限できます。

単一のチャネルで異なるデータを送信します

行の上に渡される関連event:を持つことができます。 data:

import http from "node:http";
import url from "node:url";

ログイン後にコピー

データ識別子を使用して

const port = 8000;

http.createServer(async (req, res) => {

  // 获取 URI 路径
  const uri = url.parse(req.url).pathname;

  // 返回响应
  switch (uri) {
    case "/random":
      sseStart(res);
      sseRandom(res);
      break;
  }

}).listen(port);

console.log(`server running: http://localhost:${port}\n\n`);

ログイン後にコピー

サーバーは、

：data:の後に送信することもできます。 id:

// SSE 头
function sseStart(res) {
  res.writeHead(200, {
    Content-Type: "text/event-stream",
    Cache-Control: "no-cache",
    Connection: "keep-alive"
  });
}

ログイン後にコピー

最新のIDは、クライアントのイベントオブジェクトの.lasteventidプロパティでも利用できます。

retry遅延を指定

// SSE 随机数
function sseRandom(res) {
  res.write("data: " + (Math.floor(Math.random() * 1000) + 1) + "\n\n");
  setTimeout(() => sseRandom(res), Math.random() * 3000);
}

ログイン後にコピー

応答を送信できます。たとえば、

retry:それを受信した後、ブラウザはSSE接続を放棄し、遅延時間が経過した後に再接続しようとします。

$> curl -H Accept:text/event-stream http://localhost:8000/random
data: 481

data: 127

data: 975

ログイン後にコピー

// 客户端 JS
const source = new EventSource("/random");

ログイン後にコピー

source.addEventListener('message', e => {
  console.log('RECEIVED', e.data);
});

ログイン後にコピー

ブラウザは、eventsourceオブジェクトの.close（）メソッドを使用してSSE通信を終了できます。たとえば、

トリガーres.End（）またはretry:遅延を送信してから
同じブラウザが再接続しようとしたときにHTTPステータス204を返します。

のみのブラウザのみが、新しいEventSourceオブジェクトを作成することで接続を再確立できます。

結論

サーバー側のイベントは、リアルタイムページの更新を実装する方法を提供します。これは、Fetch（）ベースのAJAXポーリングよりも簡単で実用的で軽量です。複雑さはサーバー側にあります。あなたがする必要があります：

すべてのユーザーのアクティブな接続をメモリに保ち、

以上がnode.jsでサーバーセントイベントを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。