Maison > base de données > Redis > le corps du texte

Comment créer une application de chat en temps réel à l'aide de Redis et Node.js

PHPz
Libérer: 2023-07-29 09:23:03
original
952 Les gens l'ont consulté

Comment utiliser Redis et Node.js pour créer une application de chat en temps réel

Introduction :
Avec le développement continu de la technologie Internet, la communication en temps réel fait désormais partie de la vie quotidienne des gens modernes. Qu’il s’agisse des réseaux sociaux, des jeux en ligne ou du service client en ligne, les applications de chat en temps réel sont largement utilisées. Cet article expliquera comment utiliser Redis et Node.js pour créer une application de chat en temps réel simple et détaillera le processus de mise en œuvre de l'application de chat en temps réel à travers des exemples de code.

1. Présentation
La clé des applications de chat en temps réel réside dans la messagerie en temps réel et les mises à jour instantanées. Pour atteindre cet objectif, nous utiliserons les technologies et outils suivants :

  1. Redis : une base de données en mémoire haute performance pour stocker les messages de chat.
  2. Node.js : un framework d'E/S asynchrones piloté par événements utilisé pour créer le serveur back-end des applications de chat.
  3. Socket.IO : Une bibliothèque JavaScript pour le développement d'applications en temps réel pour une communication en temps réel entre le front-end et le back-end.

2. Préparation de l'environnement
Avant de commencer, nous devons installer et configurer les outils suivants :

  1. Node.js : Veuillez télécharger et installer la dernière version de Node.js en fonction du système d'exploitation.
  2. Redis : veuillez télécharger et installer la dernière version de Redis en fonction de votre système d'exploitation.
  3. Socket.IO : Exécutez la commande suivante via la ligne de commande pour installer Socket.IO :

    npm install socket.io
    Copier après la connexion

3. Processus d'implémentation

  1. Créez un projet Node.js vide et installez les dépendances :

    npm init
    npm install express redis socket.io
    Copier après la connexion
  2. Créez un fichier nommé app.js dans le répertoire racine du projet et ajoutez le code suivant : app.js的文件,并添加以下代码:

    const express = require('express');
    const app = express();
    const server = require('http').Server(app);
    const io = require('socket.io')(server);
    const redis = require('redis');
    const redisClient = redis.createClient();
    
    server.listen(3000, () => {
      console.log('Server is running on port 3000');
    });
    
    app.get('/', (req, res) => {
      res.sendFile(__dirname + '/index.html');
    });
    
    io.on('connection', (socket) => {
      socket.on('join', (room) => {
        socket.join(room);
      });
    
      socket.on('sendMessage', (data) => {
        redisClient.lpush(data.room, data.message);
        io.in(data.room).emit('receiveMessage', data.message);
      });
    });
    Copier après la connexion
  3. 在项目根目录下创建一个名为index.html的文件,并添加以下代码:

    <!DOCTYPE html>
    <html>
    <head>
      <title>Real-time Chat</title>
      <script src="/socket.io/socket.io.js"></script>
      <script>
        const socket = io();
    
        socket.emit('join', 'room1');
    
        socket.on('receiveMessage', (message) => {
          const li = document.createElement('li');
          li.textContent = message;
          document.getElementById('messages').appendChild(li);
        });
    
        function sendMessage() {
          const input = document.getElementById('message');
          const message = input.value;
          input.value = '';
          socket.emit('sendMessage', { room: 'room1', message: message });
        }
      </script>
    </head>
    <body>
      <ul id="messages"></ul>
      <input id="message" type="text" />
      <button onclick="sendMessage()">Send</button>
    </body>
    </html>
    Copier après la connexion
  4. 启动Redis服务:

    redis-server
    Copier après la connexion
  5. 启动Node.js服务器:

    node app.js
    Copier après la connexion
  6. 在浏览器中访问http://localhost:3000,打开多个标签或浏览器窗口,输入消息并点击发送按钮,即可实现实时聊天。

四、实现原理

  1. 用户在浏览器中输入消息并点击发送按钮,前端的JavaScript代码通过Socket.IO向后端发送sendMessage事件,并携带消息和房间信息。
  2. 后端的Node.js服务器接收到sendMessage事件后,将消息存储到Redis中,同时通过Socket.IO向所有在同一房间的客户端发送receiveMessage事件,并携带相同的消息内容。
  3. 客户端收到receiveMessagerrreee

Créez un fichier nommé index.html dans le répertoire racine du projet et ajoutez le code suivant :
rrreee

🎜🎜Démarrez le service Redis : 🎜rrreee🎜🎜🎜Démarrez le serveur Node.js : 🎜rrreee🎜🎜Visitez http://localhost:3000dans le navigateur >, ouvrez plusieurs onglets ou fenêtres de navigateur, saisissez un message et cliquez sur le bouton Envoyer pour discuter en temps réel. 🎜🎜🎜4. Principe de mise en œuvre🎜🎜🎜L'utilisateur saisit un message dans le navigateur et clique sur le bouton d'envoi. Le code JavaScript frontal envoie l'événement sendMessage au back-end via Socket.IO. , transportant le message et les informations sur la chambre. 🎜🎜Une fois que le serveur Node.js back-end a reçu l'événement sendMessage, il stocke le message dans Redis et envoie receiveMessage à tous les clients dans la même pièce via Socket.IO . événement et portent le même contenu de message. 🎜🎜Une fois que le client a reçu l'événement receiveMessage, il affiche le message dans la fenêtre de discussion. 🎜🎜🎜Conclusion : 🎜Grâce aux étapes ci-dessus, nous avons réussi à créer une application simple de chat en temps réel à l'aide de Redis et Node.js. Cette application peut continuer à être étendue, par exemple en ajoutant l'authentification des utilisateurs, l'enregistrement des messages et d'autres fonctions. J'espère que cet article pourra aider tout le monde à comprendre et à apprendre le processus de développement d'applications de chat en temps réel, et à l'appliquer dans des projets réels. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal