Die Gewährleistung einer effizienten und nahtlosen Kommunikation zwischen Client und Server ist der Schlüssel zum Aufbau moderner Echtzeit-Webanwendungen. Herkömmliche HTTP-Anfragen – wie sie beim Polling verwendet werden – sind zustandslos und unidirektional. Der Client stellt eine Anfrage (z. B. mit Fetch oder Axios) an den Server und der Server antwortet, bevor die Verbindung geschlossen wird. Wenn der Client neue Daten benötigt, muss er in regelmäßigen Abständen wiederholt neue Anfragen senden, was zu unnötiger Latenz führt und die Belastung sowohl des Clients als auch des Servers erhöht.
Wenn Sie beispielsweise eine Live-Chat-App oder einen Aktienkurs-Tracker erstellen, müsste der Kunde bei Umfragen etwa jede Sekunde Aktualisierungen anfordern, selbst wenn keine neuen Daten abzurufen sind. Hier glänzen WebSockets.
WebSockets bieten einen persistenten, bidirektionalen Kommunikationskanal zwischen dem Client und dem Server. Sobald die Verbindung hergestellt ist, kann der Server Aktualisierungen sofort an den Client senden, ohne auf eine neue Anfrage warten zu müssen. Dies macht WebSockets ideal für Szenarien, in denen Echtzeit-Updates unerlässlich sind, wie zum Beispiel:
Die Verwendung von Vanilla JavaScript auf der Clientseite und der Bun-Laufzeit auf der Serverseite macht die Implementierung von WebSockets einfach und effizient. Zum Beispiel:
In diesem Szenario bieten WebSockets eine geringere Latenz, eine geringere Serverlast und ein reibungsloseres Benutzererlebnis als herkömmliche Abfragemethoden.
Stellen Sie zunächst sicher, dass das Brötchen installiert ist. Erstellen Sie dann ein neues Bun-Projekt, erstellen Sie ein neues leeres Verzeichnis, geben Sie das neue Verzeichnis ein und initialisieren Sie das Projekt über den Bun-Init-Befehl:
mkdir websocket-demo cd websocket-demo bun init
Der Befehl bun init erstellt die Datei package.json, eine Datei „hello world“ index.ts, die Datei .gitignore, die Datei tsconfig.json für die Typescript-Konfiguration und eine Datei README.md.
Jetzt können Sie mit der Erstellung Ihres JavaScript-Codes beginnen. Ich zeige Ihnen das gesamte Drehbuch; Dann werden wir alle relevanten Teile erkunden. Sie können die Datei index.ts bearbeiten:
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}`);
Nachfolgend finden Sie eine Aufschlüsselung des bereitgestellten Codes, in der jeder Teil und seine Funktionalität erläutert werden.
mkdir websocket-demo cd websocket-demo bun init
Die Bun.serve-Methode initialisiert einen Server, der sowohl HTTP- als auch WebSocket-Anfragen verarbeiten kann.
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}`);
Der WebSocket-Schlüssel definiert Ereignishandler zur Verwaltung von WebSocket-Verbindungen.
const server = Bun.serve({
port: 8080, // defaults to $BUN_PORT, $PORT, $NODE_PORT otherwise 3000
...
});
Wird ausgelöst, wenn ein Client eine WebSocket-Verbindung aufbaut.
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!");
}
Wird ausgelöst, wenn der Server eine Nachricht vom Client empfängt.
open(ws) {
console.log("? A new Websocket Connection");
ws.send("? Welcome baby");
}
Wird ausgelöst, wenn eine WebSocket-Verbindung geschlossen wird.
Parameter:
message(ws, message) {
console.log("✉️ A new Websocket Message is received: " + message);
ws.send("✉️ I received a message from you: " + message);
}
Das Drain-Ereignis wird ausgelöst, wenn der WebSocket nach vorübergehender Überlastung bereit ist, mehr Daten zu akzeptieren.
close(ws, code, message) {
console.log("⏹️ A Websocket Connection is CLOSED");
}
Protokolliert die URL des Servers in der Konsole, sobald er ausgeführt wird.
Sobald Sie Ihre index.ts-Datei haben, können Sie den Server über bun run starten:
drain(ws) {
console.log("DRAIN EVENT");
}
Der Server ist bereit und betriebsbereit. Jetzt können wir den Client implementieren.
Jetzt verstehen wir die Struktur des Skripts zur Handhabung des WebSocket. Die nächsten Schritte sind:
Das obige ist der detaillierte Inhalt vonWebSocket mit JavaScript und Bun. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Wie lange dauert es, bis die Douyin-Aufladung eintrifft?
Lösung für fehlgeschlagene Verbindung zwischen wsus und Microsoft-Server
Python-Zeitstempel
Was bedeutet Datenintelligenz?
So ändern Sie Koordinaten in Matlab
So aktualisieren Sie das BIOS
Wie wurde der Name von tt voice geändert?
So heben Sie Gebühren auf WeChat ab
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
