Chat online realtime din trei pasi – 2/3

chat-online-thumb

In postul anterior am vorbit despre cum putem crea o interfata pentru aplicatia noastra de chat, iar acum vom continua cu partea din spate a site-ului.

Ce vom folosi?

  1. Node
  2. Nodemon
  3. SocketIO

Inainte de toate, trebuie sa initializam npm in directorul in care dorim sa creeam aplicatia.

mkdir webChatApp

cd webChatApp

npm init

 

Dupa ce raspundeti la intrebarile pe care vi le pune consola, vom observa ca aplicatia noastra a fost creata. Acum trebuie sa adaugam elementele necesare. Pentru a nu fi nevoie sa modificam fisierul de dependinte vom folosi si –save pe langa instructiunea de instalare.

npm install --save socket.io

npm install --save nodemon

Avand tot ce e nevoie instalat, putem modifica in package.json pentru a include nodemon, pe care l-am instalat mai devreme. Cu ajutorul lui, script-ul va reporni la modificarile fisierului, ale fisierelor incluse, etc. Asta ne va treaba cand vom face debug.

"start": "nodemon app"

In folderul de baza al aplicatiei vom crea index.js, unde se va afla afla codul proiectului nostru.

var http = require('http').Server();
var io = require('socket.io')(http);


http.listen(3000, () => {
    console.log('Am deschis portul 3000');
});

Trebuie sa stabilim ce date primeste un utilizator la conectare pentru afisarea lor, iar in cazul aplicatiei noastre, trimitem

  • Numarul de utilizatori conectati
  • Ultimele mesaje din chat

Pentru salvarea ultimelor mesaje putem face un tablou de obiecte, fiecare avand urmatoarele atribute

  • text
  • dataTrimitere
  • autor

Codul nostru va arata asa:

var numarUtilizatori = 0;
var ultimeleMesaje = [];

io.on("connection", (socket) => {
    numarUtilizatori++;
    
    //emitem numarul de utilizatori online catre tot serverul
    io.emit("utilizatoriOnline", numarUtilizatori);

    //emitem ultimele mesaje catre utilizatorul nou conectat
    io.to(socket.id).emit("listaMesaje", ultimeleMesaje);

    socket.on("disconnect", () => { 
        numarUtilizatori--;

        //emitem noul numar de utilizatori
        io.emit("utilizatoriOnline", numarUtilizatori);
        });
});

Acum, pentru ca am definit logica de conectare/deconectare trebuie sa ne gandim si la logica adaugarii mesajelor in lista. Codul de mai jos trebuie adaugat in block-ul de instructiuni inceput la linia 4 din snippetul anterior.

socket.on("trimiteMesaj", (data) => {
    var mesaj = new Object();
    var data = new Date();
    
    //adaugam atributele mesajului
    mesaj.dataTrimitere = data.toLocaleString();
    mesaj.text = data.text;
    mesaj.autor = data.autor;
    
    /adaugam mesajul la lista noastra
    ultimeleMesaje.push(mesaj);

    /*
    datorita memoriei limitata nu putem stoca toate mesajele anterioare
    prin urmare, vom retine doar ultimele 150 de mesaje
    */
    if(ultimeleMesaje.length >= 150)
        ultimeleMesaje.shift();
    
    //toti utilizatorii primesc semnalul sa adauge ultimul mesaj
    io.emit("adaugaMesaj", mesaj);
});

 

Cum ar trebui sa arate la final serverul nostru pentru chat?

var http = require('http').Server();
var io = require('socket.io')(http);


http.listen(3000, () => {
    console.log('Am deschis portul 3000');
});

var numarUtilizatori = 0;
var ultimeleMesaje = [];

io.on("connection", (socket) => {
    numarUtilizatori++;
    
    //emitem numarul de utilizatori online catre tot serverul
    io.emit("utilizatoriOnline", numarUtilizatori);

    //emitem ultimele mesaje catre utilizatorul nou conectat
    io.to(socket.id).emit("listaMesaje", ultimeleMesaje);
    socket.on("trimiteMesaj", (data) => {
        var mesaj = new Object();
        var data = new Date();

        //adaugam atributele mesajului
        mesaj.dataTrimitere = data.toLocaleString();
        mesaj.text = data.text;
        mesaj.autor = data.autor;

        //adaugam mesajul la lista noastra
        ultimeleMesaje.push(mesaj);

        /*
        datorita memoriei limitata nu putem stoca toate mesajele anterioare
        prin urmare, vom retine doar ultimele 150 de mesaje
        */
        if(ultimeleMesaje.length >= 150)
            ultimeleMesaje.shift();

        //toti utilizatorii primesc semnalul sa adauge ultimul mesaj
        io.emit("adaugaMesaj", mesaj);
        });
    socket.on("disconnect", () => { 
        numarUtilizatori--;

        //emitem noul numar de utilizatori
        io.emit("utilizatoriOnline", numarUtilizatori);
        });
});

 

In articolul urmator voi reveni la primul fisier pentru a face conexiunea cu serverul, iar dupa ce aplicatia va functiona, vom face cateva retusuri (design, culori in chat, etc).

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *