使用 JavaScript 和 Bun 進行 WebSocket 廣播-js教程-PHP中文網

WebSocket broadcasting with JavaScript and Bun

廣播是 WebSocket 最強大的功能之一，它允許伺服器同時向多個連接的客戶端發送訊息。與在單一客戶端和伺服器之間交換訊息的點對點通訊不同，廣播使單一訊息能夠到達一組客戶端。這使得它對於即時、協作和互動式應用程式不可或缺。

為什麼廣播很重要

廣播對於多個使用者需要保持同步或即時了解相同更新的場景至關重要。例如：

群組聊天應用程式：向聊天室中的所有參與者發送訊息。
協作工具：向所有使用者更新共享文件或內容變更的資訊。
即時通知：向多個訂閱者廣播突發新聞、股票更新或體育比分。
線上遊戲：同步多個玩家的遊戲狀態或動作。

在這種情況下，廣播可確保所有連接的使用者保持同步，而無需為每個客戶端進行單獨的伺服器調用，否則效率低且容易出現延遲。

兩種廣播方式

實施廣播時，有兩種常見策略需要考慮：

向所有客戶端（包括發送者）廣播
向所有發送者以外的客戶端廣播

向所有客戶端（包括發送者）廣播

此方法將訊息傳送到連接到特定通道的所有客戶端，包括發起訊息的客戶端。

此方法適用於每個客戶端（包括發送者）都需要接收廣播的情況，例如在群組聊天中顯示訊息的確認或更新。

向除發送者之外的所有用戶端廣播

在這種情況下，訊息將廣播給除發送者之外的所有用戶端。

這種方法非常適合發送者不需要在廣播中看到自己的訊息的場景，例如多人遊戲，其中的操作需要與其他玩家共享，但不需要回顯給執行該操作的玩家.

這兩種方法都有特定的用例，並且可以使用 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(...) 廣播到「the-group-chat」中的所有用戶端（不包括寄件者）。

注意：發送者沒有收到廣播訊息，因為我們呼叫了 ws 物件的publish 方法。您應該使用伺服器物件來包含寄件者。

取消訂閱並在斷開連線時廣播（在關閉事件中）

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

登入後複製

每 5 秒，伺服器使用 server.publish(...) 向「the-group-chat」頻道中的所有用戶端廣播訊息。這裡我們使用伺服器對象。