Créez une salle de discussion avec nodejs

Avec le développement rapide d'Internet, la façon dont les gens communiquent entre eux évolue également constamment. Chat room est une application de messagerie instantanée en ligne qui permet aux utilisateurs de communiquer et d'échanger des informations en temps réel, quelles que soient les restrictions géographiques ou de fuseau horaire. Il existe de nombreuses façons de mettre en œuvre des salles de discussion. Cet article explique comment créer une salle de discussion avec nodejs.

1. Principe de mise en œuvre de base du salon de discussion

Le salon de discussion est un système de messagerie instantanée basé sur un réseau et son principe de mise en œuvre est très simple. Lorsqu'un utilisateur entre dans la salle de discussion, il doit d'abord se connecter au serveur de discussion, et le serveur ajoutera les informations de connexion de l'utilisateur à la liste des utilisateurs de la salle de discussion. Lorsqu'un utilisateur envoie un message à la salle de discussion, le serveur diffuse le message à tous les utilisateurs de la salle de discussion. De plus, le serveur doit également surveiller l'état de connexion de l'utilisateur et les informations sur les utilisateurs déconnectés en temps réel.

2. Préparation

Avant de commencer à créer une salle de discussion, assurez-vous d'avoir installé nodejs et npm. Sinon, vous pouvez vous rendre sur le site officiel de nodejs pour le télécharger et l'installer.

3. Construisez le côté serveur de la salle de discussion

1. Créez le projet

Tout d'abord, nous devons créer un projet de salle de discussion dans l'environnement local et télécharger certains modules nécessaires. Créez d'abord un répertoire de projet sur la ligne de commande et saisissez :

mkdir myChatRoom
cd myChatRoom

Utilisez ensuite npm pour initialiser le projet :

npm init

Installez ensuite les modules que vous devez utiliser :

npm i express socket.io -S

Dans la commande ci-dessus :

• express est un utilisé le framework Web nodejs, utilisé pour gérer les requêtes et les réponses HTTP.
• socket.io est une bibliothèque de communication en temps réel basée sur l'encapsulation websocket.

2. Implémentation du code côté serveur

Dans le répertoire racine du projet, créez le fichier index.js et collez-y le code suivant :

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

app.use(express.static(__dirname + '/public'));

const onlineUsers = {};
const onlineCount = 0;

io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('login', (user) => {
    socket.nickname = user.username;
    // check if the user already exists
    if (!onlineUsers.hasOwnProperty(socket.nickname)) {
      onlineUsers[socket.nickname] = user.avatar;
      onlineCount++;
    }

    io.emit('login', { onlineUsers, onlineCount, user });
    console.log(`user ${user.username} joined`);
  });

  socket.on('chatMessage', (msg) => {
    io.emit('chatMessage', { nickname: socket.nickname, message: msg });
  });

  socket.on('disconnect', () => {
    if (onlineUsers.hasOwnProperty(socket.nickname)) {
      const userLeft = { username: socket.nickname, avatar: onlineUsers[socket.nickname] };
      delete onlineUsers[socket.nickname];
      onlineCount--;

      io.emit('logout', { onlineUsers, onlineCount, user: userLeft });
      console.log(`user ${userLeft.username} left`);
    }
  });
});

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

Dans le code ci-dessus, nous avons démarré un serveur http et utilisé socket.io Le service HTTP a été mis à niveau pour prendre en charge les websockets. Nous pouvons ensuite voir que nous avons défini plusieurs événements socket :

1. Lorsqu'il y a une nouvelle connexion Socket, le serveur enverra l'événement de connexion, et nous afficherons "un utilisateur connecté".
2. Lorsqu'un utilisateur se connecte, le serveur enverra un événement de connexion et ajoutera les informations de l'utilisateur à la liste des utilisateurs en ligne, puis le serveur diffusera la liste des utilisateurs en ligne aux autres utilisateurs.
3. Lorsqu'un utilisateur envoie un message, le serveur enverra l'événement chatMessage et diffusera le message à tous les utilisateurs en ligne.
4. Lorsqu'un utilisateur se déconnecte, le serveur envoie un événement de déconnexion et supprime l'utilisateur de la liste des utilisateurs en ligne.

4. Construisez un client de salle de discussion

1. Créez un fichier html

