学习知识点
通过可以加入房间的聊天室应用程序，首先可以回顾 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],
});