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

mkdir chat-socket && cd chat-socket && npm init

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

npm install express socket.io bufferutil utf-8-validate --save

Créez server.js:

const express = require('express');
const app = express();
const io = require('socket.io')(server);

server = app.listen(3001, function(){
    console.log('server is running on port 3001');
});

io.on('connection', function(socket) {
    console.log(socket.id);
});

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) :

npm install nodemon -g

2. Installer Vue Cli

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

npm install -g @vue/cli

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

vue create chat-client

Editez App.vue:

Créez Chat.vue:

Pour styliser notre application, nous allons installer bootstrap:

npm install bootstrap jquery popper.js --save

Et dans main.js

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

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

npm install socket.io-client --save

Dans Chat.vue:

import io from 'socket.io-client';

export default {
    data() {
        return {
            user: '',
            message: '',
            messages: [],
            socket : io('localhost:3001')
        }
    },
    methods: {
        sendMessage(e) {
            e.preventDefault();
        }
    },
}

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 :

 methods: {
        sendMessage(e) {
            e.preventDefault();

            this.socket.emit('SEND_MESSAGE', {
                user: this.user,
                message: this.message
            });
            this.message = ''
        }
    },

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

const express = require('express');


const app = express();



const server = app.listen(3001, function() {
    console.log('server running on port 3001');
});


const io = require('socket.io')(server);

io.on('connection', function(socket) {
    console.log(socket.id)
    socket.on('SEND_MESSAGE', function(data) {
        io.emit('MESSAGE', data)
    });
});

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

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

   mounted() {
        this.socket.on('MESSAGE', (data) => {
            this.messages = [...this.messages, data];
            // you can also do this.messages.push(data)
        });
    }

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

Et notre server.js:

const express = require('express');


const app = express();



const server = app.listen(3001, function() {
    console.log('server running on port 3001');
});


const io = require('socket.io')(server);

io.on('connection', function(socket) {
    console.log(socket.id)
    socket.on('SEND_MESSAGE', function(data) {
        io.emit('MESSAGE', data)
    });
});