Dans le répertoire public du projet, créez un fichier html et copiez le code suivant dans le fichier :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chatroom</title>
    <style>
        #nickname {
            display: none;
        }

        #messages {
            height: 300px;
            overflow-y: scroll;
            margin-bottom: 10px;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        li {
            margin-top: 10px;
        }

        img {
            width: 30px;
            height: 30px;
            vertical-align: middle;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div id="loginPanel">
    <p>输入一个昵称:</p>
    <input type="text" id="nicknameInput">
    <button id="submit">进入聊天室</button>
</div>
<div id="chatroom" style="display:none;">
    <div id="nickWrapper">
        <img id="avatarImg" src=""/>
        <span id="nickname"></span>
        <button id="logout">退出聊天室</button>
    </div>
    <div id="messages"></div>
    <input type="text" id="messageInput" placeholder="请输入聊天信息">
    <button id="sendBtn">发送</button>
</div>

<script src="./socket.io/socket.io.js"></script>
<script src="./chat.js"></script>
</body>
</html>

Dans le code ci-dessus, nous give Le HTML ajoute une zone de saisie de pseudo, un bouton pour entrer dans la salle de discussion, un bouton pour quitter la salle de discussion, un élément avec l'ID "messages", une zone de saisie pour envoyer des messages et un bouton pour envoyer des messages. Parmi eux, la zone de saisie du surnom et le bouton pour accéder à la salle de discussion sont masqués après l'entrée dans la salle de discussion, et le surnom et l'avatar de l'utilisateur en ligne sont affichés.

2. Créez le code JS du client de salle de discussion

Créez un fichier chat.js dans le répertoire public et collez-y le code suivant :

const socket = io();
const submitBtn = document.querySelector('#submit');
const logoutBtn = document.querySelector('#logout');
const sendBtn = document.querySelector('#sendBtn');
const messageInput = document.querySelector('#messageInput');
const nicknameInput = document.querySelector('#nicknameInput');
const chatWrapper = document.querySelector('#chatroom');
const loginPanel = document.querySelector('#loginPanel');
const avatarImg = document.querySelector('#avatarImg');
const nickname = document.querySelector('#nickname');
const messages = document.querySelector('#messages');

let avatar;


// 提交昵称登录
submitBtn.addEventListener('click', function () {
  const nickname = nicknameInput.value;
  if (nickname.trim().length > 0) {
    avatar = `https://avatars.dicebear.com/api/bottts/${Date.now()}.svg`;
    socket.emit('login', { username: nickname, avatar: avatar });
  } else {
    alert('昵称为空，请重新输入');
    nicknameInput.value = '';
    nicknameInput.focus();
  }
});

// 退出登录
logoutBtn.addEventListener('click', function () {
  socket.disconnect();
});

// 发送消息
sendBtn.addEventListener('click', function () {
  const msg = messageInput.value.trim();
  if (msg.length > 0) {
    socket.emit('chatMessage', msg);
    messageInput.value = '';
    messageInput.focus();
  }
});

// 回车发送消息
messageInput.addEventListener('keyup', function (e) {
  e.preventDefault();
  if (e.keyCode === 13) {
    sendBtn.click();
  }
});

// 服务器发送登录信号
socket.on('login', (info) => {
  loginPanel.style.display = 'none';
  chatWrapper.style.display = 'block';
  avatarImg.src = avatar;
  nickname.innerText = nicknameInput.value;
  renderUserList(info.onlineUsers);
});

// 服务器发送聊天消息信号
socket.on('chatMessage', (data) => {
  renderChatMessage(data.nickname, data.message);
});

// 服务器发送退出信号
socket.on('logout', (info) => {
  renderUserList(info.onlineUsers);
});

// 渲染在线用户列表
function renderUserList(users) {
  const list = document.createElement('ul');
  Object.keys(users).forEach((nickname) => {
    const item = `
    <li>
      <img src="${users[nickname]}"/>
      <span>${nickname}</span>
    </li>
    `;
    list.innerHTML += item;
  });
  chatWrapper.insertBefore(list, messages);
}

// 渲染聊天消息
function renderChatMessage(nickname, message) {
  const msg = document.createElement('div');
  msg.innerHTML = `<p>${nickname}: ${message}</p>`;
  messages.appendChild(msg);
}

Dans le code ci-dessus, nous avons implémenté les fonctions suivantes :

1. Quand un utilisateur Lorsque le bouton "Connexion" est cliqué, un événement "Connexion" est envoyé au serveur, et le serveur est chargé d'ajouter l'utilisateur à la liste "Utilisateurs en ligne" en interne et de transmettre la liste actuelle des "Utilisateurs en ligne" à tous. clients via la diffusion.
2. Lorsqu'il y a un message de discussion, le serveur enverra l'événement "chatMessage" et transmettra le contenu du message à tous les clients par diffusion.
3. Lorsqu'un utilisateur se déconnecte, la "Liste des utilisateurs en ligne" supprimera l'utilisateur de la liste des utilisateurs et transmettra la liste actuelle des "Utilisateurs en ligne" à tous les clients par diffusion.

5. Exécutez le projet

Accédez au répertoire racine du projet sur la ligne de commande et saisissez la commande suivante pour démarrer le projet :

node index.js

Saisissez ensuite http://localhost:3000/ dans le navigateur pour accéder au serveur et entrez dans la salle de discussion.

6. Résumé

Dans cet article, nous avons implémenté une salle de discussion simple basée sur nodejs et socket.io, qui fournit un moyen simple, stable et efficace de créer une salle de discussion. Bien qu'il ne s'agisse que d'un salon de discussion très basique, je pense que les lecteurs peuvent avoir une compréhension générale de la création d'un salon de discussion avec nodejs grâce à l'introduction et à la pratique de cet article.

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!