JavaScript と Bun を使用した WebSocket ブロードキャスト-jsチュートリアル-php.cn

WebSocket broadcasting with JavaScript and Bun

ブロードキャストは WebSocket の最も強力な機能の 1 つであり、サーバーが接続されている複数のクライアントにメッセージを同時に送信できるようになります。単一のクライアントとサーバー間でメッセージが交換されるポイントツーポイント通信とは異なり、ブロードキャストにより、単一のメッセージがクライアントのグループに到達できます。このため、リアルタイム、共同作業、対話型のアプリケーションには不可欠なものとなります。

なぜブロードキャストが重要なのか

ブロードキャストは、複数のユーザーが同期を維持したり、同じ更新についてリアルタイムで通知したりする必要があるシナリオには不可欠です。例:

グループチャットアプリケーション: チャットルームの参加者全員にメッセージを送信します。
共同ツール: 共有ドキュメントやコンテンツの変更についてすべてのユーザーを更新します。
ライブ通知: ニュース速報、株価更新、スポーツのスコアなどを複数の加入者にブロードキャストします。
オンラインゲーム: 複数のプレーヤー間でゲームの状態やアクションを同期します。

そのような場合、ブロードキャストにより、クライアントごとに個別のサーバー呼び出しを必要とせずに、接続されているすべてのユーザーの同期が確保されます。ブロードキャストしないと、非効率的で遅延が発生しやすくなります。

放送に対する 2 つのアプローチ

ブロードキャストを実装する場合、考慮すべき一般的な戦略が 2 つあります。

すべてのクライアント (送信者を含む) にブロードキャストします
送信者を除くすべてのクライアントにブロードキャストします

すべてのクライアント (送信者を含む) にブロードキャストします。

このアプローチでは、メッセージを送信元のチャネルを含む、特定のチャネルに接続されているすべてのクライアントにメッセージが送信されます。

このアプローチは、グループチャットでメッセージの確認や更新を表示するなど、送信者を含むすべてのクライアントがブロードキャストを受信する必要がある状況に適しています。

送信者を除くすべてのクライアントにブロードキャストする

この場合、メッセージは送信者を除くすべてのクライアントにブロードキャストされます。

このアプローチは、アクションを他のプレイヤーと共有する必要があるが、アクションを実行しているプレイヤーにエコーバックされないマルチプレイヤーゲームなど、送信者がブロードキャストで自分のメッセージを見る必要がないシナリオに最適です。 .

どちらの方法にも特定の使用例があり、Bun などのツールを使用して簡単に実装できるため、開発者は最小限のコードで効率的にブロードキャストを処理できます。

この記事では、Bun を使用して WebSocket ブロードキャストを設定する方法を詳しく説明し、堅牢なリアルタイムアプリケーションの構築に役立つ両方のブロードキャストアプローチを示します。

WebSocket でブロードキャストするためのコード

このシリーズの最初の記事「JavaScript と Bun を使用した WebSocket」では、クライアントから送信されたメッセージに応答する WebSocket サーバーの構造について説明しました。

この記事では、複数のクライアントにメッセージをブロードキャストできるメカニズムであるチャンネルサブスクリプションについて説明します。

まず完全なコードを提示し、次にそれを分解して関連するすべての部分を詳しく調べます。

broadcast.ts ファイルを作成します:

console.log("? Hello via Bun! ?");
const server = Bun.serve({
  port: 8080, // defaults to $BUN_PORT, $PORT, $NODE_PORT otherwise 3000
  fetch(req, server) {
    const url = new URL(req.url);
    if (url.pathname === "/") return new Response(Bun.file("./index.html"));
    if (url.pathname === "/surprise") return new Response("?");

    if (url.pathname === "/chat") {
      if (server.upgrade(req)) {
        return; // do not return a Response
      }
      return new Response("Upgrade failed", { status: 400 });
    }

    return new Response("404!");
  },
  websocket: {
    message(ws, message) {
      console.log("✉️ A new Websocket Message is received: " + message);
      ws.send("✉️ I received a message from you:  " + message);
      ws.publish(
        "the-group-chat",
        `? Message from ${ws.remoteAddress}: ${message}`,
      );
    }, // a message is received
    open(ws) {
      console.log("? A new Websocket Connection");
      ws.subscribe("the-group-chat");
      ws.send("? Welcome baby");
      ws.publish("the-group-chat", "? A new friend is joining the Party");
    }, // a socket is opened
    close(ws, code, message) {
      console.log("⏹️ A Websocket Connection is CLOSED");
      const msg = `A Friend has left the chat`;
      ws.unsubscribe("the-group-chat");
      ws.publish("the-group-chat", msg);
    }, // a socket is closed
    drain(ws) {
      console.log("DRAIN EVENT");
    }, // the socket is ready to receive more data
  },
});
console.log(`? Server (HTTP and WebSocket) is launched ${server.url.origin}`);

