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.
Broadcasting ist für Szenarien unerlässlich, in denen mehrere Benutzer synchronisiert oder in Echtzeit über dieselben Aktualisierungen informiert bleiben müssen. Zum Beispiel:
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.
Bei der Umsetzung von Rundfunkübertragungen sind zwei gängige Strategien zu berücksichtigen:
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.
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.
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:
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.
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:
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");
}
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:
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.
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:
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.
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!
Was ist Leerverkauf?
Was ist ein Web-Frontend?
Abfragemethode für Domainnamen der zweiten Ebene
So funktioniert der TCP-Drei-Wege-Handshake
So lösen Sie das Problem, dass die Datei msxml6.dll fehlt
So verwenden Sie die Suchfunktion
Verwendung der sqrt-Funktion in Java
Was ist eine NFC-Zugangskontrollkarte?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
