使用 Node.js 和 Socket.io 构建可创建、可加入房间的实时聊天室

学习知识点

通过可以加入房间的聊天室应用程序，首先可以回顾 Socket.io 的基本使用方法和流程，并在此基础上我们学习join、to两个 API 方法，从而实现简易的可加入房间的聊天系统。

需要的插件

Socket.io、express和ejs。

梳理应用步骤

在实现应用程序之前，我们先梳理一下我们需要的功能和流程。

所需功能：

• 1、用户可以自己创建聊天房间或者加入聊天房间
• 2、消息的发送只能在对应的房间内发送
• 3、当用户关闭页面后，其他人会收到用户下线的通知

系统开发流程：

• 1、搭建 socketio 服务
• 2、创建服务端与客户端成对的消息交互事件
• 3、创建服务端与客户端用户上线和下线交互事件

实现步骤

1、使用ejs编写房间页面

房间页面主要包含两个功能：

• 1、展示已创建的房间
• 2、创建房间

具体代码如下：

<!-- 房间列表 -->
<div id="room_box">
  <% Object.keys(rooms).forEach(room=> { %>
  <div><%= room %></div>
  <a href="/<%= room %>">加入房间</a>
  <%}) %>
</div>

<!-- 创建房间表单 -->
<form action="/room" method="post">
  <input name="room" type="text" required />
  <button type="submit">创建新房间</button>
</form>

2、使用express创建对应的请求路由和业务处理

app.get("/:room", (req, res) => {
  if (rooms[req.params.room] === null) {
    res, redirect("/");
  }

  res.render("room", { roomName: req.params.room });
});

app.post("/room", (req, res) => {
  // 判断房间是否已经存在
  if (rooms[req.body.room]) {
    return res.redirect("/");
  }

  rooms[req.body.room] = { users: {} };
  res.redirect(req.body.room);

  io.emit("room-create", req.body.room);
});

3、客户端创建监听新建房间的消息

客户端创建监听新建房间的消息，从而可以实时的展示房间列表，具体代码如下：

socket.on("room-create", (room) => {
  const _divEL = document.createElement("div");
  _divEL.innerText = room;

  const _aEl = document.createElement("a");
  _aEl.innerText = `您已加入房间`;
  _aEl.href = `/${room}`;

  roomBox.append(_divEL);
  roomBox.append(_aEl);
});

4、客户端发送创建用户消息到 socketio 服务并加入对应的房间

当用户创建好房间后，页面会跳转到具体的聊天房间页面，进入房间页面后我们需要让页面发送对象的 socketio 消息，这样才能加入具体的房间。具体代码如下：

// 客户端
socket.emit("new-user", roomName, useName);

// 服务端
socket.on("new-user", (room, name) => {
  rooms[room].users[socket.id] = name;
  socket.join(room);
  socket.to(room).emit("user-connected", name);
});

5、实现服务端和客户端消息发送的 socketio 功能

这里的功能可以参考使用 Node.js 和 Socket.io 构建实时聊天应用程序的代码。

只是我们再发送消息的时候要使用 socketio 的to方法来加入对应的房间后在发送消息。具体代码判断如下：

socket.to(room).emit("chat-message", {
  message: message,
  name: rooms[room].users[socket.id],
});

完整代码

完整代码示例下载