使用Node.js实现一个简单的聊天室

作者：佚名上传时间：2023-03-13 运行软件：Visual Studio Code 软件版本：Node.js 14.17.5 版权申诉

本篇文章将介绍如何使用Node.js实现一个简单的聊天室，包括聊天室的实现代码和案例示例代码。以下是实现过程和代码释义。

实现过程

创建一个基于Node.js的Web应用程序。
添加Socket.io库以实现实时通信。
创建一个聊天室服务以处理用户的连接和断开连接。
实现聊天室服务的消息广播功能。
创建一个聊天室前端页面，使其能够连接到聊天室服务并与其他用户聊天。

1. 创建基于Node.js的Web应用程序

const express = require('express');
const app = express();

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

const server = app.listen(3000, () => {
  console.log('Server started on port 3000');
});

此代码创建了一个基于Node.js的Web应用程序，并将其设置为使用public文件夹中的静态文件。服务器将在端口3000上启动。

2. 添加Socket.io库以实现实时通信

const socket = require('socket.io');
const io = socket(server);

以上代码引入了Socket.io库并将其附加到服务器上，以实现实时通信。

3. 创建一个聊天室服务以处理用户的连接和断开连接

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

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

此代码创建一条连接监听器，以便在有新用户连接到聊天室时进行操作。当用户断开连接时，将触发另一个监听器。

4. 实现聊天室服务的消息广播功能

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

以上代码创建了一个监听器，以便在接收到聊天消息时广播该消息。

5. 创建一个聊天室前端页面，使其能够连接到聊天室服务并与其他用户聊天

<!doctype html>
<html>
  <head>
    <title>Chat Room</title>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>

    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();

      const form = document.querySelector('form');
      const input = document.querySelector('#m');
      const messages = document.querySelector('#messages');

      form.addEventListener('submit', (e) => {
        e.preventDefault();
        socket.emit('chat message', input.value);
        input.value = '';
        return false;
      });

      socket.on('chat message', (msg) => {
        const item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
      });
    </script>
  </body>
</html>