JavaScript と Bun を使用した WebSocket

最新のリアルタイム Web アプリケーションを構築する場合、クライアントとサーバー間の効率的でシームレスな通信を確保することが重要です。従来の HTTP リクエスト (ポーリングで使用されるリクエストなど) はステートレスで一方向です。クライアントは (fetch または axios を使用して) サーバーにリクエストを送信し、サーバーは接続が閉じる前に応答します。クライアントが新しいデータを必要とする場合、一定の間隔で新しいリクエストを繰り返し送信する必要があるため、不必要な遅延が発生し、クライアントとサーバーの両方の負荷が増加します。

たとえば、ライブ チャット アプリや株価トラッカーを構築している場合、取得する新しいデータがない場合でも、ポーリングではクライアントが 1 秒ごとに更新をリクエストする必要があります。ここは WebSocket が輝くところです。

---

WebSocket のアプローチ

WebSocket は、クライアントとサーバーの間に永続的な双方向通信チャネルを提供します。接続が確立されると、サーバーは新しいリクエストを待つことなく、即座に更新をクライアントにプッシュできます。これにより、WebSocket は次のようなリアルタイム更新が不可欠なシナリオに最適になります。

• ライブ チャット アプリケーションでチャット メッセージを送信します。
• 通知や更新情報を複数のユーザーに同時にブロードキャストします。
• 株価、スポーツのスコア、試合状況などのリアルタイム データをストリーミングします。

クライアント側で 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 ファイル、typescript 設定用の 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 の実装;
• 1 つのクライアントから接続されているすべてのクライアントにメッセージを転送するための ブロードキャスト ロジックを実装します。

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