WebSocket-Client mit JavaScript-js-Tutorial-php.cn

WebSocket Client with JavaScript

Im vorherigen Artikel dieser Serie, „WebSocket mit JavaScript und Bun“, haben wir untersucht, wie man einen Server initialisiert, der sowohl HTTP-Anfragen als auch WebSocket-Verbindungen verarbeiten kann.

Wir haben eine Regel für HTTP-Anfragen definiert, um die Datei index.html bereitzustellen, wenn eine Anfrage an / gestellt wird. Die Datei index.html enthält die clientseitige Logik zum Herstellen einer Verbindung mit dem WebSocket-Server und zum Senden von Nachrichten als Client.

Der Clientcode

In der in „WebSocket mit JavaScript und Bun“ erläuterten Abrufmethode des Servers ist dieser Code implementiert:

  if (url.pathname === "/") 
    return new Response(Bun.file("./index.html"));

Nach dem Login kopieren

Das bedeutet, dass bei einer Browseranfrage an http://localhost:8080/ der Inhalt der Datei index.html an den Browser gesendet wird.
Der HTML-Code rendert ein einfaches Formular mit Eingabetext und einer Schaltfläche und liefert die Logik für die Verbindung zum WebSocket-Server als Client.

<!doctype html>
<html>
    <head>
        <title>WebSocket with Bun and JavaScript</title>
        <script>
            let echo_service;
            append = function (text) {
                document
                    .getElementById("websocket_events")
                    .insertAdjacentHTML("beforeend", "<li>" + text + ";</li>");
            };
            window.onload = function () {
                echo_service = new WebSocket("ws://127.0.0.1:8080/chat");
                echo_service.onmessage = function (event) {
                    append(event.data);
                };
                echo_service.onopen = function () {
                    append("? Connected to WebSocket!");
                };
                echo_service.onclose = function () {
                    append("Connection closed");
                };
                echo_service.onerror = function () {
                    append("Error happens");
                };
            };

            function sendMessage(event) {
                console.log(event);
                let message = document.getElementById("message").value;
                echo_service.send(message);
            }
        </script>
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
        />
    </head>

    <body>
        <main>



<h2>
  
  
  Explaining the client code
</h2>

<p>This code creates a simple <strong>WebSocket client</strong> in a browser to interact with a WebSocket server. Here's a detailed explanation of its components:</p>


<hr>

<h3>
  
  
  The HTML structure
</h3>



<pre class="brush:php;toolbar:false"><!doctype html>
<html>
    <head>
        <title>WebSocket with Bun and JavaScript</title>
    </head>
    <body>
        <main>



<ul>
<li>The input field (<input>
<li>The submit button (<input type="button">): when clicked, it triggers the sendMessage(event) function to send the typed message to the server.

Nach dem Login kopieren

The messages/events log (

The JavaScript logic

Initializing the WebSocket connection

window.onload = function () {
    echo_service = new WebSocket("ws://127.0.0.1:8080/chat");
    ...
};

Nach dem Login kopieren

WebSocket("ws://127.0.0.1:8080/chat"): erstellt eine neue WebSocket-Verbindung zum Server unter 127.0.0.1 auf Port 8080, insbesondere dem /chat-Endpunkt.
Die Variable echo_service enthält die WebSocket-Instanz, die die Kommunikation mit dem Server erleichtert.

Umgang mit WebSocket-Ereignissen

Der WebSocket-Client verfügt über vier Hauptereignishandler:

onopen (die Verbindung wird hergestellt)

  if (url.pathname === "/") 
    return new Response(Bun.file("./index.html"));

Nach dem Login kopieren

Die Onopen-Funktion wird ausgelöst, wenn die Verbindung zum Server erfolgreich hergestellt wurde.
Es wird eine Nachricht an das Protokoll angehängt: „? Verbunden mit WebSocket!“.

onmessage (eine Nachricht wird empfangen)

<!doctype html>
<html>
    <head>
        <title>WebSocket with Bun and JavaScript</title>
        <script>
            let echo_service;
            append = function (text) {
                document
                    .getElementById("websocket_events")
                    .insertAdjacentHTML("beforeend", "<li>" + text + ";</li>");
            };
            window.onload = function () {
                echo_service = new WebSocket("ws://127.0.0.1:8080/chat");
                echo_service.onmessage = function (event) {
                    append(event.data);
                };
                echo_service.onopen = function () {
                    append("? Connected to WebSocket!");
                };
                echo_service.onclose = function () {
                    append("Connection closed");
                };
                echo_service.onerror = function () {
                    append("Error happens");
                };
            };

            function sendMessage(event) {
                console.log(event);
                let message = document.getElementById("message").value;
                echo_service.send(message);
            }
        </script>
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
        />
    </head>

    <body>
        <main>



<h2>
  
  
  Explaining the client code
</h2>

<p>This code creates a simple <strong>WebSocket client</strong> in a browser to interact with a WebSocket server. Here's a detailed explanation of its components:</p>


<hr>

<h3>
  
  
  The HTML structure
</h3>



<pre class="brush:php;toolbar:false"><!doctype html>
<html>
    <head>
        <title>WebSocket with Bun and JavaScript</title>
    </head>
    <body>
        <main>



<ul>
<li>The input field (<input>
<li>The submit button (<input type="button">): when clicked, it triggers the sendMessage(event) function to send the typed message to the server.

Nach dem Login kopieren

The messages/events log (
The JavaScript logic

Initializing the WebSocket connection
```
window.onload = function () {
    echo_service = new WebSocket("ws://127.0.0.1:8080/chat");
    ...
};
```
Nach dem Login kopieren
Nach dem Login kopieren
- Die Onmessage-Funktion wird immer dann ausgelöst, wenn eine Nachricht vom Server empfangen wird.
- Die Nachricht des Servers (event.data) wird mithilfe der Append-Funktion an das Ereignisprotokoll angehängt.
1. onclose (die Verbindung wird geschlossen)
```
   echo_service.onopen = function () {
       append("? Connected to WebSocket!");
   };
```
Nach dem Login kopieren
- Die Onclose-Funktion wird ausgelöst, wenn die Verbindung zum Server geschlossen wird (z. B. wenn der Server die Verbindung trennt).
- Die Funktion hängt „Verbindung geschlossen“ an das Ereignisprotokoll an.
1. onerror (ein Fehler ist aufgetreten)
```
   echo_service.onmessage = function (event) {
       append(event.data);
   };
```
Nach dem Login kopieren
- Die onerror-Funktion wird ausgelöst, wenn während der Kommunikation ein Fehler auftritt.
- Die Funktion protokolliert „Fehler passiert“, um auf das Problem hinzuweisen.
Senden von Nachrichten an den Server
```
   echo_service.onclose = function () {
       append("Connection closed");
   };
```
Nach dem Login kopieren
- Die sendMessage-Funktion wird aufgerufen, wenn auf die Schaltfläche „Senden“ geklickt wird.
- document.getElementById("message").value: Ruft den vom Benutzer in das Eingabefeld eingegebenen Text ab.
- echo_service.send(message): Es sendet die Nachricht des Benutzers an den WebSocket-Server.
Protokollierungsereignisse
```
   echo_service.onerror = function () {
       append("Error happens");
   };
```
Nach dem Login kopieren
- Diese Dienstprogrammfunktion fügt WebSocket-Ereignisse und -Nachrichten zum
  - insertAdjacentHTML("beforeend", "
  - " text ";
  - ) am Ende der Liste ein .