Phenquestions
Le protocole WebSocket permet une communication bidirectionnelle entre un client et un serveur. Ce processus est similaire à la façon dont se déroulent les appels sur votre téléphone : d'abord, vous établissez une connexion, puis vous pouvez commencer à communiquer les uns avec les autres. Le protocole WebSocket est utilisé presque partout - des jeux par navigateur multijoueurs aux applications de chat.
Cet article vous montre comment créer un protocole WebSocket et l'utiliser pour communiquer avec plusieurs utilisateurs.
Conditions préalables
Avant de passer au processus de création et d'utilisation d'un protocole WebSocket, vous devez d'abord installer quelques éléments nécessaires à ce processus. La première chose que vous devez installer est Node.js, une plate-forme côté serveur qui convertit le langage de programmation JavaScript en code machine qui vous permet d'exécuter JavaScript directement sur votre ordinateur. Pour installer Node.js, les utilisateurs de Windows peuvent simplement accéder au nœud officiel.js et cliquez sur le bouton vert LTS situé au centre de l'écran.
Pour les utilisateurs de Linux et macOS, cliquez sur le Téléchargements section dans le sous-en-tête du site Web.
Après avoir ouvert le Téléchargements section, vous verrez les fichiers d'installation pour les trois principales plates-formes. Sélectionnez un package pris en charge par votre système.
Exécutez le programme d'installation fourni avec les fichiers téléchargés et Node.js sera installé sur votre ordinateur. Pour vérifier si le programme a été installé, ouvrez le terminal et exécutez la commande suivante :
$ nœud -v
Après avoir installé Node.js, vous avez désormais accès à divers modules JavaScript, ce qui rendra votre travail plus efficace sur le long terme. Ouvrez le répertoire dans lequel vous souhaitez créer votre architecture client et serveur, puis ouvrez le terminal à l'intérieur de ce répertoire et exécutez la commande suivante :
$ npm init -y
Cette commande est utilisée pour créer le package.json qui vous permet de configurer et d'installer différents nœuds.paquets js. Installez le package de protocole WebSocket en exécutant la commande suivante dans le terminal :
$ npm installer ws
Créez trois fichiers, appelés indice.html, client.js et serveur.js. Comme l'indiquent les noms, ces fichiers JavaScript sont l'architecture client et serveur de notre protocole WebSocket. Maintenant, nous pouvons enfin commencer à écrire le code de nos applications client et serveur.
Création d'un serveur WebSocket
Pour créer un serveur WebSocket, nous allons commencer par écrire le code du serveur. Ouvrez le serveur.js fichier que vous avez créé dans votre éditeur de texte ou IDE dans la section précédente et entrez les lignes suivantes dans le fichier.
const WebSocket = require('ws');const ws = nouveau WebSocket.Serveur(port : 8080 );
console.log("Serveur démarré");
ws.on('connexion', (wss) =>
console.log("Un nouveau client connecté")
wss.send('Bienvenue sur le serveur!');
wss.on('message', (message) =>
console.log('Serveur reçu : $message');
wss.send('Votre message : ' + message);
);
);
Maintenant, nous allons expliquer ce que chaque ligne fait plus en détail.
Explication du code
Comme mentionné précédemment, certains modules intégrés sont disponibles dans Node.js qui rendent votre travail beaucoup plus facile. Pour importer ces modules, nous utiliserons le exiger mot-clé.
const WebSocket = require('ws');const ws = nouveau WebSocket.Serveur(port : 8080 );
console.log("Serveur démarré");
La première ligne est utilisée pour importer le Node.js WebSocket module. En utilisant ce module, dans la ligne suivante, nous créons notre serveur WebSocket, qui écoute sur le port 8080. le console.Journal() la ligne est simplement là pour nous faire savoir que le serveur a démarré. Vous verrez cela apparaître dans votre terminal lorsque vous exécuterez la commande suivante dans le terminal :
serveur de nœud $
Dans la ligne suivante, nous établissons une connexion entre le serveur et le client.
ws.on('connexion', (wss) =>console.log("Un nouveau client connecté")
);
Une fois la connexion établie, le wss.la ligne send() envoie un message au client. Dans ce cas, le message est "Bienvenue sur le serveur."
wss.send('Bienvenue sur le serveur!');Enfin, le wss.on ('message') est pour que le serveur reçoive le message du client. Pour confirmation, le serveur renvoie ce message au client dans la dernière ligne.
wss.on('message', (message) =>console.log('Serveur reçu : $message');
wss.send('Votre message : ' + message);
);
Création d'un client WebSocket
Pour le côté client, nous avons besoin à la fois de l'index.html et le client.fichier js. Bien sûr, vous pouvez simplement ajouter le contenu du client.js dans votre index.html, mais je préfère les garder séparés. Regardons d'abord le client.code js. Ouvrez le fichier et entrez les lignes suivantes à l'intérieur du fichier :
const socket = new WebSocket('ws://localhost:8080');prise.addEventListener('open', () =>
console.log('Connecté au serveur!');
);
prise.addEventListener('message', (msg) =>
console.log('Client reçu : $msg.Les données');
);
const sendMsg = () =>
prise.envoyer('Comment ça va amigo!');
Explication du code
Comme avec le serveur.js, nous allons créer un nouveau WebSocket qui écoute le port 8080, qui peut être vu dans le hôte local : 8080 partie du code.
const socket = new WebSocket('ws://localhost:8080');Dans la ligne suivante, addEventListener fait écouter à votre client tous les événements qui se produisent actuellement. Dans ce cas, il s'agirait de créer et de démarrer le serveur. Une fois la connexion établie, le client envoie un message au terminal.
prise.addEventListener('open', () =>console.log('Connecté au serveur!');
);
Encore une fois, le client écoute tous les événements en cours. Lorsque le serveur envoie un message, le client le reçoit puis affiche le message dans le terminal.
prise.addEventListener('message', (msg) =>console.log('Client reçu : $msg.Les données');
);
Les dernières lignes sont simplement une fonction où le client envoie un message au serveur. Nous allons le connecter à un bouton dans notre fichier html pour mieux comprendre comment cela fonctionne.
const sendMsg = () =>prise.envoyer('Comment ça va amigo!');
Préparation d'un fichier HTML
Enfin, ouvrez l'index.html et ajoutez une référence à votre client.js à l'intérieur. Dans mon cas, je vais simplement ajouter les lignes de code suivantes :
Comme vous pouvez le voir dans les lignes ci-dessous, src (à l'intérieur de la balise script) fait référence au fichier javascript du client. La fonction sendMsg, qui a été créée dans le client.js, a également été connecté à la fonction onClick du bouton.
Tout mettre ensemble
Vous pouvez maintenant commencer à tester votre architecture client et serveur. Tout d'abord, ouvrez le terminal et exécutez la commande suivante pour démarrer votre serveur :
serveur de nœud $
Après avoir démarré votre serveur, ouvrez le répertoire dans lequel votre index.html est présent, et double-cliquez dessus pour l'ouvrir dans votre navigateur. Vous verrez apparaître le message suivant dans le terminal indiquant qu'un client s'est connecté :
Vous pouvez également vérifier les messages envoyés du serveur au client en appuyant sur le bouton clic droit puis en ouvrant le Inspecter la fenêtre. Dans cette fenêtre, cliquez sur le Console section, et vous pourrez voir les messages envoyés depuis le serveur.
Une fois que vous avez cliqué sur le bouton, le serveur et le client pourront s'envoyer et recevoir des messages entre eux.
Serveur:
Client:
Voilà, votre connexion WebSocket est établie!
Conclusion
Le protocole WebSocket est un excellent moyen d'établir une communication entre un client et un serveur. Ce protocole est utilisé dans plusieurs domaines, notamment les jeux par navigateur multijoueurs, les systèmes de discussion de diverses plateformes de médias sociaux et même les processus de collaboration entre codeurs.
