Socket.io 多房间功能实现方法与实战-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常会用到实时通信功能。而 Socket.io 是一款基于 WebSocket 的 JavaScript 库，可以支持实时通信。Socket.io 能够快速建立连接并且实现了跨平台和实时性的特点，因此被广泛运用在 Web 开发中。

其中，多房间功能可以让不同组特定的人能够交流、沟通，而不会影响其他不相关的用户。在本文中，我将会介绍 Socket.io 多房间功能的实现方法与实战。

建立 Socket 连接

要使用 Socket.io，需要在服务端和客户端中建立 Socket 连接。

建立服务端连接

可以通过以下代码来建立服务端连接：

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

其中，server 是 Node.js 的 http 服务器实例。在一个 Express.js 应用中，可以像下面这样建立服务端连接：

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

const app = express();
const server = http.createServer(app);
const io = require('socket.io')(server);

建立客户端连接

在客户端中，可以通过以下代码建立 Socket 连接：

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

这个连接还可以带上要传递的参数（如用户 ID），来实现更细粒度的控制。

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io({
    query: {
      userId: '12345'
    }
  });
</script>

实现多房间功能

接下来，我们就开始实现 Socket.io 多房间功能了。

加入房间

在 Socket.io 中，可以通过 join 方法加入指定的房间：

socket.join(room);

其中，room 参数就是房间的名称。

离开房间

在 Socket.io 中，可以通过 leave 方法离开指定的房间：

socket.leave(room);

同样地，room 参数就是房间的名称。

广播消息

在 Socket.io 中，可以通过 to 方法向特定的房间广播消息：

io.to(room).emit(event, data);

其中，room 参数指定了接收广播消息的房间。event 参数指定了要广播的事件名称，data 参数指定了要广播的数据。

示例代码

下面是一个完整的 Socket.io 多房间示例代码：

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

const app = express();
const server = http.createServer(app);
const io = require('socket.io')(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('broadcast', (data) => {
    const { room, event, message} = data;
    io.to(room).emit(event, message);
    console.log(`broadcast message: ${message} to room ${room}`);
  });

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

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

在客户端中，可以这样使用：

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();
  socket.on('connect', () => {
    console.log('connected to server');
    
    // 加入房间
    socket.emit('join', 'room1');
    
    // 离开房间
    socket.emit('leave', 'room1');
    
    // 广播消息
    socket.emit('broadcast', {
      room: 'room1',
      event: 'message',
      message: 'hello world'
    });
  });
  socket.on('disconnect', () => {
    console.log('disconnected from server');
  });
</script>

这样就可以实现 Socket.io 多房间功能了。

总结

本文介绍了 Socket.io 多房间功能的实现方法和示例代码。通过加入房间、离开房间和广播消息等操作，可以实现不同组特定的人之间的沟通和交流。Socket.io 提供了快速建立连接和实时通信的能力，因此在 Web 开发中被广泛运用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/659d5fb5add4f0e0ff6a8761

Socket.io 多房间功能实现方法与实战