Erstellen Sie einen Chatroom mit NodeJS

Mit der rasanten Entwicklung des Internets verändert sich auch die Art und Weise, wie Menschen miteinander kommunizieren, ständig. Chatroom ist eine Online-Instant-Messaging-Anwendung, die es Benutzern ermöglicht, in Echtzeit zu kommunizieren und Informationen auszutauschen, unabhängig von geografischen oder Zeitzonenbeschränkungen. Es gibt viele Möglichkeiten, Chatrooms zu implementieren. In diesem Artikel wird erläutert, wie Sie einen Chatroom mit NodeJS erstellen.

1. Grundlegendes Implementierungsprinzip des Chatrooms

Chatroom ist ein netzwerkbasiertes Instant-Messaging-System und sein Implementierungsprinzip ist sehr einfach. Wenn ein Benutzer den Chatroom betritt, muss er zuerst eine Verbindung zum Chat-Server herstellen. Der Server fügt dann die Verbindungsinformationen des Benutzers zur Benutzerliste des Chatrooms hinzu. Wenn ein Benutzer eine Nachricht an den Chatroom sendet, sendet der Server die Nachricht an alle Benutzer im Chatroom. Darüber hinaus muss der Server den Verbindungsstatus des Benutzers und die Informationen zum getrennten Benutzer in Echtzeit überwachen.

2. Vorbereitung

Bevor Sie mit dem Aufbau eines Chatrooms beginnen, stellen Sie sicher, dass Sie nodejs und npm installiert haben. Wenn nicht, können Sie es auf der offiziellen Website von nodejs herunterladen und installieren.

3. Erstellen Sie die Serverseite des Chatrooms

1. Erstellen Sie das Projekt

Zuerst müssen wir ein Chatroom-Projekt in der lokalen Umgebung erstellen und einige notwendige Module herunterladen. Erstellen Sie zunächst ein Projektverzeichnis in der Befehlszeile und geben Sie Folgendes ein:

mkdir myChatRoom
cd myChatRoom

Dann verwenden Sie npm, um das Projekt zu initialisieren:

npm init

Als nächstes installieren Sie die Module, die Sie verwenden müssen:

npm i express socket.io -S

Im obigen Befehl:

• express ist ein allgemeiner Befehl Verwendetes NodeJS-Webframework, das zur Verarbeitung von HTTP-Anfragen und -Antworten verwendet wird.
• socket.io ist eine Echtzeit-Kommunikationsbibliothek, die auf der WebSocket-Kapselung basiert.

2. Serverseitige Code-Implementierung

Erstellen Sie im Projektstammverzeichnis die Datei index.js und fügen Sie den folgenden Code hinein:

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

Im obigen Code haben wir einen http-Server gestartet und socket.io verwendet auf Der HTTP-Dienst wurde aktualisiert, um Websockets zu unterstützen. Dann können wir sehen, dass wir mehrere Socket-Ereignisse definiert haben:

1. Wenn eine neue Socket-Verbindung besteht, sendet der Server das Verbindungsereignis und wir geben „ein Benutzer verbunden“ aus.
2. Wenn sich ein Benutzer anmeldet, sendet der Server ein Anmeldeereignis und fügt die Informationen des Benutzers zur Online-Benutzerliste hinzu. Anschließend sendet der Server die Online-Benutzerliste an andere Benutzer.
3. Wenn ein Benutzer eine Nachricht sendet, sendet der Server das chatMessage-Ereignis und sendet die Nachricht an alle Online-Benutzer.
4. Wenn ein Benutzer die Verbindung trennt, sendet der Server ein Trennungsereignis und löscht den Benutzer aus der Online-Benutzerliste.

4. Erstellen Sie einen Chatroom-Client

1. Erstellen Sie eine HTML-Datei

Erstellen Sie im öffentlichen Verzeichnis des Projekts eine HTML-Datei und kopieren Sie den folgenden Code in die Datei:

<!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>

Im obigen Code haben wir Give Der HTML-Code fügt ein Spitznamen-Eingabefeld, eine Schaltfläche zum Betreten des Chatrooms, eine Schaltfläche zum Verlassen des Chatrooms, ein Element mit der ID „Nachrichten“, ein Eingabefeld zum Senden von Nachrichten und eine Schaltfläche zum Senden von Nachrichten hinzu. Darunter werden das Spitznamen-Eingabefeld und die Schaltfläche zum Betreten des Chatrooms nach dem Betreten des Chatrooms ausgeblendet und der Spitzname und der Avatar des Online-Benutzers angezeigt.

2. Erstellen Sie den Chatroom-Client-JS-Code

Erstellen Sie eine chat.js-Datei im öffentlichen Verzeichnis und fügen Sie den folgenden Code hinein:

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

Im obigen Code haben wir die folgenden Funktionen implementiert:

1. Wenn ein Benutzer Wenn auf die Schaltfläche „Anmelden“ geklickt wird, wird ein „Anmelde“-Ereignis an den Server gesendet und der Server wird damit beauftragt, den Benutzer intern zur Liste „Online-Benutzer“ hinzuzufügen und die aktuelle Liste „Online-Benutzer“ an alle weiterzuleiten Kunden durch Rundfunk.
2. Wenn eine Chat-Nachricht vorliegt, sendet der Server das Ereignis „chatMessage“ und überträgt den Inhalt der Nachricht per Broadcast an alle Clients.
3. Wenn ein Benutzer die Verbindung trennt, löscht die „Online-Benutzerliste“ den Benutzer aus der Benutzerliste und überträgt die aktuelle „Online-Benutzer“-Liste per Broadcast an alle Clients.

5. Führen Sie das Projekt aus

Gehen Sie in der Befehlszeile zum Stammverzeichnis des Projekts und geben Sie den folgenden Befehl ein, um das Projekt zu starten:

node index.js

Geben Sie dann http://localhost:3000/ in den Browser ein, um auf den Server zuzugreifen und betreten Sie den Chatraum.

6. Zusammenfassung

In diesem Artikel haben wir einen einfachen Chatroom basierend auf nodejs und socket.io implementiert, der eine einfache, stabile und effiziente Möglichkeit bietet, einen Chatroom aufzubauen. Obwohl dies nur ein sehr einfacher Chatroom ist, glaube ich, dass die Leser durch die Einführung und Übung dieses Artikels ein allgemeines Verständnis für den Aufbau eines Chatrooms mit NodeJS erlangen können.

Das obige ist der detaillierte Inhalt vonErstellen Sie einen Chatroom mit NodeJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!