Socket.IO 实现多房间聊天系统教程-JavaScript中文网-JavaScript教程资源分享门户

Socket.IO 是一个实现了 WebSocket 协议的 JavaScript 库，可以在客户端和服务器之间建立实时的双向通信。在本文中，我们将使用 Socket.IO 来实现一个多房间聊天系统，用户可以加入不同的房间进行聊天。

准备工作

在开始本教程之前，请确保您已经安装了 Node.js 和 npm。然后，您可以使用以下命令安装 Socket.IO：

npm install socket.io

服务器端代码

首先，我们需要创建一个 Node.js 服务器，并使用 Socket.IO 模块来处理 WebSocket 连接。下面是服务器端代码的示例：

// javascriptcn.com 代码示例
const http = require('http');
const socketio = require('socket.io');

const server = http.createServer();
const io = socketio(server);

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

  socket.on('join', (room) => {
    socket.join(room);
    console.log(`user joined room ${room}`);
  });

  socket.on('leave', (room) => {
    socket.leave(room);
    console.log(`user left room ${room}`);
  });

  socket.on('chat message', (msg, room) => {
    io.to(room).emit('chat message', msg);
    console.log(`message: ${msg}, room: ${room}`);
  });

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

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

上面的代码创建了一个 HTTP 服务器，并使用 Socket.IO 创建了一个 WebSocket 服务器。当有用户连接到服务器时，会触发 connection 事件。在 connection 事件的回调函数中，我们可以处理用户的加入、离开和发送消息等操作。

join 事件表示用户加入房间，leave 事件表示用户离开房间。这两个事件都接收一个房间名作为参数，我们可以使用 socket.join(room) 和 socket.leave(room) 方法来让用户加入或离开房间。

chat message 事件表示用户发送消息，同时也需要指定消息所属的房间。我们可以使用 io.to(room).emit('chat message', msg) 方法来向指定房间的所有用户发送消息。

最后，在 disconnect 事件中处理用户断开连接的操作。

客户端代码

接下来，我们需要编写客户端代码来连接到服务器，并进行聊天。下面是客户端代码的示例：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Socket.IO Chat</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();

      function joinRoom(room) {
        socket.emit('join', room);
      }

      function leaveRoom(room) {
        socket.emit('leave', room);
      }

      function sendMessage() {
        const input = document.getElementById('message');
        const room = document.getElementById('room').value;
        const message = input.value;
        input.value = '';
        socket.emit('chat message', message, room);
      }

      socket.on('chat message', (msg) => {
        const messages = document.getElementById('messages');
        const li = document.createElement('li');
        li.textContent = msg;
        messages.appendChild(li);
      });
    </script>
  </head>
  <body>
    <div>
      <label for="room">Room:</label>
      <input type="text" id="room">
      <button onclick="joinRoom(document.getElementById('room').value)">Join</button>
      <button onclick="leaveRoom(document.getElementById('room').value)">Leave</button>
    </div>
    <ul id="messages"></ul>
    <div>
      <input type="text" id="message">
      <button onclick="sendMessage()">Send</button>
    </div>
  </body>
</html>

上面的代码使用 Socket.IO 客户端库连接到服务器，并定义了加入、离开和发送消息等操作的函数。在 sendMessage 函数中，我们获取了消息输入框中的内容和房间名，然后使用 socket.emit('chat message', message, room) 方法向服务器发送消息。

当收到服务器发送的消息时，我们可以使用 socket.on('chat message', (msg) => { ... }) 方法来处理消息。在这个例子中，我们将消息添加到一个 <ul> 元素中显示。

运行多房间聊天系统

现在，我们已经完成了多房间聊天系统的服务器端和客户端代码。您可以使用以下命令来启动服务器：

node server.js

然后在浏览器中打开客户端页面，输入房间名并点击“加入”按钮，就可以开始聊天了。您可以在不同的浏览器窗口或标签页中打开客户端页面，并加入不同的房间进行聊天。

总结

本文介绍了如何使用 Socket.IO 实现一个多房间聊天系统。通过这个例子，您可以了解到 Socket.IO 的基本使用方法，以及如何处理 WebSocket 连接、加入房间、离开房间和发送消息等操作。希望本文对您有所帮助。

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