Penyiaran WebSocket dengan JavaScript dan Bun-tutorial js-php.cn

WebSocket broadcasting with JavaScript and Bun

Penyiaran ialah salah satu ciri WebSockets yang paling berkuasa, membolehkan pelayan menghantar mesej kepada berbilang pelanggan yang disambungkan secara serentak. Tidak seperti komunikasi titik-ke-titik, di mana mesej ditukar antara pelanggan tunggal dan pelayan, penyiaran membolehkan satu mesej untuk mencapai sekumpulan pelanggan. Ini menjadikannya amat diperlukan untuk aplikasi masa nyata, kolaboratif dan interaktif.

Mengapa Penyiaran Penting

Penyiaran adalah penting untuk senario di mana berbilang pengguna perlu kekal disegerakkan atau dimaklumkan tentang kemas kini yang sama dalam masa nyata. Contohnya:

Aplikasi sembang kumpulan: menghantar mesej kepada semua peserta dalam bilik sembang.
Alat kolaboratif: mengemas kini semua pengguna tentang dokumen kongsi atau perubahan kandungan.
Pemberitahuan langsung: menyiarkan berita tergempar, kemas kini saham atau skor sukan kepada berbilang pelanggan.
Permainan dalam talian: menyegerakkan keadaan atau tindakan permainan merentas berbilang pemain.

Dalam kes sedemikian, penyiaran memastikan semua pengguna yang disambungkan disegerakkan tanpa memerlukan panggilan pelayan individu untuk setiap pelanggan, yang sebaliknya akan menjadi tidak cekap dan terdedah kepada kependaman.

Dua pendekatan untuk penyiaran

Apabila melaksanakan penyiaran, terdapat dua strategi biasa untuk dipertimbangkan:

Penyiaran kepada semua pelanggan (termasuk pengirim)
Penyiaran kepada semua pelanggan kecuali pengirim

Menyiarkan kepada semua pelanggan (termasuk pengirim)

Pendekatan ini menghantar mesej kepada semua pelanggan yang disambungkan ke saluran tertentu, termasuk saluran yang menghasilkan mesej.

Pendekatan ini sesuai untuk situasi di mana setiap pelanggan, termasuk pengirim, perlu menerima siaran, seperti memaparkan pengakuan atau kemas kini mesej mereka dalam sembang kumpulan.

Menyiarkan kepada semua pelanggan kecuali pengirim

Dalam kes ini, mesej disiarkan kepada semua pelanggan kecuali orang yang menghantarnya.

Pendekatan ini sesuai untuk senario di mana pengirim tidak perlu melihat mesej mereka sendiri dalam siaran, seperti permainan berbilang pemain di mana tindakan perlu dikongsi dengan pemain lain tetapi tidak bergema kembali kepada pemain yang melakukan tindakan itu .

Kedua-dua kaedah mempunyai kes penggunaan khusus dan boleh dilaksanakan dengan mudah dengan alatan seperti Bun, membolehkan pembangun mengendalikan penyiaran dengan cekap dengan kod minimum.

Artikel ini membincangkan cara menyediakan penyiaran WebSocket menggunakan Bun dan menunjukkan kedua-dua pendekatan penyiaran, membantu anda membina aplikasi masa nyata yang mantap.

Kod untuk penyiaran dengan WebSockets

Dalam artikel pertama siri ini, WebSocket dengan JavaScript dan Bun, kami meneroka struktur pelayan WebSocket yang membalas mesej yang dihantar oleh pelanggan.

Artikel ini akan meneroka langganan saluran, mekanisme yang membolehkan penyiaran mesej kepada berbilang pelanggan.

Kami akan mulakan dengan membentangkan kod lengkap dan kemudian memecahkannya untuk meneroka semua bahagian yang berkaitan dengan terperinci.

Buat fail 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

Salin selepas log masuk

anda boleh menjalankannya melalui:

bun run broadcast.ts

Salin selepas log masuk

Kod ini memperkenalkan penyiaran, membenarkan pelayan menghantar mesej kepada semua pelanggan yang dilanggan dalam saluran tertentu. Ia juga membezakan antara penyiaran kepada semua pelanggan (termasuk pengirim) atau tidak termasuk pengirim. Berikut ialah penjelasan terperinci:

Memulakan pelayan

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

Salin selepas log masuk

Permulaan adalah sama dengan artikel sebelumnya.
Pelayan mendengar pada port 8080 dan serupa dengan contoh sebelumnya, ia mengendalikan permintaan HTTP dan meningkatkan sambungan WebSocket untuk /sembang.

