SSE（サーバーセントイベント）でリアルタイムアプリケーションを作成する-jsチュートリアル-php.cn

SSE（サーバーセントイベント）でリアルタイムアプリケーションを作成する

DDD

リリース： 2025-01-28 08:31:12

オリジナル

176 人が閲覧しました

Criando aplicações em tempo real com SSE (Server-Sent Events) 幸いなことに、時代は変わります。 JavaScriptを使用して、Eventsourceライブラリを使用してSSE（サーバー送信イベント）接続を確立できます。この記事では、SSEの概念について説明し、簡単なチュートリアルを提供します。

ライブ接続

従来のHTTPリクエスト（クライアントはリクエストを発行し、サーバーが応答を返します）とは異なり、SSE接続は常に開かれており、サーバーからクライアントへの1つの通信を実現します。 2回の通信を許可するWebSocketとは異なり、SSEはクライアントのみにデータを送信し、クライアントは接続中にリアルタイムを受信します。

接続が確立された後、データはイベントの形でJavaScriptクライアントに届きます。サーバーは、必要に応じて更新されたデータを含むイベントを送信する責任があります。

Criando aplicações em tempo real com SSE (Server-Sent Events)

接続が閉じられない限り、クライアントはサーバーから送信された新しいデータイベントを待ち続けます。これにより、インストルメントパネルまたはチャットの継続的に更新する必要がある通知を構築する理想的なテクノロジーになります。

管理システムを接続します Criando aplicações em tempo real com SSE (Server-Sent Events) 上記の概念を練習するために、node.js（back -end）アプリケーションを作成して、JavaScriptクライアント（フロントエンド）にSSE接続エンドポイントを提供します。

アプリケーションは、userIDを入力してSSE接続を確立する必要があるシステムです。その後、サーバーは5秒ごとにイベントを送信し、ユーザーリストのリストを返します。ユーザーが接続をオフにすると、接続されたユーザーリストから自動的に削除されます。

始めましょう！

index.jsファイルを作成し、バックエンドロジックを集中します。さらに、index.htmlとscript.jsファイルを保存するA/publicフォルダーを作成して、ページを管理します。構造は次のとおりです。

index.jsでは、エクスプレスライブラリをインポートします（HTTPエンドポイントの作成に使用）：

/public/index.htmlの

<code class="language-bash">npm init -y
npm i express</code>

ログイン後にコピー

、基本的なHTMLを作成してタイトルを表示し、サーバーが実行されるかどうかをテストします。

npmを実行する端末で開始するには、ページをブラウザに表示する必要があります。

<code>/public
  index.html
  script.js
index.js
package.json</code>

ログイン後にコピー

バックエンドに戻り、connection.jsファイルを作成して、ユーザーとサーバー間の接続を管理します。

<code class="language-javascript">import express from "express"
import fs from "fs"
import path from "path"

const app = express()
app.use(express.json())
app.use(express.static(path.join(path.resolve(path.dirname("")), "public")))

app.get("/", (_, res) => {
  res.writeHead(200, { "content-language": "text/html" })
  const streamIndexHtml = fs.createReadStream("index.html")
  streamIndexHtml.pipe(res)
})

const PORT = 3000
app.listen(PORT, () => console.log(`Server is running on ${PORT} port`))</code>

ログイン後にコピー

その中で、接続クラスをエクスポートし、ユーザー（登録された新しいユーザー）とremoverUserメソッド（マッピングからユーザーを削除）に接続されたユーザーマッピングを保存します：

<code class="language-bash">npm init -y
npm i express</code>

ログイン後にコピー

接続クラスは接続管理ロジックを分離したため、クライアントがSSE通信を開始できるように、サーバー（index.js）にエンドポイントを構成する必要があります。

<code>/public
  index.html
  script.js
index.js
package.json</code>

ログイン後にコピー

ここに3つのポイントがあります：

ヘッドでクライアントに応答する必要があります。これにより、クライアントはSSE通信を特定し、Eventsourceオブジェクトを作成して接続を確立できます。 Content-Type: text/event-stream
イベント監視シャットダウン接続を使用すると、切断されたユーザーが接続マッピングから削除できます。
req.on("close", () => {})バックエンドが完了しました！これで、フロントエンドに注意を払うことができます。

サーバーはSSE接続エンドポイントを提供しているため、クライアントはこのアドレスを要求して送信イベントを待つ必要があります。

index.htmlファイルでは、

を作成します

ユーザーがuseridを入力するテキストフィールド

2つのボタン：1つはSSE接続をオフにするために使用されます接続されているユーザーリストを表示している<ul>aラベル、このリストは、サーバーから送信されたイベントを更新します。

次に、JSコードをscript.jsに追加します：

<ul>

ブラウザ内の2つのタブページを開いて、実際の時間接続をテストしてユーザーの更新を観察します。

<code class="language-javascript">import express from "express"
import fs from "fs"
import path from "path"

const app = express()
app.use(express.json())
app.use(express.static(path.join(path.resolve(path.dirname("")), "public")))

app.get("/", (_, res) => {
  res.writeHead(200, { "content-language": "text/html" })
  const streamIndexHtml = fs.createReadStream("index.html")
  streamIndexHtml.pipe(res)
})

const PORT = 3000
app.listen(PORT, () => console.log(`Server is running on ${PORT} port`))</code>

ログイン後にコピー

<code class="language-html"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Server Sent Events Demo</title>
  <h1>Server Sent Events Demo (SSE)</h1>
</head>
<body>
</body>
</html></code>

ログイン後にコピー

これにより、単純なSSEリアルタイム接続システムが完了します。このテクノロジーは、サーバーがフィード、チャット、インストルメントパネルなど、クライアントに1つのウェイデータを送信し続けるのに非常に適しています。

整合性のために、 Criando aplicações em tempo real com SSE (Server-Sent Events) 関数のチェックを追加したり、