Client WebSocket avec JavaScript-js tutoriel-php.cn

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

Copier après la connexion

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.

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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.

Copier après la connexion

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");
    ...
};
```
Copier après la connexion
Copier après la connexion
- 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!");
   };
```
Copier après la connexion
- 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);
   };
```
Copier après la connexion
- 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");
   };
```
Copier après la connexion
- 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");
   };
```
Copier après la connexion
- Cette fonction utilitaire ajoute des événements et des messages WebSocket au
  - insertAdjacentHTML("beforeend", "
  - " text ";
  - ) à la fin de la liste .