So verwenden Sie JS WebSocket zur Implementierung eines einfachen Chats

Kurze Umfrage

Die Implementierungsidee des Kurzpollings besteht darin, dass der Browser alle paar Sekunden eine HTTP-Anforderung an den Server sendet. Nach Erhalt der Anforderung antwortet der Server direkt, unabhängig davon, ob Daten aktualisiert werden. Nachdem der Server die Antwort abgeschlossen hat, wird die TCP-Verbindung geschlossen. Die Codeimplementierung ist auch die einfachste. Sie besteht darin, mithilfe von XHR regelmäßig über setInterval Anforderungen an das Backend zu senden, um die neuesten Daten abzurufen.

setzeIntervall(Funktion() {
  fetch(url).then((res) => {
      // Erfolgscode
  })
}, 3000);

Vorteile: Einfache Implementierung.

Nachteile: Die Daten sind für kurze Zeit nicht synchron und es kommt zu einer großen Anzahl ungültiger Anfragen, mangelnder Sicherheit und Ressourcenverschwendung.

Langfristige Abfragen

Nachdem der Client eine Anfrage gesendet hat, gibt der Server die Daten nicht sofort zurück. Der Server blockiert die Anfrageverbindung und trennt die Verbindung erst, wenn die Daten auf dem Server aktualisiert wurden oder die Verbindung abläuft. Der Client sendet dann erneut eine Anfrage, um eine neue Verbindung herzustellen, und wiederholt diesen Vorgang, um die neuesten Daten abzurufen. Die allgemeine Wirkung ist wie folgt:

Der Clientcode lautet wie folgt:

Funktion async() {
    fetch(url).then((res) => {
        asynchron();
        // Erfolgscode
    }).catch(() => {
        // Zeitüberschreitung async();
    })
}

Vorteile: Es ist im Vergleich zum Polling optimiert und hat eine bessere Aktualität.

Nachteile: Das Aufrechterhalten der Verbindung verbraucht Ressourcen, der Server gibt keine gültigen Daten zurück und das Programm läuft ab.

WebSocket

Sowohl das oben erwähnte Kurz- als auch das Lang-Polling erfordern, dass der Client eine Ajax-Anforderung initiiert, bevor die Kommunikation durchgeführt werden kann. Sie verwenden das HTTP-Protokoll und der Server kann dem Client keine Informationen aktiv übermitteln.

Bei Szenarien wie Sportereignissen, Chatrooms und Echtzeitstandorten wird das Polling sehr ineffizient und verschwendet Ressourcen, da ständig Anfragen gesendet werden müssen, um eine Verbindung zum Server herzustellen. Durch die Einführung von WebSocket kann der Server aktiv Informationen an den Client senden, wodurch der Browser in Echtzeit kommunizieren kann.

Leute, die WebSocket noch nie verwendet haben, denken möglicherweise, es handele sich um eine fortschrittliche Technologie. Tatsächlich verfügt WebSocket über wenige häufig verwendete APIs und ist leicht zu beherrschen. Bevor wir jedoch seine Verwendung vorstellen, werfen wir einen Blick auf seine Kommunikationsprinzipien.

Kommunikationsgrundsätze

Wenn ein Client eine WebSocket-Verbindung mit einem Server herstellen möchte, sendet der Client während des Handshake-Prozesses zwischen Client und Server zunächst eine HTTP-Anforderung an den Server, einschließlich eines Upgrade-Anforderungsheaders, um den Server darüber zu informieren, dass der Client eine WebSocket-Verbindung herstellen möchte.

Das Herstellen einer WebSocket-Verbindung auf der Clientseite ist sehr einfach:

let ws = neuer WebSocket('ws://localhost:9000');

Ähnlich wie HTTP und HTTPS verfügt ws auch über ein entsprechendes wss, das zum Herstellen einer sicheren Verbindung verwendet wird. Wir haben ws lokal als Beispiel genommen. Der Anforderungsheader lautet zu diesem Zeitpunkt wie folgt:

