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

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.

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.

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

Copier après la connexion

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');
});

Copier après la connexion

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.

Configurez MongoDB

Exécutez la commande suivante pour installer MongoDB :

npm install mongodb --save

Copier après la connexion

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();
});

Copier après la connexion

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.

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');
});

Copier après la connexion

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.

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>

Copier après la connexion

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 :