用 socket.io 实现多人聊天室-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 应用程序中，实现实时通信是必不可少的一个功能。在前端开发中，Socket.IO 是一个优秀的工具，可以帮助我们快速实现多人聊天室功能。在本文中，我们将会介绍 Socket.IO 的基本原理和使用方法，并编写一个完整的多人聊天室示例。

什么是 Socket.IO

Socket.IO 是一个开源的实时网络库，允许服务器和客户端通过 Websockets 进行实时通信。它是基于 Node.js 的 Engine.IO 实现的，支持诸如 WebSocket、AJAX 长轮询等多种实现方式，能够在各种浏览器和设备上实现实时性。

Socket.IO 提供了相当简单的 API，让开发者可以轻松发送和接收实时消息，事件和数据。通过 Socket.IO，可以轻松地实现多人聊天室、实时数据更新、在线游戏等功能。

使用 Socket.IO 实现多人聊天室

在本节中，我们将详细介绍如何使用 Socket.IO 搭建一个多人聊天室。整个过程分为三步：

搭建服务器
实现聊天室前端界面
实现聊天室后端逻辑

搭建服务器

首先，我们需要使用 Node.js 搭建一个服务器。在项目根目录下创建 server.js 文件，并安装 Socket.IO，运行以下命令：

npm init
npm install socket.io --save

在 server.js 中，我们需要引入 Socket.IO 包，创建一个 HTTP 服务器，然后在服务器实例中注册 Socket.IO。代码如下：

// www.javascriptcn.com code example
const http = require('http');
const express = require('express');
const app = express();
const server = http.createServer(app);
const io = require('socket.io')(server);

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

这样，我们就搭建好了一个 Socket.IO 服务器，并监听在 3000 端口上。

实现聊天室前端界面

接下来，我们需要实现一个基本的聊天室前端界面。在项目根目录下创建 index.html，并添加以下代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Socket.IO Chat Example</title>
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <div id="messages"></div>
    <form id="chat-form">
      <input id="message-input" type="text" />
      <button type="submit">Send</button>
    </form>
    <script src="./client.js"></script>
  </body>
</html>

在 HTML 中，我们创建了一个 <div> 元素用于显示聊天室消息，一个表单用于发送消息。这里我们使用了 socket.io.js 文件，该文件是 Server 模块通过 HTTP 服务器自动提供的客户端 JS 文件。

在项目根目录下创建 client.js 文件，并添加以下代码：

// www.javascriptcn.com code example
const socket = io();

document.getElementById('chat-form').addEventListener('submit', event => {
  event.preventDefault();
  const message = document.getElementById('message-input').value;
  socket.emit('chat message', message);
  document.getElementById('message-input').value = '';
});

socket.on('chat message', message => {
  const li = document.createElement('li');
  li.textContent = message;
  document.getElementById('messages').appendChild(li);
});

在该 JavaScript 文件中，我们创建了一个 Socket.IO 的实例，连接到服务器。然后，我们添加一个表单提交事件，这样每次提交表单时，发送的消息会被发送到服务器中。在服务器获得消息后，它将会广播给所有聊天室中的用户，然后用户就能看到聊天室中的所有消息了。

实现聊天室后端逻辑

最后，我们需要完成聊天室后端逻辑。在 server.js 文件中添加以下代码：

// www.javascriptcn.com code example
const users = new Set();
io.on('connection', socket => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('a user disconnected');
    users.delete(socket.username);
    io.emit('user disconnected', socket.username);
  });
  socket.on('login', username => {
    console.log(`${username} logged in`);
    socket.username = username;
    users.add(username);
    io.emit('user connected', username);
    io.emit('users', Array.from(users));
  });
  socket.on('chat message', message => {
    io.emit('chat message', `${socket.username}: ${message}`);
  });
});

在该代码中，我们首先创建了一个 Set 用于存储聊天室中所有的用户。当有新的 Socket 连接到服务器时，我们会给服务器输出一条日志，然后处理几个事件：

disconnect：当一个用户断开连接时，我们需要从 Set 中删除他，并广播一条消息告诉其他用户该用户已经离线了。
login：当一个用户登录时，我们需要将其添加到 Set 中，并广播一条消息告诉其他用户该用户已经上线了。此外，我们还需要广播所有用户信息，以便其他客户端能知道所有在线的用户。
chat message：当接收到一个消息时，我们将其广播给所有用户。

至此，我们已经完成了一个基本的多人聊天室。用户可以在聊天室中发送消息，其他用户也能实时接收到消息。而且，我们还实现了在线用户列表和用户进出聊天室的提示。完整代码请参考附录。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d791eca941bf7134d8a95b

用 socket.io 实现多人聊天室

什么是 Socket.IO

使用 Socket.IO 实现多人聊天室

搭建服务器

实现聊天室前端界面

实现聊天室后端逻辑

接着读