发布于 2026-01-06 5 阅读
0

Socket.io 命名空间和房间

Socket.io 命名空间和房间

Socket.io 入门指南

Socket.io 是一个易于使用的 JavaScript 库,用于启用 WebSocket 连接。WebSocket 是一种计算机通信协议,它通过单个 TCP 连接提供双向(或全双工)通信通道。

一旦服务器与客户端建立连接,服务器即可主动向客户端推送信息,无需客户端请求。这与标准的HTTP请求-响应周期截然不同,在标准的HTTP请求-响应周期中,服务器只有在收到客户端的请求后才会以响应的形式将信息返回给客户端。

双向通信

一旦多个客户端连接,服务器即可促进这些客户端之间建立低延迟的点对点连接。P2P 网络的常见应用包括文字聊天、视频聊天和文件共享。客户端网络可以连接起来用于群组应用。学习 Socket.io 令人兴奋,因为它极大地拓展了我作为开发者的技能范围。

依赖关系

Socket.io 库分为两个模块,一个用于服务器端,一个用于客户端。在开始任何 Socket.io 项目之前,请确保安装这两个依赖项。如果您使用 TypeScript,则每个模块都有相应的类型库。



# server library
npm i socket.io 
# client library
npm i socket.io-client
# server types library
npm i @types/socket.io
# client types library
@types/socket.io-client


Enter fullscreen mode Exit fullscreen mode

服务器设置

以下是 Express 中一个最基本的服务器配置。



const app = express();
const server = http.createServer(app);
const io = socketConnect(server);

io.on('connection', socket => {
  socket.on('any event you want', () => {
    /* Code to run upon hearing an emit from the client */
  });
  socket.on('another event', () => {
    /* Code to run upon hearing an emit from the client */
  });
  socket.on('disconnect', () => {
    console.log(`user ${socket.id} disconnected`);
  });
});

server.listen(process.env.PORT || 8000, () => console.log('server is running on port 8000'));


Enter fullscreen mode Exit fullscreen mode

所有.on监听器都应对应于.emit客户端的某个方法,但disconnect客户端与服务器断开连接时会运行的监听器除外。此 emit 信号由客户端自动发送。

接下来,我将讨论命名空间和房间这两种不同的服务器逻辑隔离策略的异同。如果您现在感觉有点迷茫,可以参考这篇教程[ https://socket.io/get-started/chat/ ],了解如何使用 socket-io 设置一个简单的聊天应用程序。

Socket.io 命名空间

完成基本的服务器设置,并初始化套接字连接并将其赋值给一个变量(通常是 io)之后,就可以开始考虑命名空间了。默认情况下,如果没有指定命名空间,它们将附加到默认命名空间/

命名空间用于在单个共享连接上隔离服务器逻辑。一个常见的用途是将管理员的关注点与普通用户的关注点分离。

管理员命名空间

我最近开发了一个视频聊天应用,它也具备文字聊天功能。为了实现代码模块化,我使用了两个不同的命名空间。



const chatNsp = io.of('/chat');
chatNsp.on('connection', socket => {
  console.log(`${socket.it} connected to chat namespace`);
  /* chat namespace listeners here */
});

const videoNsp = io.of(/video);
videoNsp.on('connection', socket => {
  console.log(`${socket.it} connected to video namespace`);
  /* video namespace listeners here */
})


Enter fullscreen mode Exit fullscreen mode

在客户端,我可以告诉 Socket.io 客户端连接到我的自定义命名空间:



const videoSocket = io('/chat');
const chatSocket = io('/video');


Enter fullscreen mode Exit fullscreen mode

虽然可以动态创建命名空间,但这并非常见做法。通常情况下,房间更适合用于此目的。

Socket.io 房间

房间是命名空间的子区域,可以由服务器创建。这允许您将数据广播到一组相关的套接字。

房间

提供了两个用于加入和离开房间的实用方法。.join(room, callback).leave(room, callback)两个方法都接受两个参数:房间名称和一个回调函数。

我的视频聊天应用有多个聊天室,用户可以自由切换。每次用户切换聊天室时,客户端都会发送之前聊天室和新聊天室的信息。

服务器端的监听器首先会离开之前的房间socket.leave()。然后,在回调函数中,服务器会将客户端连接到新的房间socket.join()



socket.on('switch room', (previousRoom, newRoom) => {
  socket.leave(previousRoom, () => {
    // use socket.to() to target users within a specific room
    socket.to(previousRoom).emit('user left room', socket.id);
    socket.join(newRoom, () => {
      socket.to(newRoom).emit('user joined room', socket.id);
    });
  });
});


Enter fullscreen mode Exit fullscreen mode

房间功能的优点在于无需提前创建。Socket.io 会在房间尚不存在时自动创建,并在所有用户离开后自动销毁。

结论

Socket.io 是一个学习 WebSocket 通信技术的优秀库。命名空间和房间提供了快速模块化代码以及在不同客户端网络之间进行通信的方法。如需了解更多实用的服务器方法,我推荐您参考Socket.io 文档中的这份速查表。感谢阅读。

文章来源:https://dev.to/wpreble1/socket-io-namespaces-and-rooms-d5h