使用 JavaScript 和 Bun 的 WebSocket

確保客戶端和伺服器之間高效、無縫的通訊是建立現代即時 Web 應用程式的關鍵。傳統的 HTTP 請求（如輪詢中使用的請求）是無狀態且單向的。客戶端向伺服器發出請求（例如，使用 fetch 或 axios），伺服器在連線關閉之前做出回應。如果客戶端需要新鮮數據，則必須定期重複發送新請求，從而造成不必要的延遲並增加客戶端和伺服器的負載。

例如，如果您正在建立即時聊天應用程式或股票價格追蹤器，則輪詢將要求客戶端每秒左右請求更新一次，即使沒有新資料可供取得。這就是 WebSockets 的閃光點。

---

WebSocket 方法

WebSockets 在客戶端和伺服器之間提供持久的雙向通訊通道。連接建立後，伺服器可以立即將更新推送到客戶端，而無需等待新的請求。這使得 WebSockets 非常適合需要即時更新的場景，例如：

• 在即時聊天應用程式中發送聊天訊息。
• 同時向多個使用者廣播通知或更新。
• 串流即時數據，例如股票價格、運動比分或遊戲狀態。

在客戶端使用 Vanilla JavaScript，在伺服器端使用 Bun 運行時，使得 WebSocket 的實作變得簡單且有效率。例如：

• 客戶端可以向伺服器發送訊息，伺服器可以立即將該訊息廣播給其他連接的客戶端。
• 與輪詢不同，持久連線確保不會產生重新建立連線的重複開銷。

在這種情況下，WebSocket 比傳統的輪詢方法提供更低的延遲、減少的伺服器負載以及更流暢的使用者體驗。

---

建置 WebSocket 項目

第 1 步：建立 Bun 項目

首先，確保 Bun 已安裝。然後新建一個Bun項目，新建一個空目錄，進入新目錄，透過bun init指令初始化項目：

mkdir websocket-demo
cd websocket-demo
bun init

bun init 指令將建立 package.json 檔案、「hello world」index.ts 檔案、.gitignore 檔案、用於打字稿配置的 tsconfig.json 檔案和 README.md 檔案。

現在，您可以開始建立 JavaScript 程式碼。我將向您展示整個腳本；然後我們將探索所有相關部分。您可以編輯index.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);
    }, // a message is received
    open(ws) {
      console.log("? A new Websocket Connection");
      ws.send("? Welcome baby");
    }, // a socket is opened
    close(ws, code, message) {
      console.log("⏹️ A Websocket Connection is CLOSED");
    }, // 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}`);

使用 Bun 記錄基本 WebSocket 伺服器的程式碼

以下是所提供程式碼的細分，解釋了每個部分及其功能。

---

伺服器初始化

mkdir websocket-demo
cd websocket-demo
bun init

Bun.serve 方法初始化一個能夠處理 HTTP 和 WebSocket 請求的伺服器。

• port: 8080：指定伺服器監聽的連接埠。預設為公共環境變量，如果未指定則預設為 3000。在這個例子中，連接埠被硬編碼為8080。如果你想提供更靈活的方式，你應該刪除連接埠線並允許Bun來管理連接埠。所以你可以透過export BUN_PORT=4321運行腳本；包子跑指數.ts

---

HTTP 請求處理

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);
    }, // a message is received
    open(ws) {
      console.log("? A new Websocket Connection");
      ws.send("? Welcome baby");
    }, // a socket is opened
    close(ws, code, message) {
      console.log("⏹️ A Websocket Connection is CLOSED");
    }, // 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}`);

• fetch(req, server)：處理傳入的 HTTP 請求。
• 根路徑/：提供index.html檔案。
• /surprise 路徑：回傳一個有趣的驚喜表情符號回應？ .
• /chat 路徑：嘗試將連線「升級」為 WebSocket 連線。如果升級失敗，則會傳回錯誤 400 回應。

---

WebSocket 處理程序

websocket 鍵定義事件處理程序來管理 WebSocket 連線。

？連接開啟（開啟）

const server = Bun.serve({
  port: 8080, // defaults to $BUN_PORT, $PORT, $NODE_PORT otherwise 3000
  ...
});

客戶端建立 WebSocket 連線時觸發。

• ws.send(...): 向請求連線的客戶端發送歡迎訊息..

✉️接收訊息（訊息）

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!");
}

伺服器收到客戶端訊息時觸發。

• ws.send(...)：回顯收到的訊息並確認。

⏹️連線關閉（關閉）

open(ws) {
  console.log("? A new Websocket Connection");
  ws.send("? Welcome baby");
}

WebSocket 連線關閉時觸發。

參數：

• code: 關閉連線的原因代碼。
• 訊息：有關關閉的更多詳細資訊。

？排水事件（排水）

message(ws, message) {
  console.log("✉️ A new Websocket Message is received: " + message);
  ws.send("✉️ I received a message from you: " + message);
}

當 WebSocket 在暫時不堪重負後準備好接受更多資料時，會觸發排出事件。

---

記錄伺服器啟動

close(ws, code, message) {
  console.log("⏹️ A Websocket Connection is CLOSED");
}

伺服器運行後將其 URL 記錄到控制台。

---

回顧一下它是如何運作的

1. HTTP 請求：處理標準 HTTP 請求（例如，提供檔案或回應狀態）。
2. WebSocket 升級：當客戶端連接到 /chat 時，將 HTTP 連線升級為 WebSocket 連線。
3. 即時通訊：使用 WebSocket 事件（開啟、訊息、關閉、耗盡）處理伺服器和用戶端之間的持久通訊。

---

運行伺服器

一旦你有了index.ts文件，你就可以透過bun run啟動伺服器：

drain(ws) {
  console.log("DRAIN EVENT");
}

伺服器已準備就緒並已啟動並正在運行。現在，我們可以實現客戶端了。

後續步驟

現在我們了解了處理 WebSocket 的腳本的結構，接下來的步驟是：

• 為 WebSocket 用戶端實作 HTML；
• 實作廣播邏輯，將訊息從一個客戶端轉送到所有連線的客戶端。

以上是使用 JavaScript 和 Bun 的 WebSocket的詳細內容。更多資訊請關注PHP中文網其他相關文章！