setInterval(() => {
  const msg = "Hello from the Server, this is a periodic message!";
  server.publish("the-group-chat", msg);
  console.log(`Message sent to "the-group-chat": ${msg}`);
}, 5000); // 5000 ms = 5 seconds

ログイン後にコピー

次の方法で実行できます:

bun run broadcast.ts

ログイン後にコピー

このコードでは ブロードキャスト を導入し、サーバーが特定のチャネルでサブスクライブしているすべてのクライアントにメッセージを送信できるようにします。また、すべてのクライアント (送信者を含む) にブロードキャストするか、送信者を除外するかも区別されます。詳細な説明は次のとおりです:

サーバーの初期化

const server = Bun.serve({
  port: 8080,
  ...
});

ログイン後にコピー

初期化は前回の記事と同じです。
サーバーはポート 8080 でリッスンし、前の例と同様に、HTTP リクエストを処理し、/chat の WebSocket 接続をアップグレードします。

WebSocket でのブロードキャスト

ブロードキャストにより、グループチャットなど、特定のチャネルに登録しているすべてのクライアントにメッセージを送信できます。
これをコードで実現する方法は次のとおりです。

チャンネルの購読 (オープンイベント内)

open(ws) {
  console.log("? A new Websocket Connection");
  ws.subscribe("the-group-chat");
  ws.send("? Welcome baby");
  ws.publish("the-group-chat", "? A new friend is joining the Party");
}

ログイン後にコピー

ws.subscribe(channel): クライアントをチャネル the-group-chat にサブスクライブします。このチャネル内のすべてのクライアントは、このチャネルにブロードキャストされたメッセージを受信できるようになります。
ws.send(...): クライアントは個別に歓迎されます。
ws.publish(channel, message): チャネル内のすべてのクライアントにメッセージをブロードキャストします。

ブロードキャストメッセージ (メッセージイベントでのクライアントからのメッセージの返信/ブロードキャスト)

message(ws, message) {
  console.log("✉️ A new Websocket Message is received: " + message);
  ws.send("✉️ I received a message from you:  " + message);
  ws.publish("the-group-chat", `? Message from ${ws.remoteAddress}: ${message}`);
}

ログイン後にコピー

クライアントからメッセージを受信したとき:

送信者は ws.send(...) 経由で確認応答を受け取ります。
メッセージは、ws.publish(...) を使用して「グループチャット」内のすべてのクライアント (送信者を除く) にブロードキャストされます。

注: ws オブジェクトの公開メソッドを呼び出しているため、送信者はブロードキャストメッセージを受信しません。サーバーオブジェクトを使用して送信者を含める必要があります。

切断時のサブスクライブ解除とブロードキャスト (クローズイベント時)

close(ws, code, message) {
  console.log("⏹️ A Websocket Connection is CLOSED");
  const msg = `A Friend has left the chat`;
  ws.unsubscribe("the-group-chat");
  ws.publish("the-group-chat", msg);
}

ログイン後にコピー

クライアントが切断されたとき:

ws.unsubscribe(channel): チャネルサブスクリプションからクライアントを削除します。
チャネル内の残りのすべてのクライアントにメッセージがブロードキャストされ、切断が通知されます。

すべてのクライアントへの定期的なサーバーメッセージ

