使用 Node.js 和 Socket.io 构建实时聊天应用程序

学习的知识点

主要是通过简易聊天室熟练掌握 Socket.io 相关方法和运行的过程。

需要的插件

Socket.io

梳理应用步骤

在进行实现简易实时聊天室之前，我们先梳理一下我们需要的功能和流程。

所需功能：

• 1、告知用户已经连接到聊天室
• 2、自己发送时，页面展示对应的消息展示，而对方看的到信息是谁发送了什么
• 3、当用户关闭页面后，其他人会收到用户下线的通知

系统开发流程：

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

大致实现步骤

1、搭建实时聊天应用的页面，具体代码片段如下：

<div id="message_box"></div>
<form id="send_box">
  <input type="text" id="message_input" />
  <button type="submit" id="send_button">发送</button>
</form>

2、搭建 socketio 服务

• 1、安装所需插件

安装命令 npm install socket.io

• 2、创建 socket.io 服务

const io = require("socket.io")(3000);

• 3、创建 socket.io 连接

当我们创建了 socket.io 的服务后，我们还需要创建 io 连接后才能向客户端发送消息和定义消息监听。创建连接的具体代码如下：

io.on("connection", (socket) => {});

• 4、创建对应服务端消息监听事件和发送对应消息给客户端

创建好 socket.io 连接后，我们就可以自定义客户端发送消息的监听事件，并且接收到消息后我们可以使用broadcast.emit方法来发送消息给。具体的代码如下：

/**
 * 服务端创建名为send-chat-message的消息监听
 * 客户端接收chat-message类的消息
 */
socket.on("send-chat-message", (message) => {
  console.log(message);
  socket.broadcast.emit("chat-message", message); // 发送消息给客户端
});

• 5、搭建 socketio 的客户端

搭建 socketio 的客户端只要引入对应的依赖文件和连接对应的 socketio 服务就可以，具体的代码如下：

<!-- 引入socketio所需的依赖 -->
<script defer src="http://localhost:3000/socket.io/socket.io.js"></script>

const socket = io("http://localhost:3000"); // 与socketio服务端进行连接

• 6、客户端向 socketio 服务端发送消息

socket.emit("send-chat-message", message); // 向socket.io服务器发送消息

• 7、服务端监听用户进入聊天室和告知客户端信息

socket.emit("new-user", useName); // 客户端发送姓名到执行的socketio接收器中

// 监听客户端发送过来的new-user类的消息
socket.on("new-user", (name) => {
  users[socket.id] = name;
  socket.broadcast.emit("user-connected", name);
});

核心代码片段

客户端

const socket = io("http://localhost:3000");

const useName = prompt("您的姓名是：");
appendMessage("你已经加入聊天系统");
socket.emit("new-user", useName);

socket.on("chat-message", (data) => {
  appendMessage(`用户${data.name}说了: ${data.message}`);
});

socket.on("user-connected", (data) => {
  appendMessage(`${data} 已连接`);
});

socket.on("user-disconnected", (data) => {
  appendMessage(`${data} 已下线`);
});

messageForm.addEventListener("submit", (e) => {
  e.preventDefault();
  const message = messageInput.value;
  appendMessage(`您发了：${message}`);
  socket.emit("send-chat-message", message); // 向socket.io服务器发送消息
  messageInput.value = "";
});

服务端

const io = require("socket.io")(3000);

io.on("connection", (socket) => {
  socket.on("new-user", (name) => {
    users[socket.id] = name;
    socket.broadcast.emit("user-connected", name);
  });

  socket.on("send-chat-message", (message) => {
    socket.broadcast.emit("chat-message", {
      message: message,
      name: users[socket.id],
    });
  });

  socket.on("disconnect", () => {
    socket.broadcast.emit("user-disconnected", users[socket.id]);
    delete users[socket.id];
  });
});

完整代码

完整代码示例下载