学习的知识点
主要是通过简易聊天室熟练掌握 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 服务就可以,具体的代码如下:文章来源:https://www.toymoban.com/news/detail-548643.html
<!-- 引入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];
});
});
完整代码
完整代码示例下载文章来源地址https://www.toymoban.com/news/detail-548643.html
到了这里,关于使用 Node.js 和 Socket.io 构建实时聊天应用程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!