学习的知识点
主要是通过简易聊天室熟练掌握 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];});});
完整代码
完整代码示例下载
