WebSocket avec JavaScript et Bun

Garantir une communication efficace et transparente entre le client et le serveur est essentiel lors de la création d'applications Web modernes en temps réel. Les requêtes HTTP traditionnelles, comme celles utilisées dans les sondages, sont sans état et unidirectionnelles. Le client fait une requête (par exemple, en utilisant fetch ou axios) au serveur, et le serveur répond avant la fermeture de la connexion. Si le client a besoin de nouvelles données, il doit envoyer de nouvelles requêtes à plusieurs reprises à intervalles réguliers, créant une latence inutile et augmentant la charge sur le client et le serveur.

Par exemple, si vous créez une application de chat en direct ou un outil de suivi du cours des actions, les sondages obligeraient le client à demander des mises à jour toutes les secondes environ, même s'il n'y a pas de nouvelles données à récupérer. C'est là que les WebSockets brillent.

---

L'approche WebSocket

Les

WebSockets fournissent un canal de communication bidirectionnel persistant entre le client et le serveur. Une fois la connexion établie, le serveur peut instantanément transmettre les mises à jour au client sans attendre une nouvelle demande. Cela rend les WebSockets idéaux pour les scénarios où les mises à jour en temps réel sont essentielles, tels que :

• Envoi de messages de chat dans une application de chat en direct.
• Diffusion de notifications ou de mises à jour à plusieurs utilisateurs simultanément.
• Diffusion de données en temps réel, telles que les cours des actions, les résultats sportifs ou les états du jeu.

L'utilisation de Vanilla JavaScript côté client et du runtime Bun côté serveur rend la mise en œuvre de WebSockets simple et efficace. Par exemple :

• Le client peut envoyer un message au serveur, et le serveur peut diffuser instantanément ce message aux autres clients connectés.
• Une connexion persistante garantit aucune surcharge répétitive liée au rétablissement des connexions, contrairement à l'interrogation.

Dans ce scénario, les WebSockets offrent une latence plus faible, une charge de serveur réduite et une expérience utilisateur plus fluide que les méthodes d'interrogation traditionnelles.

---

Construire un projet WebSocket

Étape 1 : mettre en place un projet Bun

Tout d’abord, assurez-vous que le Bun est installé. Créez ensuite un nouveau projet Bun, créez un nouveau répertoire vide, entrez dans le nouveau répertoire et initialisez le projet via la commande bun init :

mkdir websocket-demo
cd websocket-demo
bun init

La commande bun init créera le fichier package.json, un fichier index.ts "hello world", le fichier .gitignore, le fichier tsconfig.json pour la configuration dactylographié et un fichier README.md.

Maintenant, vous pouvez commencer à créer votre code JavaScript. Je vais vous montrer l'intégralité du script ; nous explorerons ensuite toutes les parties pertinentes. Vous pouvez modifier le fichier index.ts :

console.log("? Hello via Bun! ?");
const server = Bun.serve({
  port: 8080, // defaults to $BUN_PORT, $PORT, $NODE_PORT otherwise 3000
  fetch(req, server) {
    const url = new URL(req.url);
    if (url.pathname === "/") return new Response(Bun.file("./index.html"));
    if (url.pathname === "/surprise") return new Response("?");

    if (url.pathname === "/chat") {
      if (server.upgrade(req)) {
        return; // do not return a Response
      }
      return new Response("Upgrade failed", { status: 400 });
    }

    return new Response("404!");
  },
  websocket: {
    message(ws, message) {
      console.log("✉️ A new Websocket Message is received: " + message);
      ws.send("✉️ I received a message from you:  " + message);
    }, // a message is received
    open(ws) {
      console.log("? A new Websocket Connection");
      ws.send("? Welcome baby");
    }, // a socket is opened
    close(ws, code, message) {
      console.log("⏹️ A Websocket Connection is CLOSED");
    }, // a socket is closed
    drain(ws) {
      console.log("DRAIN EVENT");
    }, // the socket is ready to receive more data
  },
});
console.log(`? Server (HTTP and WebSocket) is launched ${server.url.origin}`);

Documenter le code d'un serveur WebSocket de base à l'aide de Bun

Vous trouverez ci-dessous une ventilation du code fourni, expliquant chaque partie et ses fonctionnalités.

---

Initialisation du serveur

mkdir websocket-demo
cd websocket-demo
bun init

La méthode Bun.serve initialise un serveur capable de gérer à la fois les requêtes HTTP et WebSocket.

• port : 8080 : Spécifie le port sur lequel le serveur écoute. La valeur par défaut est les variables d'environnement communes ou 3 000 si elles ne sont pas spécifiées. Dans cet exemple, le port est codé en dur sur 8080. Si vous souhaitez fournir une méthode plus flexible, vous devez supprimer la ligne de port et permettre à Bun de gérer le port. Vous pouvez donc exécuter le script via export BUN_PORT=4321; chignon exécuter index.ts

