Heim >Web-Frontend >js-Tutorial >WebSocket-Client mit JavaScript

WebSocket-Client mit JavaScript

Linda HamiltonOriginal: 2024-12-03 00:33:11525Durchsuche

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"));

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.

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");
    ...
};

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"));

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.

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");
    ...
};
```
- 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!");
   };
```
- 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);
   };
```
- 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");
   };
```
- 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");
   };
```
- Diese Dienstprogrammfunktion fügt WebSocket-Ereignisse und -Nachrichten zum
  - insertAdjacentHTML("beforeend", "
  - " text ";
  - ) am Ende der Liste ein .

JavaScript css html for Error Logging using Event append function this input ul li http websocket issue

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Optimierung von Three.js: ey-TechnikenNächster Artikel：Optimierung von Three.js: ey-Techniken

In Verbindung stehende Artikel

Mehr sehen

WebSocket-Client mit JavaScript

Der Clientcode

The JavaScript logic

Initializing the WebSocket connection

Umgang mit WebSocket-Ereignissen

The JavaScript logic

Initializing the WebSocket connection

Senden von Nachrichten an den Server

Protokollierungsereignisse

Styling mit PicoCSS

Die Zusammenfassung, wie es funktioniert

Nächste Schritte

In Verbindung stehende Artikel