Dans ce chapitre, nous allons développé la partie back-end d'un chat web
Pré-requis :
- Une maitrise du HTML/CSS
- Une maitrise de JavaScript
- Une maitrise de Node.JS
Qu’est-ce qu'un web socket ?
Un web socket est un protocole permettant de créer des canaux de communications entre le client et le server. Il va permettre de partager des données sans utiliser des requètes. On peut l'utiliser pour faire un chat comme ceux de Discord, SnapChat, ...
Créer notre socket
La partie serveur
Durant cette partie, nous allons utiliser l'ESM.
Pour commencer ce chapitre, on va venir créer un dossier pour notre serveur, on va ajouter un dossier public pour ajouter nos fichiers html/css qu'on a fait dans le chapitre précédent, ensuite on va insérer un fichier index.js à la racine de notre dossier du serveur. On va initialiser notre package et installer le module express (optionnel) et socket.io :
Ensuite, on va ajouter une ligne dans notre package.json pour utiliser l'ESM :
Parfait ! Maintenant, on va importer tous les modules dans notre fichier index.js.
On va ensuite les appeler pour créer le serveur avec express et le relié avec le web socket en utilisant socket.io et le module http intégré dans Node.JS.
Suite à cela, il faudra préciser le dossier statique qui est public contenant nos fichiers HTML/CSS :
Ensuite, nous allons utilisé la fonction d'écoute du module http pour connecter notre serveur sur le port qui est 8000.
Vous pouvez modifier le port à votre guise.
Ok! On peut enfin passer à l'élément le plus important qui est le web socket ! On va venir se connecter à l'événement connection pour savoir quand l'utilisateur va se connecter sur le web socket.
On va aussi écouter l'événement new message pour les messages qu'on recevra et l'événement disconnect quand l'utilisateur aura quitté le web socket. Pour l'événement new message, on va faire en sorte qu'on reçoit en paramètre un object contenant une clé message et pseudo pour ensuite les émettre à tous les clients connectés sauf celui qui a créer le message.
Le code de la partie serveur se trouve sur le github du projet.
La partie client
Pour cette partie, on va retourner dans notre dossier html, on va ajouter le module socket.io en ajoutant dans la balise head :
Ensuite dans le body, on va venir ajouter une balise script avec une ligne qui va se connecter au web socket :
Modifier l'adresse selon votre nom de domaine/ip et le port que vous avez.
On va venir créer une fonction newMessage pour créer un nouveau message et l'ajouter dans notre chat box.
Ensuite, on va créer une fonction sendMessage pour envoyer un nouveau message au serveur qui va l'envoyer aux autres utilisateurs et aussi le créer côté client.
On va aussi connecter la fonction sendMessage au boutton qui se trouve dans la classe input :
Pour terminer, on va écouter l'événement new message et créer le message dans la chat box quand on recevra un nouveau message.
Vous pouvez supprimé les exemples dans la div message_body
Le code de la partie client se trouve sur le github du projet.
Voici le résultat :
Client 1 :
Client 2 :
Rejoindre la communauté de développeurs
Rejoins notre communauté de développeurs pour progresser et t'améliorer
Passer au chapitre suivant :