---

Gestion des requêtes HTTP

console.log("? Hello via Bun! ?");
const server = Bun.serve({
  port: 8080, // defaults to $BUN_PORT, $PORT, $NODE_PORT otherwise 3000
  fetch(req, server) {
    const url = new URL(req.url);
    if (url.pathname === "/") return new Response(Bun.file("./index.html"));
    if (url.pathname === "/surprise") return new Response("?");

    if (url.pathname === "/chat") {
      if (server.upgrade(req)) {
        return; // do not return a Response
      }
      return new Response("Upgrade failed", { status: 400 });
    }

    return new Response("404!");
  },
  websocket: {
    message(ws, message) {
      console.log("✉️ A new Websocket Message is received: " + message);
      ws.send("✉️ I received a message from you:  " + message);
    }, // a message is received
    open(ws) {
      console.log("? A new Websocket Connection");
      ws.send("? Welcome baby");
    }, // a socket is opened
    close(ws, code, message) {
      console.log("⏹️ A Websocket Connection is CLOSED");
    }, // a socket is closed
    drain(ws) {
      console.log("DRAIN EVENT");
    }, // the socket is ready to receive more data
  },
});
console.log(`? Server (HTTP and WebSocket) is launched ${server.url.origin}`);

• fetch(req, server) : gère les requêtes HTTP entrantes.
• Chemin racine / : sert le fichier index.html.
• /chemin surprise : renvoie une réponse emoji surprise amusante ?.
• /chat Path : tente de « mettre à niveau » la connexion vers une connexion WebSocket. Si la mise à niveau échoue, elle renvoie une réponse d'erreur 400.

---

Gestionnaires WebSocket

La clé websocket définit les gestionnaires d'événements pour gérer les connexions WebSocket.

? Connexion ouverte (ouverte)

const server = Bun.serve({
  port: 8080, // defaults to $BUN_PORT, $PORT, $NODE_PORT otherwise 3000
  ...
});

Déclenché lorsqu'un client établit une connexion WebSocket.

• ws.send(...) : envoie un message de bienvenue au client qui a demandé la connexion..

✉️ Recevoir un message (message)

fetch(req, server) {
  const url = new URL(req.url);

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

  if (url.pathname === "/surprise") 
    return new Response("?");

  if (url.pathname === "/chat") {
    if (server.upgrade(req)) {
      return; // do not return a Response
    }
    return new Response("Upgrade failed", { status: 400 });
  }

  return new Response("404!");
}

Déclenché lorsque le serveur reçoit un message du client.

• ws.send(...) : renvoie le message reçu avec une confirmation.

⏹️ Connexion Fermer (fermer)

open(ws) {
  console.log("? A new Websocket Connection");
  ws.send("? Welcome baby");
}

Déclenché lorsqu'une connexion WebSocket est fermée.

Paramètres :

• code : code raison de la fermeture de la connexion.
• message : détails supplémentaires sur la fermeture.

? Événement de vidange (vidange)

message(ws, message) {
  console.log("✉️ A new Websocket Message is received: " + message);
  ws.send("✉️ I received a message from you: " + message);
}

L'événement drain est déclenché lorsque le WebSocket est prêt à accepter plus de données après avoir été temporairement submergé.

---

Enregistrez le lancement du serveur

close(ws, code, message) {
  console.log("⏹️ A Websocket Connection is CLOSED");
}

Enregistre l'URL du serveur sur la console une fois qu'il est en cours d'exécution.

---

Récapitulatif de son fonctionnement

1. Requêtes HTTP : gère les requêtes HTTP standard (par exemple, servir un fichier ou répondre avec un statut).
2. Mise à niveau WebSocket : met à niveau les connexions HTTP vers les connexions WebSocket lorsque les clients se connectent à /chat.
3. Communication en temps réel : gère la communication persistante entre le serveur et les clients à l'aide d'événements WebSocket (ouverture, message, fermeture, vidange).

---

Exécuter le serveur

Une fois que vous avez votre fichier index.ts, vous pouvez démarrer le serveur via bun run :

drain(ws) {
  console.log("DRAIN EVENT");
}

Le serveur est prêt et opérationnel. Maintenant, nous pouvons implémenter le client.

Prochaines étapes

Maintenant que nous comprenons la structure du script de gestion du WebSocket, les prochaines étapes sont :

• implémenter le HTML pour le client WebSocket ;
• Implémentation d'une logique de diffusion pour transférer les messages d'un client vers tous les clients connectés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!