WebSocket-Broadcasting mit JavaScript und Bun

Broadcasting ist eine der leistungsstärksten Funktionen von WebSockets und ermöglicht es Servern, Nachrichten gleichzeitig an mehrere verbundene Clients zu senden. Im Gegensatz zur Punkt-zu-Punkt-Kommunikation, bei der Nachrichten zwischen einem einzelnen Client und dem Server ausgetauscht werden, ermöglicht Broadcasting, dass eine einzelne Nachricht eine Gruppe von Clients erreicht. Dies macht es unverzichtbar für Echtzeit-, kollaborative und interaktive Anwendungen.

---

Warum Rundfunk wichtig ist

Broadcasting ist für Szenarien unerlässlich, in denen mehrere Benutzer synchronisiert oder in Echtzeit über dieselben Aktualisierungen informiert bleiben müssen. Zum Beispiel:

• Gruppen-Chat-Anwendungen: Senden einer Nachricht an alle Teilnehmer in einem Chatroom.
• Tools für die Zusammenarbeit: Informieren aller Benutzer über freigegebene Dokumente oder Inhaltsänderungen.
• Live-Benachrichtigungen: Übertragen Sie aktuelle Nachrichten, Aktienaktualisierungen oder Sportergebnisse an mehrere Abonnenten.
• Online-Gaming: Spielstatus oder Aktionen mehrerer Spieler synchronisieren.

In solchen Fällen stellt Broadcasting sicher, dass alle verbundenen Benutzer synchron bleiben, ohne dass für jeden Client individuelle Serveraufrufe erforderlich sind, die andernfalls ineffizient und anfällig für Latenz wären.

---

Zwei Ansätze zum Rundfunk

Bei der Umsetzung von Rundfunkübertragungen sind zwei gängige Strategien zu berücksichtigen:

• Übertragung an alle Kunden (einschließlich des Absenders)
• Übertragung an alle Kunden außer dem Absender

Broadcasting an alle Clients (einschließlich Absender)

Dieser Ansatz sendet die Nachricht an alle Clients, die mit einem bestimmten Kanal verbunden sind, einschließlich desjenigen, von dem die Nachricht stammt.

Dieser Ansatz eignet sich für Situationen, in denen jeder Kunde, einschließlich des Absenders, die Übertragung erhalten muss, beispielsweise um eine Bestätigung oder Aktualisierung seiner Nachricht in einem Gruppenchat anzuzeigen.

Broadcasting an alle Clients außer dem Absender

In diesem Fall wird die Nachricht an alle Clients gesendet, mit Ausnahme desjenigen, der sie gesendet hat.

Dieser Ansatz ist ideal für Szenarien, in denen der Absender seine eigene Nachricht nicht in der Übertragung sehen muss, wie zum Beispiel ein Multiplayer-Spiel, bei dem Aktionen mit anderen Spielern geteilt, aber nicht an denjenigen zurückgesendet werden müssen, der die Aktion ausführt .

Beide Methoden haben spezifische Anwendungsfälle und können einfach mit Tools wie Bun implementiert werden, sodass Entwickler die Übertragung effizient mit minimalem Code abwickeln können.

---

Dieser Artikel befasst sich mit der Einrichtung von WebSocket-Broadcasting mit Bun und demonstriert beide Broadcasting-Ansätze, die Ihnen beim Erstellen robuster Echtzeitanwendungen helfen.

Der Code für die Übertragung mit WebSockets

Im ersten Artikel dieser Serie, WebSocket mit JavaScript und Bun, haben wir die Struktur eines WebSocket-Servers untersucht, der auf von einem Client gesendete Nachrichten reagiert.

In diesem Artikel geht es um Kanalabonnements, einen Mechanismus, der das Senden von Nachrichten an mehrere Clients ermöglicht.

Wir beginnen mit der Präsentation des vollständigen Codes und zerlegen ihn dann, um alle relevanten Teile im Detail zu untersuchen.

Erstellen Sie die Datei „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

Sie können es ausführen über:

bun run broadcast.ts

Dieser Code führt Broadcasting ein und ermöglicht es dem Server, Nachrichten an alle abonnierten Clients in einem bestimmten Kanal zu senden. Es wird außerdem zwischen der Übertragung an alle Clients (einschließlich des Absenders) oder dem Ausschluss des Absenders unterschieden. Hier ist eine ausführliche Erklärung:

---

Initialisierung des Servers

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

Die Initialisierung ist die gleiche wie im vorherigen Artikel.
Der Server überwacht Port 8080 und verarbeitet ähnlich wie im vorherigen Beispiel HTTP-Anfragen und aktualisiert WebSocket-Verbindungen für /chat.

---

