12
Oct

Créer un chat instantané avec socket-io, vuejs et expressjs

  1. Créer le serveur express

Nous allons d’abord installer le serveur expres js. Créons le dossier dans lequel nous allons travailler et initions npm

Après nous avons besoin d’installer et configurer le serveur express js ainsi que socket.io.

Créez server.js:

Démarrer le serveur en lançant la commande suivante dans le terminal : nodemon server.js

ps: Si vous n’avez pas nodemon d’installer (il permet entre autres de restart automatiquement le serveur lors d’un changement de configuration) :

2. Installer Vue Cli

Pour installer vue cli globalement, lancez cette commande dans votre terminal:

Ensuite nous pouvons créer et configurer notre côté client en lançant:

Editez App.vue:

Créez Chat.vue:

Pour styliser notre application, nous allons installer bootstrap:

Et dans main.js

Maintenant nous avons besoin du paquet npm ‘socket.io-client’:

Dans Chat.vue:

Maintenant dans le terminal où on a démarré le serveur, vous devriez voir apparaitre les socket.id.

3. Implémenter la fonction d’envoi de message

Dans notre component Chat.vue, nous devons ajouter la function sendMessage où nous allons envoyer un message au serveur via socket.io :

Dans server.js nous recevons les messages venant du component Chat.vue:

Ensuite nous renvoyons tous les messages aux clients connectés à ce serveur.

Et dans notre Chat.vue nous recevons les messages lorsque mounted:

Voici à quoi devrait ressembler votre Chat.vue à la fin:

Et notre server.js:

 

Pas de commentaire

Leave a Comment

Your email address will not be published. Required fields are marked *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Contactez-nous

Retourner sur le site

Formulaire de contact

Votre nom (obligatoire)

Votre email (obligatoire)

Votre téléphone (obligatoire)

Sujet

Votre message