Maison >interface Web >js tutoriel >Client WebSocket avec JavaScript

Client WebSocket avec JavaScript

Linda Hamiltonoriginal: 2024-12-03 00:33:11525parcourir

WebSocket Client with JavaScript

Dans l'article précédent de cette série, "WebSocket avec JavaScript et Bun", nous avons exploré comment initialiser un serveur capable de gérer à la fois les requêtes HTTP et les connexions WebSocket.

Nous avons défini une règle pour que les requêtes HTTP servent le fichier index.html lorsqu'une requête est adressée à /. Le fichier index.html contient la logique côté client pour établir une connexion avec le serveur WebSocket et envoyer des messages en tant que client.

Le code client

Dans la méthode fetch du serveur expliquée dans "WebSocket avec JavaScript et Bun" est implémenté ce code :

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

Cela signifie que lorsqu'une requête du navigateur est faite à http://localhost:8080/, le contenu du fichier index.html est envoyé au navigateur.
Le HTML affichera un formulaire simple avec du texte d'entrée et un bouton et enverra la logique de connexion au serveur WebSocket en tant que 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") : crée une nouvelle connexion WebSocket au serveur à 127.0.0.1 sur le port 8080, en particulier le point de terminaison /chat.
La variable echo_service contient l'instance WebSocket, qui facilite la communication avec le serveur.

Gestion des événements WebSocket

Le client WebSocket dispose de quatre gestionnaires d'événements principaux :

onopen (la connexion est établie)

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

La fonction onopen est déclenchée lorsque la connexion au serveur est établie avec succès.
Il ajoute un message au journal disant : "? Connecté à WebSocket !".

onmessage (un message est reçu)

<!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");
    ...
};
```
- La fonction onmessage est déclenchée chaque fois qu'un message est reçu du serveur.
- Le message du serveur (event.data) est ajouté au journal des événements à l'aide de la fonction append.
1. onclose (la connexion est fermée)
```
   echo_service.onopen = function () {
       append("? Connected to WebSocket!");
   };
```
- La fonction onclose est déclenchée lorsque la connexion au serveur est fermée (par exemple, le serveur se déconnecte).
- La fonction ajoute « Connexion fermée » au journal des événements.
1. onerror (une erreur s'est produite)
```
   echo_service.onmessage = function (event) {
       append(event.data);
   };
```
- La fonction onerror est déclenchée lorsqu'une erreur survient lors de la communication.
- La fonction enregistre « Une erreur se produit » pour indiquer le problème.
Envoi de messages au serveur
```
   echo_service.onclose = function () {
       append("Connection closed");
   };
```
- La fonction sendMessage est appelée lorsque le bouton "Soumettre" est cliqué.
- document.getElementById("message").value : il récupère le texte saisi par l'utilisateur dans la zone de saisie.
- echo_service.send(message) : il envoie le message de l'utilisateur au serveur WebSocket.
Journalisation des événements
```
   echo_service.onerror = function () {
       append("Error happens");
   };
```
- Cette fonction utilitaire ajoute des événements et des messages WebSocket au
  - insertAdjacentHTML("beforeend", "
  - " text ";
  - ) à la fin de la liste .

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Optimisation de Three.js : ey TechniquesArticle suivant：Optimisation de Three.js : ey Techniques

Articles Liés

Voir plus

Client WebSocket avec JavaScript

Le code client

The JavaScript logic

Initializing the WebSocket connection

Gestion des événements WebSocket

The JavaScript logic

Initializing the WebSocket connection

Envoi de messages au serveur

Journalisation des événements

Styliser avec PicoCSS

Le récapitulatif, comment ça marche

Prochaines étapes

Articles Liés