基于 Node.js 的多人聊天室：构建实时协作的在线空间

2023-11-16 15:10:54

构建基于 Node.js 和 Socket.IO 的实时多人聊天室

实时通信的兴起

在当今数字化时代，实时通信已成为人们交流和协作的基石。多人聊天室作为一种颇受欢迎的实时通信工具，为用户提供了一个虚拟空间，让他们可以进行即时对话和互动。如果您是一位对编程充满热情并渴望探索实时通信领域的奥秘的技术爱好者，那么本文将带您踏上一段精彩的旅程，通过构建基于 Node.js 的多人聊天室，深入了解 Socket.IO 的强大功能。

Socket.IO 简介

Socket.IO 是一个基于 WebSocket 的库，它可以在客户端和服务器之间建立双向通信通道。与传统的 HTTP 请求不同，WebSocket 连接是一种持久连接，允许客户端和服务器在整个连接期间持续交换数据，实现实时通信。

构建多人聊天室

服务器端实现

首先，我们需要创建一个新的 Node.js 项目，并安装 Socket.IO 和 Express：

npm install socket.io express

接下来，让我们创建一个简单的服务器端文件，它将侦听传入连接并处理聊天室的功能。在文件中，我们将使用 Socket.IO 的 socket.on() 方法侦听来自客户端的连接请求，并使用 socket.emit() 方法向客户端发送数据。

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

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

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

客户端实现

在客户端，我们需要创建一个简单的 HTML 页面，它将包含一个聊天输入框和一个聊天消息列表。在页面中，我们将使用 Socket.IO 的 io.connect() 方法连接到服务器，并使用 socket.emit() 方法发送聊天消息。

<html>
<head>
  
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <h1>多人聊天室</h1>
  <input type="text" id="chat-input">
  <button id="chat-send-button">发送</button>
  <ul id="chat-messages"></ul>

  <script>
    const socket = io();

    document.getElementById('chat-send-button').addEventListener('click', () => {
      const msg = document.getElementById('chat-input').value;
      socket.emit('chat message', msg);
    });

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