WebSocket mit JavaScript und Bun

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.

---

Der WebSocket-Ansatz

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:

• Chat-Nachrichten in einer Live-Chat-Anwendung senden.
• Senden von Benachrichtigungen oder Aktualisierungen gleichzeitig an mehrere Benutzer.
• Streamen von Echtzeitdaten wie Aktienkursen, Sportergebnissen oder Spielständen.

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:

• Der Client kann eine Nachricht an den Server senden, und der Server kann diese Nachricht sofort an andere verbundene Clients senden.
• Eine dauerhafte Verbindung gewährleistet, anders als beim Polling, keinen wiederholten Aufwand für die Wiederherstellung von Verbindungen.

In diesem Szenario bieten WebSockets eine geringere Latenz, eine geringere Serverlast und ein reibungsloseres Benutzererlebnis als herkömmliche Abfragemethoden.

---

Erstellen eines WebSocket-Projekts

Schritt 1: Einrichten eines Brötchenprojekts

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

Dokumentieren des Codes für einen einfachen WebSocket-Server mit Bun

Nachfolgend finden Sie eine Aufschlüsselung des bereitgestellten Codes, in der jeder Teil und seine Funktionalität erläutert werden.

---

Serverinitialisierung

mkdir websocket-demo
cd websocket-demo
bun init

Die Bun.serve-Methode initialisiert einen Server, der sowohl HTTP- als auch WebSocket-Anfragen verarbeiten kann.

• Port: 8080: Gibt den Port an, auf dem der Server lauscht. Standardmäßig werden allgemeine Umgebungsvariablen oder 3000 verwendet, wenn keine Angabe erfolgt. In diesem Beispiel ist der Port fest auf 8080 codiert. Wenn Sie eine flexiblere Möglichkeit bieten möchten, sollten Sie die Portzeile entfernen und Bun die Verwaltung des Ports überlassen. Sie können das Skript also über export BUN_PORT=4321; ausführen. bun führen Sie index.ts aus

---

Behandlung von HTTP-Anfragen

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): Verarbeitet eingehende HTTP-Anfragen.
• Root-Pfad /: dient der Datei index.html.
• /surprise path: Gibt eine lustige Überraschungs-Emoji-Antwort zurück?.
• /chat-Pfad: Versucht, die Verbindung auf eine WebSocket-Verbindung zu „aktualisieren“. Wenn das Upgrade fehlschlägt, wird eine Fehlerantwort 400 zurückgegeben.

---

WebSocket-Handler

Der WebSocket-Schlüssel definiert Ereignishandler zur Verwaltung von WebSocket-Verbindungen.

? Verbindung offen (offen)

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.

• ws.send(...): Sendet eine Willkommensnachricht an den Client, der die Verbindung angefordert hat..

✉️ Empfangen einer Nachricht (Nachricht)

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.

• ws.send(...): gibt die empfangene Nachricht mit einer Bestätigung zurück.

⏹️ Verbindung schließen (schließen)

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

Wird ausgelöst, wenn eine WebSocket-Verbindung geschlossen wird.

Parameter:

• Code: Grundcode für das Schließen der Verbindung.
• Nachricht: zusätzliche Details zur Schließung.

? Drain-Ereignis (Drain)

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.

---

Protokollieren Sie den Serverstart

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

Protokolliert die URL des Servers in der Konsole, sobald er ausgeführt wird.

---

Fassen Sie noch einmal zusammen, wie es funktioniert

1. HTTP-Anfragen: Verarbeitet Standard-HTTP-Anfragen (z. B. Bereitstellung einer Datei oder Antwort mit einem Status).
2. WebSocket-Upgrade: Aktualisiert HTTP-Verbindungen auf WebSocket-Verbindungen, wenn Clients eine Verbindung zu /chat herstellen.
3. Echtzeitkommunikation: Verwaltet die dauerhafte Kommunikation zwischen dem Server und den Clients mithilfe von WebSocket-Ereignissen (Öffnen, Nachricht, Schließen, Entleeren).

---

Ausführen des Servers

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.

Nächste Schritte

Jetzt verstehen wir die Struktur des Skripts zur Handhabung des WebSocket. Die nächsten Schritte sind:

• Implementieren des HTML für den WebSocket-Client;
• Implementierung der Broadcasting-Logik, um Nachrichten von einem Client an alle verbundenen Clients weiterzuleiten.

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!