Akzeptierte Kodierung: gzip, deflate, br
Akzeptierte Sprache: zh-CN,zh;q=0.9
Cache-Steuerung: kein Cache
: : : : : : : : : : : : : : :
Host: localhost:9000
Herkunft: http://localhost:9000
Pragma: kein Cache
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: 5fTJ1LTuh3RKjsJxydyifQ== // entspricht dem Antwortheader Sec-WebSocket-Accept Sec-WebSocket-Version: 13 // zeigt die Version des WebSocket-Protokolls an Upgrade: websocket // zeigt ein Upgrade auf das WebSocket-Protokoll an User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (Khtml, wie Gecko) Chrome/76.0.3809.132 Safari/537.36

Der Antwortheader lautet wie folgt:

Verbindung: Upgrade
Sec-WebSocket-Akzeptieren: ZUip34t+bCjhkvxxwhmdEOyx9hE=
Aktualisierung: WebSocket 

Zu diesem Zeitpunkt können Sie in der Antwortzeile (Allgemein) sehen, dass der Statuscode 101 Switching Protocols lautet, was darauf hinweist, dass die Verbindung vom HTTP-Protokoll zum WebSocket-Kommunikationsprotokoll konvertiert wurde. Nach erfolgreicher Konvertierung wird die Verbindung nicht unterbrochen, sondern eine Vollduplex-Kommunikation hergestellt und das nachfolgende Senden und Empfangen von Nachrichten erfolgt über diesen Verbindungskanal.

Beachten Sie, dass im Anforderungsheader ein Feld „Sec-WebSocket-Key“ vorhanden ist, das dem Feld „Sec-WebSocket-Accept“ im entsprechenden Header entspricht. Seine Funktion besteht darin, grundlegenden Schutz bereitzustellen, beispielsweise vor böswilligen oder ungültigen Verbindungen. Sec-WebSocket-Key ist eine Base64-Kodierung, die vom Client zufällig generiert wird. Der Server verwendet diese Kodierung und folgt einem festen Algorithmus:

GUID = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"; // Eine feste Zeichenfolge accept = base64(sha1(Schlüssel + GUID)); // Schlüssel ist der Sec-WebSocket-Key-Wert, accept ist der Sec-WebSocket-Accept-Wert

Die GUID-Zeichenfolge ist eine feste Zeichenfolge, die offiziell durch RFC6455 definiert ist und nicht geändert werden kann.

Nachdem der Client die Sec-WebSocket-Accept-Antwort vom Server erhalten hat, verwendet er denselben Algorithmus, um den zuvor generierten Sec-WebSocket-Key zu berechnen. Wenn sie übereinstimmen, war der Handshake erfolgreich. Stellen Sie dann fest, ob der HTTP-Antwortstatuscode 101 (Protokollwechsel) lautet. Wenn ja, stellen Sie eine Verbindung her und Sie sind fertig.

Implementierung eines einfachen Einzelchats

Als Nächstes implementieren wir eine Eins-zu-eins-Chatfunktion (Einzelchat) vom Typ „reine Textnachricht“. Lassen Sie uns ohne weitere Umschweife direkt zum Code gehen und auf die Kommentare achten.

Kunde:

Funktion connectWebsocket() {
    ws = neuer WebSocket('ws://localhost:9000');
    // Auf erfolgreiche Verbindung warten ws.onopen = () => {
        console.log('Verbindung zum Server-WebSocket erfolgreich');
        ws.send(JSON.stringify(msgData)); // Sendemethode sendet Nachricht an den Server};

    // Auf Servernachrichten warten (Nachrichten empfangen)
    ws.onmessage = (msg) => {
        let Nachricht = JSON.parse(msg.data);
        console.log('Empfangene Nachricht:', Nachricht)
        elUl.innerhtml += `<li>Xiaoqiu: ${message.content}</li>`;
    };

    // Auf Verbindungsfehler warten ws.onerror = () => {
        console.log('Verbindung fehlgeschlagen, Verbindung wird erneut hergestellt...');
        Websocket verbinden();
    };

    // Auf Verbindungsabschluss warten ws.onclose = () => {
        console.log('Verbindung geschlossen');
    };
};
Websocket verbinden();