console.log("? Hello via Bun! ?");
const server = Bun.serve({
  port: 8080, // defaults to $BUN_PORT, $PORT, $NODE_PORT otherwise 3000
  fetch(req, server) {
    const url = new URL(req.url);
    if (url.pathname === "/") return new Response(Bun.file("./index.html"));
    if (url.pathname === "/surprise") return new Response("?");

    if (url.pathname === "/chat") {
      if (server.upgrade(req)) {
        return; // do not return a Response
      }
      return new Response("Upgrade failed", { status: 400 });
    }

    return new Response("404!");
  },
  websocket: {
    message(ws, message) {
      console.log("✉️ A new Websocket Message is received: " + message);
      ws.send("✉️ I received a message from you:  " + message);
      ws.publish(
        "the-group-chat",
        `? Message from ${ws.remoteAddress}: ${message}`,
      );
    }, // a message is received
    open(ws) {
      console.log("? A new Websocket Connection");
      ws.subscribe("the-group-chat");
      ws.send("? Welcome baby");
      ws.publish("the-group-chat", "? A new friend is joining the Party");
    }, // a socket is opened
    close(ws, code, message) {
      console.log("⏹️ A Websocket Connection is CLOSED");
      const msg = `A Friend has left the chat`;
      ws.unsubscribe("the-group-chat");
      ws.publish("the-group-chat", msg);
    }, // a socket is closed
    drain(ws) {
      console.log("DRAIN EVENT");
    }, // the socket is ready to receive more data
  },
});
console.log(`? Server (HTTP and WebSocket) is launched ${server.url.origin}`);

setInterval(() => {
  const msg = "Hello from the Server, this is a periodic message!";
  server.publish("the-group-chat", msg);
  console.log(`Message sent to "the-group-chat": ${msg}`);
}, 5000); // 5000 ms = 5 seconds

ログイン後にコピー

サーバーは、server.publish(...) を使用して、5 秒ごとに「the-group-chat」チャネル内のすべてのクライアントにメッセージをブロードキャストします。ここではサーバーオブジェクトを使用しています。

主な方法

ws.subscribe(channel): 現在の WebSocket クライアントをグループ通信用のチャネルにサブスクライブします。
ws.publish(channel, message): 指定されたチャネル内のすべてのクライアント (送信者を除く) にメッセージをブロードキャストします。
server.publish(channel, message): ws.publish に似ていますが、購読しているすべてのクライアント (送信者を含む) にブロードキャストするためにサーバーレベルで使用されます。
ws.unsubscribe(channel): 現在のクライアントをチャネルから削除します。

フロー例

クライアントは /chat に接続し、「the-group-chat」に登録します。
クライアントはサーバーにメッセージを送信します。
- メッセージは送信者にエコーバックされます。
- サーバーは、チャネル内の他のすべてのクライアントにメッセージをブロードキャストします。
クライアントが切断されると:
- チャンネル登録が解除されています。
- サーバーは残りのクライアントに切断について通知します。
サーバーは 5 秒ごとに、すべてのクライアントに定期的なブロードキャストメッセージを送信します。

結論

WebSocket は、リアルタイムのインタラクティブな Web アプリケーションを構築するための強力なツールです。従来の HTTP 通信とは異なり、WebSocket はサーバーと接続されたクライアント間のインスタントメッセージ交換を可能にする永続的な双方向チャネルを提供します。そのため、ライブチャット、共同作業ツール、ゲーム、または低遅延通信が重要なアプリケーションなどのシナリオに最適です。

この記事 (およびシリーズ) では、Bun を使用した WebSocket サーバーのセットアップ、クライアント接続の処理、サブスクライブされたクライアントへのメッセージのブロードキャストの基本について説明しました。また、クライアントがチャネルに参加し、メッセージを送信し、他のクライアントとサーバー自体の両方から更新を受信できる、単純なグループチャットシステムを実装する方法も示しました。

Bun に組み込まれた WebSocket サポートと、サブスクライブ、パブリッシュ、サブスクライブ解除などの機能を活用することで、リアルタイム通信の管理が非常に簡単になります。定期的な更新の送信、すべてのクライアントへのブロードキャスト、または特定のチャネルの管理のいずれを行う場合でも、WebSocket はそのような要件を処理するための効率的かつスケーラブルな方法を提供します。

以上がJavaScript と Bun を使用した WebSocket ブロードキャストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。