PC & Mobile

Comment créer une application de discussion en temps réel avec NodeJS, Socket.IO et MongoDB

Comment créer une application de discussion en temps réel avec NodeJS, Socket.IO et MongoDB


Dans ce tutoriel, nous allons créer une application de discussion en temps réel avec NodeJS, Express, Socket.io et MongoDB.

Voici une capture d'écran de ce que nous allons construire:

Installer

Je suppose que NodeJS et NPM sont déjà installés. Vous pouvez l’installer à partir du site Web de Node JS si vous ne l’avez pas déjà installé.

Une connaissance de base de Javascript est requise.

Commençons.

Créez un répertoire pour l'application, ouvrez-le avec votre éditeur favori tel que Visual Studio Code. Vous pouvez utiliser n’importe quel autre éditeur, je vais utiliser du code VS dans ce tutoriel:

mkdir chatApplication && cd chatApplication && code.

Ensuite, initialisons le répertoire en tant qu’application Nodejs.

npm init

Vous serez invité à renseigner certaines informations - ce n'est pas grave. Les informations seront utilisées pour configurer votre package.json fichier.

Installation des dépendances

Installons les dépendances de notre application.

Nous utiliserons le Express serveur Web pour servir nos fichiers statiques et analyseur de corpsextraire la totalité du corps d'un flux de demandes entrant et l'exposer à un point de terminaison API. Alors, installons-les. Vous verrez comment ils sont utilisés plus tard dans ce tutoriel.

npm install express body-parser --save

Nous avons ajouté le drapeau - save afin qu’il soit ajouté en tant que dépendance dans notre package.json fichier.

Remarque:

Veuillez ne pas utiliser Express Generator car je ne vous expliquerai pas comment configurer socket.io travailler avec la configuration du générateur express.

Ensuite, installez le module de noeud mangouste. C’est un ODM (Object Document Mapper) pour MongoDB et cela facilitera beaucoup notre travail.

Installons-le à côté de socket.io et bluebird. Socket.IO est une bibliothèque JavaScript pour les applications Web en temps réel. Oiseau bleu est une bibliothèque Promise complète pour JavaScript.

npm installer mongoose socket.io bluebird --save

C’est tout pour l’installation du module backend de Nodejs.

Notre package.json Le fichier devrait ressembler à ceci maintenant.

Une autre façon d’installer les paquets ci-dessus consiste à copier le package.json fichier ci-dessus et collez-le dans votre package.json déposer et exécuter:

npm installer

Il va installer tous les packages requis.

Configurons le côté client.

Pour connecter le serveur Socket.IO au client, nous ajoutons la bibliothèque javascript côté client Socket.IO.

Ce sera notre fichier HTML pour le frontend. Vous pouvez récupérer tout le code de l'interface ici. La meilleure façon d'apprendre est de suivre.

Vous pouvez également télécharger la bibliothèque socket.io côté client ici.

Et ici /js/chat.js C’est là que nous aurons notre code javascript personnalisé côté client.

Mise en place de notre serveur express:

Créé un App.js. Vous pouvez l'appeler server.js si vous le souhaitez.
C’est ma préférence personnelle de l’appeler App.js.

Dans le fichier App.js, créons et configurez le serveur express afin qu’il fonctionne avec socket.io.

App.js

C'est la configuration de base requise pour configurer socket.io dans le backend.

Socket.IO fonctionne en ajoutant des écouteurs d’événement à une instance de http.Server
c'est ce que nous faisons ici:

const socket = io (http);

Voici où nous écoutons les nouveaux événements de connexion:

socket.on (“connection”, (socket) => {
console.log («utilisateur connecté»);
});

Par exemple, si un nouvel utilisateur visite localhost: 500, le message «utilisateur connecté» sera imprimé sur la console.

socket.on () prend un nom d'événement et un rappel en tant que paramètres.

Et il existe également un événement spécial de déconnexion qui se déclenche chaque fois qu'un utilisateur ferme l'onglet.

socket.on (“connection”, (socket) => {
console.log («utilisateur connecté»);
socket.on ("disconnect", () => {
console.log ("Déconnecté")
})
});

Configurer notre code frontal

Ouvrez votre js / chat.js Fichier et tapez le code suivant:

(une fonction() {
var socket = io ();
$ ("formulaire"). submit (fonction (e) {
e.preventDefault (); // empêche le rechargement de la page
socket.emit ("message de discussion", $ ("# m"). val ());
$ ("# m"). val ("");
retourne vrai;
});
}) ();

Il s’agit d’une fonction à exécution automatique qui initialise socket.io du côté client et émet le message saisi dans la zone de saisie.

Avec cette ligne de code, nous créons une instance globale du client soicket.io sur le frontend.

var socket = io ();