Aus dem Obigen können wir ersehen, dass die API der WebSocket-Instanz leicht zu verstehen, einfach und benutzerfreundlich ist. Nachrichten können über die Methode send() gesendet werden, das Ereignis onmessage wird zum Empfangen von Nachrichten verwendet, und dann werden die Nachrichten verarbeitet und auf der Seite angezeigt. Wenn das Ereignis „onerror“ (Fehler beim Abhören der Verbindung) ausgelöst wird, ist es am besten, eine erneute Verbindung herzustellen, um die Verbindung nicht zu unterbrechen.

Serverknoten: (hier wird die ws-Bibliothek verwendet)

const path = require('Pfad');
const express = erfordern('express');
const app = express();
const server = require('http').Server(app);
const WebSocket = erfordern('ws');

const wss = neuer WebSocket.Server({ server: server });

wss.on('Verbindung', (ws) => { 

  // Auf Nachrichten vom Client warten ws.on('message', (message) => {
    Konsole.log(wss.clients.size);
    let msgData = JSON.parse(Nachricht);   
    wenn (msgData.type === 'öffnen') {
      // Identifizieren Sie die Sitzung während der ersten Verbindung ws.sessionId = `${msgData.fromUserId}-${msgData.toUserId}`;
    } anders {
      let sessionId = `${msgData.toUserId}-${msgData.fromUserId}`;
      wss.clients.forEach(client => {
        wenn (client.sessionId === sessionId) {
          client.send(message); //Sende eine Nachricht an die entsprechende Client-Verbindung}
      })  
    }
  })

  // Verbindung geschlossen ws.on('close', () => {
    console.log('Verbindung geschlossen');  
  });
});

Ebenso verfügt der Server über entsprechende Sende- und Empfangsmethoden. Den kompletten Beispielcode gibt es hier

Auf diese Weise können der Browser und der Server problemlos Nachrichten senden. Der Effekt ist wie folgt:

Die grünen Pfeile stehen für gesendete Nachrichten und die roten Pfeile für empfangene Nachrichten.

Herzschlag am Leben bleiben

Bei der tatsächlichen Verwendung von WebSocket kann es zu instabilen Verbindungen kommen, wenn über einen längeren Zeitraum keine Kommunikation stattfindet. Die durch diese unbekannten Situationen verursachte Verbindungsunterbrechung wirkt sich auf die Kommunikation zwischen Client und Server aus.

Um solche Situationen zu verhindern, gibt es eine Heartbeat-Keep-Alive-Methode: Der Client sendet in festgelegten Abständen einen Ping (wie einen Heartbeat), um dem Server mitzuteilen, dass ich noch am Leben bin, und der Server gibt ebenfalls einen Pong zurück, um dem Client mitzuteilen, dass der Server noch am Leben ist. Bei Ping/Pong handelt es sich eigentlich um eine gefälschte Nachricht, die nichts mit dem Unternehmen zu tun hat und auch als Heartbeat-Paket bezeichnet wird.

Nachdem die Verbindung erfolgreich hergestellt wurde, können Sie in einem festen Intervall, beispielsweise alle 60 Sekunden, Heartbeat-Pakete senden:

setzeIntervall(() => {
    ws.send('Dies ist eine Heartbeat-Nachricht');
}, 60000)

Zusammenfassen

Durch die obige Einführung sollte jeder ein gewisses Verständnis von WebSocket haben. Tatsächlich ist es nicht mysteriös. Hier ist eine kurze Zusammenfassung des Inhalts des Artikels. Wenn eine WebSocket-Instanz erstellt wird, wird eine HTTP-Anforderung mit einem speziellen Feld „Upgrade“ in der Anforderungsnachricht gesendet. Anschließend wird die Verbindung vom HTTP-Protokoll zum WebSocket-Protokoll konvertiert, sodass eine Vollduplex-Kommunikation zwischen Client und Server hergestellt wird. Über diese Kommunikationsverbindung können Informationen über die WebSocket-Sendemethode und das Onmessage-Ereignis ausgetauscht werden.

Oben finden Sie Einzelheiten zur Verwendung von JS WebSocket zur Implementierung eines einfachen Chats. Weitere Informationen zu WebSocket finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!