Übertragung in WebSockets

Broadcasting ermöglicht das Senden einer Nachricht an alle Kunden, die einen bestimmten Kanal abonniert haben, z. B. einen Gruppenchat.
So erreicht der Code dies:

---

Abonnieren eines Kanals (im offenen Event)

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): abonniert den Client für den Kanal the-group-chat. Alle Clients in diesem Kanal können jetzt an ihn gesendete Nachrichten empfangen.
• ws.send(...): Der Kunde wird individuell begrüßt.
• ws.publish(channel, message): sendet eine Nachricht an alle Clients im Kanal.

---

Broadcasting-Nachrichten (Antworten/Rundsenden einer Nachricht von einem Client im Nachrichtenereignis)

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

Wenn eine Nachricht von einem Kunden empfangen wird:

• Der Absender erhält eine Bestätigung über ws.send(...).
• Die Nachricht wird mit ws.publish(...) an alle Clients (mit Ausnahme des Absenders) im „Gruppenchat“ gesendet.

Hinweis: Der Absender erhält die Broadcast-Nachricht nicht, da wir die Veröffentlichungsmethode für das WS-Objekt aufrufen. Sie sollten das Serverobjekt verwenden, um den Absender einzuschließen.

---

Abmelden und Senden bei Trennung (im geschlossenen Fall)

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

Wenn ein Client die Verbindung trennt:

• ws.unsubscribe(channel): Entfernt den Client aus dem Kanalabonnement.
• Eine Nachricht wird an alle verbleibenden Clients im Kanal gesendet, um sie über die Trennung zu informieren.

---

Regelmäßige Servernachrichten an alle Clients

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

Alle 5 Sekunden sendet der Server mithilfe von server.publish(...) eine Nachricht an alle Clients im Kanal „the-group-chat“. Hier verwenden wir das Serverobjekt.

---

Schlüsselmethoden

• ws.subscribe(channel): abonniert den aktuellen WebSocket-Client für einen Kanal für die Gruppenkommunikation.
• ws.publish(channel, message): sendet eine Nachricht an alle Clients im angegebenen Kanal (mit Ausnahme des Absenders).
• server.publish(Kanal, Nachricht): ähnelt ws.publish, wird jedoch auf Serverebene zum Senden an alle abonnierten Clients (einschließlich des Absenders) verwendet.
• ws.unsubscribe(channel): Entfernt den aktuellen Client aus dem Kanal.

---

Beispielablauf

1. Ein Client stellt eine Verbindung zu /chat her und abonniert „the-group-chat“.
2. Der Client sendet eine Nachricht an den Server:
   • Die Nachricht wird an den Absender zurückgesendet.
   • Der Server sendet die Nachricht an alle anderen Clients im Kanal.
3. Wenn ein Client die Verbindung trennt:
   • Es wurde vom Kanal abgemeldet.
   • Der Server benachrichtigt die verbleibenden Clients über die Trennung.
4. Alle 5 Sekunden sendet der Server eine periodische Broadcast-Nachricht an alle Clients.

---

Abschluss

WebSockets sind ein leistungsstarkes Tool zum Erstellen interaktiver Echtzeit-Webanwendungen. Im Gegensatz zur herkömmlichen HTTP-Kommunikation bieten WebSockets einen dauerhaften, bidirektionalen Kanal, der den sofortigen Nachrichtenaustausch zwischen dem Server und verbundenen Clients ermöglicht. Dies macht sie ideal für Szenarien wie Live-Chats, Tools für die Zusammenarbeit, Spiele oder alle Anwendungen, bei denen eine Kommunikation mit geringer Latenz von entscheidender Bedeutung ist.

In diesem Artikel (und in der Serie) haben wir die Grundlagen der Einrichtung eines WebSocket-Servers mit Bun, der Handhabung von Client-Verbindungen und der Übertragung von Nachrichten an abonnierte Clients untersucht. Wir haben auch gezeigt, wie man ein einfaches Gruppenchatsystem implementiert, bei dem Clients einem Kanal beitreten, Nachrichten senden und Updates sowohl von anderen Clients als auch vom Server selbst erhalten können.

Durch die Nutzung der integrierten WebSocket-Unterstützung und Funktionen wie Abonnieren, Veröffentlichen und Abmelden von Bun wird die Verwaltung der Echtzeitkommunikation bemerkenswert einfach. Unabhängig davon, ob Sie regelmäßige Updates senden, an alle Clients senden oder bestimmte Kanäle verwalten, bieten WebSockets eine effiziente und skalierbare Möglichkeit, solche Anforderungen zu erfüllen.

Das obige ist der detaillierte Inhalt vonWebSocket-Broadcasting mit JavaScript und Bun. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!