Et à l'intérieur du gestionnaire d'événements submit, socket io récupère notre discussion à partir de la zone de texte et l'envoie au serveur.

$ ("formulaire"). submit (fonction (e) {
e.preventDefault (); // empêche le rechargement de la page
socket.emit ("message de discussion", $ ("# m"). val ());
$ ("# m"). val ("");
retourne vrai;
});

Si vous en êtes arrivé là, félicitations, vous méritez des éloges.
😄

Génial, nos serveurs express et socket.io sont configurés pour fonctionner correctement. En fait, nous avons pu envoyer des messages au serveur en émettant le message depuis notre zone de saisie.

socket.emit ("message de discussion", $ ("# m"). val ());

Maintenant, côté serveur, configurons un événement pour écouter l’événement «message de discussion» et le diffuser aux clients connectés sur le port 500.

App.js

socket.on ("message de discussion", fonction (msg) {
console.log ("message:" + msg);
// message diffusé à tous les utilisateurs du port: 5000 sauf vous-même.
socket.broadcast.emit ("reçu", {message: msg});
});
});

C'est le gestionnaire d'événements qui écoute l'événement «message de discussion» et le message reçu est dans le paramètre passé à la fonction de rappel.

socket.on ("message de discussion", fonction (msg) {
});

Dans cet événement, nous pouvons choisir ce que nous faisons avec le message du client: l'insérer dans la base de données, le renvoyer au client, etc.

Dans notre cas, nous allons l'enregistrer dans la base de données et l'envoyer également au client.

Nous allons le diffuser. Cela signifie que le serveur l'enverra à toutes les personnes connectées au serveur, à l'exception de l'expéditeur.

Ainsi, si M. A envoie le message au serveur et que celui-ci le diffuse, M. B, C, D, etc. le recevra, mais M. A ne le fera pas.

Nous ne voulons pas recevoir le message que nous avons envoyé, n'est-ce pas?

Cela ne signifie pas que nous ne pouvons pas recevoir le message que nous avons envoyé. Si nous supprimons l'indicateur de diffusion, nous supprimerons également le message.

Voici comment diffuser un événement:

socket.broadcast.emit ("reçu", {message: msg})

Cela fait, nous pouvons prendre le message reçu et l’ajouter à notre interface utilisateur.

Si vous exécutez votre application. Vous devriez voir quelque chose de semblable à ceci. S'il vous plaît, ne vous moquez pas de mon chat en direct. ❤️

Wawu! Félicitations encore une fois. ajoutons des éléments de base de données et affichons nos discussions sur le serveur.

Configuration de la base de données

Installer MongoDB

Visitez le site Web MongoDB pour le télécharger si vous ne l’avez pas déjà fait.

Et assurez-vous que votre serveur MongoDB est en cours d'exécution. Ils disposent d'une excellente documentation qui explique en détail comment le configurer et le rendre opérationnel. Vous pouvez trouver le doc ici.

Créer un schéma de discussion

Créez un fichier dans le répertoire du modèle appelé modèles / ChatSchema.js
Rien de complexe, nous allons simplement avoir 3 champs dans notre schéma: un champ de message, un champ d’émetteur et un horodatage.

le ChatSchema.js Le fichier devrait ressembler à ceci:

Connexion à la base de données MongoDB

Créez un fichier et nommez-le dbconnection.js. C'est là que notre connexion à la base de données vivra.

const mangouste = require ("mangouste");
mongoose.Promise = require ("bluebird");
const url = "mongodb: // localhost: 27017 / chat";
const connect = mongoose.connect (url, {useNewUrlParser: true});
module.exports = connect;

Insérer des messages dans la base de données

Puisque nous allons insérer les messages côté serveur, nous allons insérer les messages que nous recevons du serveur dans le App.js fichier.

Alors, mettons à jour le fichier App.js.

...
// connexion à la base de données
const Chat = require ("./ models / Chat");
const connect = require ("./ dbconnect");

Nous pouvons maintenant ajouter le

// programme d'écoute d'événements
socket.on ("connection", socket => {
console.log ("utilisateur connecté");
socket.on ("disconnect", function () {
console.log ("utilisateur déconnecté");
});
        socket.on ("message de discussion", fonction (msg) {
console.log ("message:" + msg);
// message diffusé à tout le monde dans le port: 5000 sauf vous-même.
socket.broadcast.emit ("reçu", {message: msg});
        // enregistrer le chat dans la base de données
connect.then (db => {
console.log ("connecté correctement au serveur");
        let chatMessage = nouveau chat ({message: msg, expéditeur: "anonyme"});
chatMessage.save ();
});
});
});

Nous créons un nouveau document et l'enregistrons dans la collection Chat dans la base de données.

let chatMessage = nouveau chat ({message: msg, expéditeur: "anonyme"});
chatMessage.save ();

