WebSocket dengan JavaScript dan Bun

Memastikan komunikasi yang cekap dan lancar antara pelanggan dan pelayan adalah kunci apabila membina aplikasi web masa nyata moden. Permintaan HTTP tradisional—seperti yang digunakan dalam pengundian—adalah tanpa negara dan satu arah. Pelanggan membuat permintaan (cth., menggunakan fetch atau axios) kepada pelayan, dan pelayan bertindak balas sebelum sambungan ditutup. Jika pelanggan memerlukan data baharu, ia mesti menghantar permintaan baharu berulang kali pada selang masa yang tetap, mewujudkan kependaman yang tidak perlu dan meningkatkan beban pada kedua-dua pelanggan dan pelayan.

Sebagai contoh, jika anda sedang membina apl sembang langsung atau penjejak harga saham, tinjauan pendapat memerlukan pelanggan meminta kemas kini setiap saat atau lebih, walaupun tiada data baharu untuk diambil. Di sinilah WebSockets bersinar.

---

Pendekatan WebSocket

WebSockets menyediakan saluran komunikasi dua hala yang berterusan antara pelanggan dan pelayan. Setelah sambungan diwujudkan, pelayan boleh serta-merta menolak kemas kini kepada klien tanpa menunggu permintaan baharu. Ini menjadikan WebSockets sesuai untuk senario di mana kemas kini masa nyata adalah penting, seperti:

• Menghantar mesej sembang dalam aplikasi sembang langsung.
• Menyiarkan pemberitahuan atau kemas kini kepada berbilang pengguna secara serentak.
• Menstrim data masa nyata, seperti harga saham, skor sukan atau keadaan permainan.

Menggunakan JavaScript Vanila pada bahagian klien dan masa jalan Bun di bahagian pelayan menjadikan pelaksanaan WebSockets mudah dan cekap. Contohnya:

• Klien boleh menghantar mesej kepada pelayan dan pelayan boleh menyiarkan mesej tersebut dengan serta-merta kepada pelanggan lain yang disambungkan.
• Sambungan berterusan memastikan tiada overhed berulang untuk mewujudkan semula sambungan, tidak seperti tinjauan pendapat.

Dalam senario ini, WebSockets menawarkan kependaman yang lebih rendah, beban pelayan yang dikurangkan dan pengalaman pengguna yang lebih lancar daripada kaedah pengundian tradisional.

---

Membina projek WebSocket

Langkah 1: menyediakan Projek Bun

Pertama, pastikan Bun dipasang. Kemudian buat projek Bun baharu, buat direktori kosong baharu, masukkan ke dalam direktori baharu dan mulakan projek melalui arahan bun init:

mkdir websocket-demo
cd websocket-demo
bun init

Arahan bun init akan mencipta fail package.json, fail index.ts "hello world", fail .gitignore, fail tsconfig.json untuk konfigurasi skrip taip dan fail README.md.

Sekarang, anda boleh mula membuat kod JavaScript anda. Saya akan menunjukkan kepada anda keseluruhan skrip; maka kita akan meneroka semua bahagian yang berkaitan. Anda boleh mengedit fail 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}`);

Mendokumentasikan kod untuk pelayan WebSocket asas menggunakan Bun

Di bawah ialah pecahan kod yang disediakan, menerangkan setiap bahagian dan fungsinya.

---

Inisialisasi Pelayan

mkdir websocket-demo
cd websocket-demo
bun init

Kaedah Bun.serve memulakan pelayan yang mampu mengendalikan kedua-dua permintaan HTTP dan WebSocket.

• port: 8080: Menentukan port di mana pelayan mendengar. Lalai kepada pembolehubah persekitaran biasa atau 3000 jika tidak ditentukan. Dalam contoh ini port dikodkan keras kepada 8080. Jika anda ingin menyediakan cara yang lebih fleksibel, anda harus mengalih keluar talian port dan membenarkan Bun untuk menguruskan port. Jadi anda boleh menjalankan skrip melalui eksport BUN_PORT=4321; bun run index.ts

---

Pengendalian permintaan 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): Mengendalikan permintaan HTTP masuk.
• Laluan akar /: menyediakan fail index.html.
• /laluan kejutan: mengembalikan respons emoji kejutan yang menyeronokkan ?.
• /chat Path: Cuba untuk "menaik taraf" sambungan kepada sambungan WebSocket. Jika peningkatan gagal, ia mengembalikan respons ralat 400.

---

Pengendali WebSocket

Kunci websocket mentakrifkan pengendali acara untuk mengurus sambungan WebSocket.

? Sambungan Terbuka (terbuka)

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

Dicetuskan apabila pelanggan mewujudkan sambungan WebSocket.

• ws.send(...): menghantar mesej alu-aluan kepada pelanggan yang meminta sambungan..

✉️ Menerima Mesej (mesej)

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

Dicetuskan apabila pelayan menerima mesej daripada pelanggan.

• ws.send(...): bergema kembali mesej yang diterima dengan pengesahan.

⏹️ Sambungan Tutup (tutup)

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

Dicetuskan apabila sambungan WebSocket ditutup.

Parameter:

• kod: kod sebab untuk menutup sambungan.
• mesej: butiran tambahan tentang penutupan.

? Acara Longkang (longkang)

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

Peristiwa longkang dicetuskan apabila WebSocket bersedia untuk menerima lebih banyak data selepas ditimpa buat sementara waktu.

---

Log pelancaran pelayan

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

Melog URL pelayan ke konsol sebaik sahaja ia dijalankan.

---

Imbas kembali tentang cara ia berfungsi

1. Permintaan HTTP: mengendalikan permintaan HTTP standard (cth., menyampaikan fail atau membalas dengan status).
2. Naik Taraf WebSocket: menaik taraf sambungan HTTP kepada sambungan WebSocket apabila pelanggan menyambung ke /sembang.
3. Komunikasi Masa Nyata: mengendalikan komunikasi berterusan antara pelayan dan pelanggan menggunakan acara WebSocket (buka, mesej, tutup, longkang).

---

Menjalankan pelayan

Sebaik sahaja anda mempunyai fail index.ts anda, anda boleh memulakan pelayan melalui bun run:

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

Pelayan sudah sedia dan berfungsi. Kini, kami boleh melaksanakan pelanggan.

Langkah seterusnya

Kini kami memahami struktur skrip untuk mengendalikan WebSocket, langkah seterusnya ialah:

• melaksanakan HTML untuk klien WebSocket;
• Melaksanakan penyiaran logik untuk memajukan mesej daripada satu pelanggan kepada semua pelanggan yang disambungkan.

Atas ialah kandungan terperinci WebSocket dengan JavaScript dan Bun. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!