Penyiaran dalam WebSockets

Penyiaran membenarkan mesej dihantar kepada semua pelanggan yang melanggan saluran tertentu, seperti sembang kumpulan.
Begini cara kod mencapai ini:

Melanggan saluran (dalam Acara terbuka)

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

Salin selepas log masuk

ws.subscribe(channel): melanggan pelanggan ke saluran the-group-chat. Semua pelanggan dalam saluran ini kini boleh menerima mesej yang disiarkan kepadanya.
ws.send(...): pelanggan dialu-alukan secara individu .
ws.publish(saluran, mesej): menyiarkan mesej kepada semua pelanggan dalam saluran.

Menyiarkan mesej (membalas/menyiarkan mesej daripada pelanggan dalam acara mesej)

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}`);
}

Salin selepas log masuk

Apabila mesej diterima daripada pelanggan:

Penghantar mendapat pengakuan melalui ws.send(...).
Mesej disiarkan kepada semua pelanggan (tidak termasuk pengirim) dalam "the-group-chat" menggunakan ws.publish(...).

Nota: Pengirim tidak menerima mesej siaran kerana kami memanggil kaedah terbitkan pada objek ws. Anda harus menggunakan objek pelayan untuk memasukkan pengirim.

Menyahlanggan dan menyiarkan pada putus sambungan (dalam acara tertutup)

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

Salin selepas log masuk

Apabila pelanggan memutuskan sambungan:

ws.unsubscribe(channel): mengalih keluar pelanggan daripada langganan saluran.
Satu mesej disiarkan kepada semua pelanggan yang tinggal dalam saluran, memberitahu mereka tentang pemutusan sambungan.

Mesej pelayan berkala kepada semua pelanggan

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

Salin selepas log masuk

Setiap 5 saat, pelayan menyiarkan mesej kepada semua pelanggan dalam saluran "the-group-chat" menggunakan server.publish(...). Di sini kami menggunakan objek pelayan.

Kaedah utama

ws.subscribe(channel): melanggan klien WebSocket semasa ke saluran untuk komunikasi kumpulan.
ws.publish(saluran, mesej): menyiarkan mesej kepada semua pelanggan dalam saluran yang ditentukan (tidak termasuk pengirim).
server.publish(channel, message): serupa dengan ws.publish, tetapi digunakan pada peringkat pelayan untuk penyiaran kepada semua pelanggan yang dilanggan (termasuk pengirim).
ws.unsubscribe(channel): mengalih keluar pelanggan semasa daripada saluran.

Contoh aliran

Seorang pelanggan menyambung ke /chat, melanggan "the-group-chat".
Pelanggan menghantar mesej kepada pelayan:
- Mesej itu bergema kembali kepada pengirim.
- Pelayan menyiarkan mesej kepada semua pelanggan lain dalam saluran.
Apabila pelanggan memutuskan sambungan:
- ia telah menyahlanggan saluran.
- Pelayan memberitahu pelanggan yang tinggal tentang pemutusan sambungan.
Setiap 5 saat, pelayan menghantar mesej siaran berkala kepada semua pelanggan.

Kesimpulan

WebSockets ialah alat yang berkuasa untuk membina aplikasi web interaktif masa nyata. Tidak seperti komunikasi HTTP tradisional, WebSockets menyediakan saluran dua hala yang berterusan yang membolehkan pertukaran mesej segera antara pelayan dan pelanggan yang disambungkan. Ini menjadikan mereka sesuai untuk senario seperti sembang langsung, alatan kolaboratif, permainan atau sebarang aplikasi yang komunikasi kependaman rendah adalah penting.

Dalam artikel ini (dan dalam siri ini), kami meneroka asas menyediakan pelayan WebSocket menggunakan Bun, mengendalikan sambungan pelanggan dan menyiarkan mesej kepada pelanggan yang dilanggan. Kami juga menunjukkan cara melaksanakan sistem sembang kumpulan mudah di mana pelanggan boleh menyertai saluran, menghantar mesej dan menerima kemas kini daripada pelanggan lain dan pelayan itu sendiri.

Dengan memanfaatkan sokongan WebSocket terbina dalam Bun dan ciri seperti melanggan, menerbitkan dan menyahlanggan, ia menjadi sangat mudah untuk mengurus komunikasi masa nyata. Sama ada anda menghantar kemas kini berkala, penyiaran kepada semua pelanggan atau mengurus saluran tertentu, WebSockets menyediakan cara yang cekap dan berskala untuk mengendalikan keperluan tersebut.

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