Projet Web utilisant Node.js pour implémenter la fonction de messagerie instantanée

Avec le développement rapide d'Internet, les fonctions de messagerie instantanée deviennent de plus en plus courantes. Qu'il s'agisse des réseaux sociaux, du e-commerce, des jeux en ligne, etc., des fonctions de messagerie instantanée doivent être mises en œuvre pour améliorer l'expérience utilisateur et l'efficacité. En tant qu'environnement d'exécution JavaScript efficace adapté aux requêtes simultanées, Node.js offre un bon support pour créer rapidement des applications Web avec des fonctions de messagerie instantanée.

Cet article présentera en détail comment utiliser Node.js pour implémenter une fonction de messagerie instantanée basée sur le Web. Ce projet est basé sur le protocole WebSocket et n'utilise pas la technologie d'interrogation traditionnelle ou d'interrogation longue. L'avantage de la technologie WebSocket est qu'elle peut réaliser une communication bidirectionnelle en temps réel entre le serveur et le client, et qu'elle prend également en charge les requêtes inter-domaines.

1. Sélection de technologies

Nous utiliserons les technologies suivantes pour développer cette fonction de messagerie instantanée :

• Node.js : Nous utiliserons Node.js comme environnement d'exécution côté serveur.
• Express : Nous utiliserons le framework Express pour développer des applications Web.
• Socket.IO : Socket.IO est un moteur de communication en temps réel multiplateforme basé sur WebSocket et sondage. Il est compatible avec différents navigateurs et appareils mobiles.
• MongoDB : Nous utiliserons MongoDB comme stockage de données.
• Bootstrap : Nous utiliserons le framework Bootstrap pour construire l'interface utilisateur.

2. Construisez le framework du projet

Créez d'abord un dossier de projet, entrez dans le répertoire, puis exécutez les commandes suivantes :

npm init
npm install express socket.io mongodb --save

Les commandes ci-dessus créeront un nouveau projet Node.js, puis installeront les bibliothèques dépendantes requises. .

La première étape consiste à créer un nouveau fichier JavaScript dans le répertoire racine du projet. Dans ce cas, nous avons nommé le fichier server.js. Copiez ensuite le code ci-dessous dans le fichier server.js.

const express = require('express');
const app = express();
const http = require('http').Server(app);

// TODO：编写代码来启动Socket.IO服务

app.use(express.static('public'));

http.listen(3000, () => {
  console.log('listening on *:3000');
});

Le code ci-dessus présente le framework Express, crée un objet serveur HTTP et écoute le port 3000. Cela implique l'initialisation et le démarrage de Socket.IO, qui seront abordés plus tard. En même temps, express.static() est utilisé pour définir l'accès au dossier statique du programme.

3. Configurez MongoDB

Exécutez la commande suivante pour installer MongoDB :

npm install mongodb --save

Créez un nouveau fichier JS nommé mongo.js dans le répertoire racine du projet et ajoutez le code suivant pour configurer et exécuter MongoDB.

const MongoClient = require('mongodb').MongoClient;

// Connection URL
const url = 'mongodb://localhost:27017';
// Database Name
const dbName = 'chatDB';
// Use connect method to connect to the server
MongoClient.connect(url, function (err, client) {
  console.log('Connected successfully to mongodb server');

  const db = client.db(dbName);
  client.close();
});

Dans ce fichier, nous utilisons l'objet MongoClient officiellement fourni par MongoDB pour nous connecter au serveur MongoDB. MongoClient se connecte à l'instance mongod en utilisant l'URL et effectue l'opération avec dbName comme paramètre. Après avoir exécuté mongo.js, si vous voyez un message similaire à « Connexion réussie au serveur MongoDB », vous êtes connecté avec succès à MongoDB.

4. Démarrez le service Socket.IO

Afin de démarrer le service Socket.IO, nous allons ajouter le code suivant au fichier server.js tout à l'heure :

const express = require('express');
const app = express();
const http = require('http').Server(app);

const io = require('socket.io')(http);
io.on('connection', function (socket) {
  console.log('a user connected');
  socket.on('disconnect', function () {
    console.log('user disconnected');
  });
});

app.use(express.static('public'));

http.listen(3000, () => {
  console.log('listening on *:3000');
});

Le code ci-dessus importe et crée une instance à partir du module socket.io, puis l'événement de connexion est défini. L'événement de connexion est déclenché lorsqu'un client se connecte à un serveur Socket.IO. Nous avons ajouté des sorties de journalisation aux événements de connexion afin que nous puissions savoir sur la console du serveur combien d'utilisateurs sont connectés à notre serveur Socket.IO.

5. Créer un client

Maintenant, nous allons commencer à créer le client. Dans le dossier public, créez un fichier appelé index.html et ajoutez le code suivant :

<!DOCTYPE html>
<html>
  <head>
    <title>Node.js Chat App</title>
  </head>
  <body>
    <h1>Welcome to the Chat Room!</h1>
    <div id="messages"></div>
    <form id="chat-form" action="#">
      <input id="message" type="text" placeholder="Type message" />
      <button type="submit">Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/client.js"></script>
  </body>
</html>

Dans le code ci-dessus, nous avons créé une interface utilisateur simple pour envoyer et recevoir des messages instantanés. L'interface utilisateur se compose principalement de trois parties :

• Un élément
• Un formulaire que les utilisateurs peuvent utiliser pour envoyer des messages.
• Deux éléments <script> L’un est utilisé pour charger la bibliothèque client socket.io et l’autre est utilisé pour charger le script client. </script>
6. Implémentation du script côté client

Créez un nouveau fichier JS nommé client.js dans le dossier public, puis ajoutez le code suivant :

const socket = io();
const messageList = document.getElementById('messages');
const messageForm = document.getElementById('chat-form');
const messageInput = document.getElementById('message');

messageForm.addEventListener('submit', function (e) {
  e.preventDefault();
  socket.emit('chat message', messageInput.value);
  messageInput.value = '';
});

socket.on('chat message', function (msg) {
  const item = document.createElement('li');
  item.textContent = msg;
  messageList.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});

Le code ci-dessus est un simple script côté client, utilisant Handles communication entre l'interface utilisateur et Socket.IO. La principale responsabilité du code client est d'envoyer des messages au serveur et d'afficher les messages reçus sur l'interface utilisateur. Nous utilisons la méthode submit() de Socket.IO pour envoyer des messages au serveur et utilisons la méthode on() pour recevoir les messages envoyés par le serveur.

7. Test de l'application

Maintenant que tous les fichiers sont prêts, nous pouvons démarrer le serveur Web et les tester dans le navigateur. Dans le terminal, accédez au répertoire racine du projet et saisissez la commande suivante :

node server.js

Saisissez http://localhost:3000/ dans votre navigateur pour ouvrir l'application. Entrez quelques messages de discussion dans l'interface utilisateur et nous pouvons les voir ajoutés à la liste des messages de discussion.

8. Conclusion

Node.js et Socket.IO sont de très bons choix pour développer des applications Web qui implémentent la messagerie instantanée. Dans cet article, nous avons présenté comment créer une application de discussion Web qui utilise Node.js comme environnement d'exécution, Express comme infrastructure Web, Socket.IO comme moteur de communication en temps réel et MongoDB comme stockage de données. Il s'agit d'un exemple très simple, mais il nous montre comment ces technologies peuvent être utilisées pour mettre en œuvre des fonctionnalités de messagerie instantanée.