Afficher les messages sur le frontend

Nous allons tout d’abord afficher l’historique des messages de la base de données et ajouter tous les messages émis par les événements.

Pour ce faire, nous devons créer une API qui envoie les données de la base de données au client lorsque nous envoyons une requête get.

const express = require ("express");
const connectdb = require ("./../ dbconnect");
const Chats = require ("./../ models / Chat");
const router = express.Router ();
router.route ("/"). get ((req, res, next) => {
res.setHeader ("Content-Type", "application / json");
res.statusCode = 200;
connectdb.then (db => {
Chats.find ({}). Then (chat => {
res.json (chat);
});
});
});
module.exports = routeur;

Dans le code ci-dessus, nous interrogeons la base de données et récupérons tous les messages de la collection Chat.

Nous allons importer ceci dans le code du serveur Fichier app.js et nous allons également importer le middleware bodyparser.


const bodyParser = require («analyseur de corps»);
const chatRouter = require (“./ route / chatroute”);
// middleware du constructeur de corps
app.use (bodyParser.json ());
// itinéraires
app.use (“/ chats”, chatRouter);

Ceci étant réglé, nous sommes prêts à accéder à notre API à partir de l'interface frontale et à obtenir tous les messages de notre collection de discussions.

Nous avons donc reçu les messages à l'aide de l'API d'extraction et nous les avons ajoutés à l'interface utilisateur.

Vous remarquerez également que j’ai utilisé formatTimeAgo (data.createdAt)); c’est une bibliothèque de 1,31 Ko que j’ai créée pour gérer les dates de petits projets, car moment.js est parfois un peu trop gros. formatTimeAgo () affichera “il y a quelques secondes”, etc. Si vous êtes intéressé, vous trouverez plus d'informations ici.

Tout semble bien en ce moment, non?

Toutefois, comme vous ne recevez pas les messages envoyés au serveur, saisissons notre propre message dans notre zone de saisie et affichez-le sur l'interface utilisateur.


(une fonction() {
$ (“Formulaire”). Submit (fonction (e) {
let li = document.createElement (“li”);
e.preventDefault (); // empêche le rechargement de la page
socket.emit (“message de discussion”, $ (“message #”). val ());
messages.appendChild (li) .append ($ (“# message”). val ());
let span = document.createElement («span»);
messages.appendChild (span) .append (“par“ + “Anonyme” + “:“ + “tout à l'heure”);
$ (“# Message”). Val (“”);
retourne faux;
    });
}) ();

Et aussi, si nous recevons des messages de l’événement, laissons également l’envoyer à l’interface utilisateur.



(une fonction(){
socket.on ("reçu", data => {
let li = document.createElement ("li");
let span = document.createElement ("span");
var messages = document.getElementById ("messages");
messages.appendChild (li) .append (data.message);
messages.appendChild (span) .append ("by" + "anonymous" + ":" + "tout à l'heure");
});
`
})

Notre application est terminée maintenant. Allez-y, testez-le.

Notez que si nos utilisateurs étaient connectés, nous n’aurions pas codé en dur l’utilisateur «anonyme», car il se trouve actuellement dans notre code. Nous allons l'obtenir du serveur.

Et aussi, si vous voulez dire à tout le monde que quelqu'un tape, vous pouvez aussi ajouter ce code dans l'interface.


// événement isTyping
messageInput.addEventListener (“keypress”, () => {
socket.emit (“en tapant”, {utilisateur: “Quelqu'un”, message: “en train de taper…”});
});
socket.on (“notifyTyping”, data => {
typing.innerText = data.user + ““ + data.message;
console.log (data.user + data.message);
});
// arrête de taper
messageInput.addEventListener (“keyup”, () => {
socket.emit (“stopTyping”, “”);
});
socket.on (“notifyStopTyping”, () => {
en tapant.innerText = “”;});
`

Ce qu’il fait, c’est que lorsqu’un utilisateur est en train de taper, il émet un événement sur le serveur et le serveur le diffuse aux autres clients. Vous écoutez l'événement et mettez à jour l'interface utilisateur avec le message «Quelqu'un est en train de taper…». Vous pouvez ajouter le nom de la personne si vous le souhaitez.

Voici le programme d'écoute et l'émetteur d'événements côté serveur:

Toutes nos félicitations.

Vous pouvez améliorer ce code, ajouter une authentification, ajouter des groupes ou en faire une discussion en un à un, modifier le schéma pour l'adapter à tout cela, etc.

Je serai très heureux de voir les applications temps réel que vous construirez avec socket.IO.

J'espère que cela a été utile. Le code entier est sur Github. Vous pouvez l'avoir ici.

Afficher plus

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Articles similaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Bouton retour en haut de la page
Fermer