Programme d'exemples WebSocket
Le protocole WebSocket permet à la communication bidirectionnelle de se produire entre un client et un serveur. Ce processus est similaire à la façon dont les appels sur votre téléphone ont lieu: d'abord, vous établissez une connexion, puis vous pouvez commencer à communiquer entre eux. Le protocole WebSocket est utilisé presque partout - des jeux de navigateur multijoueur pour discuter des applications.
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 requis pour ce processus. La première chose que vous devez installer est le nœud.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 le nœud.JS, les utilisateurs de Windows peuvent simplement aller au nœud officiel.Site Web JS et cliquez sur le bouton LTS vert trouvé au centre de l'écran.
Pour les utilisateurs de Linux et MacOS, cliquez sur le Téléchargements Section dans le sous-chef du site Web.
Après avoir ouvert le Téléchargements Section, vous verrez des fichiers d'installation pour les trois principales plateformes. Sélectionnez un package pris en charge par votre système.
Exécutez le programme d'installation qui est livré avec les fichiers téléchargés et nœud.JS sera installé sur votre ordinateur. Pour vérifier si le programme a été installé, ouvrez le terminal et émettez la commande suivante:
$ node -v
Après avoir installé le nœud.JS, vous avez maintenant accès à divers modules JavaScript, ce qui rendra votre travail plus efficace à 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.Fichier JSON qui vous permet de configurer et d'installer différents nœuds.Packages JS. Installez le package du protocole WebSocket en émettant la commande suivante dans le terminal:
$ npm installer ws
Créer trois fichiers, appelés indice.HTML, client.JS et serveur.js. Comme indiqué par 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 commencerons par écrire le code pour le serveur. Ouvrir 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.Server (port: 8080);
console.journal ("serveur démarré");
WS.sur ('connexion', (wss) =>
console.journal ("un nouveau client connecté")
WSS.Envoyer ('Bienvenue sur le serveur!');
WSS.sur ('message', (message) =>
console.log ('serveur reçu: $ message');
WSS.Envoyer ('Got Your Message:' + Message);
);
);
Maintenant, nous expliquerons ce que fait chaque ligne plus en détail.
Explication du code
Comme mentionné précédemment, il existe des modules intégrés disponibles dans le nœud.js qui facilite votre travail. Pour importer ces modules, nous utiliserons le exiger mot-clé.
const WebSocket = require ('ws');const ws = nouveau WebSocket.Server (port: 8080);
console.journal ("serveur démarré");
La première ligne est utilisée pour importer le nœud.Module JS WebSocket. En utilisant ce module, dans la ligne suivante, nous créons notre serveur WebSocket, qui écoute sur le port 8080. Le console.enregistrer() La ligne est simplement là pour nous faire savoir que le serveur a commencé. Vous verrez que cela apparaît dans votre terminal lorsque vous exécutez 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.sur ('connexion', (wss) =>console.journal ("un nouveau client connecté")
);
Une fois une connexion établie, le WSS.Send () Line envoie un message au client. Dans ce cas, le message est «bienvenu sur le serveur."
WSS.Envoyer ('Bienvenue sur le serveur!');Enfin, le WSS.on ('message') est que le serveur reçoive le message du client. Pour confirmation, le serveur renvoie ce message au client dans la dernière ligne.
WSS.sur ('message', (message) =>console.log ('serveur reçu: $ message');
WSS.Envoyer ('Got Your Message:' + Message);
);
Création d'un client WebSocket
Pour le côté client, nous avons besoin à la fois de l'index.Fichier HTML et le client.fichier js. Bien sûr, vous pouvez simplement ajouter le contenu du client.Fichier JS dans votre index.Fichier HTML, mais je préfère les garder séparés. Laissez-nous d'abord regarder 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.journal ('connecté au serveur!');
);
prise.addEventListener ('message', (msg) =>
console.log ('Client reçu: $ msg.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 LocalHost: 8080 Section du code.
const socket = new WebSocket ('ws: // localhost: 8080');Dans la ligne suivante, addEventListener fait que votre client écoute tous les événements qui se produisent actuellement. Dans ce cas, il serait de créer et de démarrer le serveur. Une fois la connexion établie, le client publie un message au terminal.
prise.addEventListener ('open', () =>console.journal ('connecté au serveur!');
);
Encore une fois, le client écoute tous les événements qui se produisent actuellement. 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.données');
);
Les dernières lignes sont simplement une fonction où le client envoie un message au serveur. Nous allons connecter cela à un bouton de notre fichier HTML pour une meilleure compréhension de la façon dont cela fonctionne.
const Sendmsg = () =>prise.Envoyer («comment ça va amigo!');
Préparer un fichier HTML
Enfin, ouvrez l'index.Fichier HTML et ajoutez une référence à votre client.Fichier JS à l'intérieur. Dans mon cas, j'ajouterai simplement les lignes de code suivantes:
Comme vous pouvez le voir dans les lignes ci-dessous, SRC (à l'intérieur de la balise de script) fait référence au fichier JavaScript client. La fonction SendMsg, qui a été créée dans le client.Le fichier JS, a également été connecté à la fonction onclick du bouton.
Tout rassembler
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.Le fichier HTML est présent, et double-cliquez dessus pour l'ouvrir dans votre navigateur. Vous verrez le message suivant apparaître 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 avec le bouton droit, puis en ouvrant le Inspecter fenêtre. Dans cette fenêtre, cliquez sur le Console Section, et vous pourrez voir les messages envoyés à partir du serveur.
Une fois que vous avez cliqué sur le bouton, le serveur et le client pourront envoyer et recevoir des messages les uns aux autres.
Serveur:
Client:
Voilà, votre connexion WebSocket a été é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 des jeux de navigateur multijoueur, des systèmes de chat de diverses plateformes de médias sociaux et même des processus de collaboration entre les codeurs.