前端WebSocket的方法封装
一、封装方法
在项目根目录src下的utils中新增webSocketManager.js封装文件，代码内容如下：
// webSocketManager.js
/** WebSocketMessenger封装类 */
class WebSocketManager {
constructor(url = null, userId = null, receiveMessageCallback = null) {
this.socket = null // WebSocket 对象
this.sendTimeObj = null // 发送信息给服务端的重复调用的时间定时器
this.reconnectTimeObj = null // 尝试链接的宏观定时器
this.reconnectTimeDistance = 5000 // 重连间隔，单位：毫秒
this.maxReconnectAttempts = 10 // 最大重连尝试次数
this.reconnectAttempts = 0 // 当前重连尝试次数
this.id = userId //用户ID（业务逻辑，根据自己业务需求调整）
this.url = url // WebSocket 连接地址
this.receiveMessageCallback = receiveMessageCallback // 接收消息回调函数
}
/**
* 开启WebSocket
*/
async start() {
if (this.url && this.id) {
// 连接WebSocket
this.connectWebSocket()
} else {
console.error('WebSocket erros: 请传入连接地址和用户id')
}
}
/**
* 创建WebSocket连接
*/
connectWebSocket() {
// 通过id生成唯一值（服务端要求，具体根据自己业务去调整）
let protocol = `${this.id}-${Math.random()}` //字符串用于指定子协议，可以实现单个服务器多个 WebSocket 子协议
// 创建 WebSocket 对象，protocol为可选参数，默认值为空字符串
this.socket = new WebSocket(this.url, protocol) // WebSocket连接实例
// 处理连接打开事件
this.socket.onopen = (event) => {
// 给服务端发送第一条反馈信息
this.startSendServe()
}
// 处理接收到消息事件
this.socket.onmessage = (event) => {
this.receiveMessage(event)
}
// 处理连接关闭事件
this.socket.onclose = (event) => {
// 清除定时器
clearTimeout(this.sendTimeObj)
clearTimeout(this.reconnectTimeObj)
// 尝试重连
if (this.reconnectAttempts < this.maxReconnectAttempts) {
this.reconnectAttempts++
console.log('重试链接次数：'+ this.reconnectAttempts)
this.reconnectTimeObj = setTimeout(() => {
this.connectWebSocket()
}, this.reconnectTimeDistance)
} else {
// 重置重连次数
this.reconnectAttempts = 0
console.error(
'WebSocketManager erros: Max reconnect attempts reached. Unable to reconnect.'
)
}
}
// 处理 WebSocket 错误事件
this.socket.onerror = (event) => {
console.error('WebSocketManager error:', event)
}
}
/**
* 发送给服务器的第一条信息，测试链接打开
*/
startSendServe() {
this.sendMessage('hi I come from client')
}
/**
* 发送消息
* @param {String} message 消息内容
*/
sendMessage(message) {
if (this.socket.readyState === WebSocket.OPEN) {
this.socket.send(message)
} else {
console.error(
'WebSocketManager error: WebSocket connection is not open. Unable to send message.'
)
}
}
/**
* 接收到消息
*/
receiveMessage(event) {
// 根据业务自行处理
console.log('receiveMessage:', event.data)
this.receiveMessageCallback && this.receiveMessageCallback(event.data)
}
/**
* 关闭连接
*/
closeWebSocket() {
this.socket.close()
// 清除定时器 重置重连次数
clearTimeout(this.sendTimeObj)
clearTimeout(this.reconnectTimeObj)
this.reconnectAttempts = 0
}
}
二、使用示例
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./utils/webSocketManager.js"></script>
<script>
//引入 const WebSocketManager = require('./webSocketManager.js')
console.log(WebSocketManager)
/**
* 接收消息回调
*/
const receiveMessage = (res)=>{
console.log('接收消息回调：',res)
}
const socketManager = new WebSocketManager('ws://localhost:3000', 'userid292992', receiveMessage)
socketManager.start()
</script>
</head>
感谢梦幻星辰吧大佬的技术分享，本文为自用备忘记录，原文链接：https://mp.weixin.qq.com/s/mSfgo3SRAwT83JJsVZ1HJw
前端WebSocket的方法封装的更多相关文章
- 【前端学习笔记04】JavaScript数据通信Ajax方法封装
//Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...
- 前端js重组树形结构数据方法封装
不知道大家平时工作中,有没有遇到这样一种情况:后端接口返回的数据,全都是一维的数组,都是平铺直叙式的数据,业务需求却要你实现树形结构的功能.那么,针对这种情况该怎么办呢?是跟后台好好沟通一下呢,还是沟 ...
- WebIM技术---编写前端WebSocket组件
过去我们想要实现一个实时Web应用通常会考虑采用ajax轮循或者是long polling技术,但是因为频繁的建立http连接会带来多余的请求以及消息精准性的问题,让我们在实现实时Web应用时头疼不已 ...
- 常用js方法封装
常用js方法封装 var myJs = { /* * 格式化日期 * @param dt 日期对象 * @returns {string} 返回值是格式化的字符串日期 */ getDates: fun ...
- 循序渐进VUE+Element 前端应用开发(13）--- 前端API接口的封装处理
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>介绍了一个系统最初接触到的前端登录处理的实现,但往往对整个系统来说,一般会有很多业务对 ...
- js引用类型深拷贝、浅拷贝方法封装
引用类型的深拷贝.浅拷贝在前端领域一直是个很重要的知识点,不仅在业务中频繁使用,也是面试官们喜欢考的的知识点之一.本篇将封装引用类型的深拷贝.浅拷贝方法,并解决在封装过程中出现的问题. 一.浅拷贝 浅 ...
- C#常用字符串加解密方法封装
C#中常用的字符串加密.解密方法封装,包含只加密但不解密的方法.收藏起来备用. //方法一 //须添加对System.Web的引用 //using System.Web.Security; /// & ...
- 编写SqlHelper使用，在将ExecuteReader方法封装进而读取数据库中的数据时会产生Additional information: 阅读器关闭时尝试调用 Read 无效问题，解决方法与解释
在自学杨中科老师的视频教学时,拓展编写SqlHelper使用,在将ExecuteReader方法封装进而读取数据库中的数据时 会产生Additional information: 阅读器关闭时尝试调用 ...
- C#方法封装与重构
C#作为一个完全面向对象的语言,有个特性很重要但是往往会不重视,而不重视的结果就会造成代码杂乱难以解读.维护.这个特性就是封装. 这里不是大谈C#的封装,我只讲一个,关于方法封装的一些问题. ...
- 基于promise对小程序http请求方法封装
原因是我不想每次请求都复制粘贴那么长的请求地址,所以我把前边那一坨请求地址作为基础地址,只传后台给的路由就ok,而且,并不是每次请求都要显示正在加载,这对小程序体验很差,所以,我加了个形参,用来判断是 ...
随机推荐
- Supervisor-进程守护工具
前言 Supervisor是用Python开发的一套通用的进程管理程序,能将一个普通的命令行进程变为后台daemon,并监控进程状态,异常退出时能自动重启.它是通过fork/exec的方式把这些被管理 ...
- Windows 终端远程连接 Ubuntu
博客地址:https://www.cnblogs.com/zylyehuo/ 查看 ip 的方式参考以下链接 Ubuntu 下查看 ip - zylyehuo - 博客园 在 windows 终端中执 ...
- RabbitMQ 延迟任务（限时订单） 思路
一.场景 我们经常会碰见,一个需求就是,发送一条指令(消息),延迟一段时间执行,比如说常见的淘宝当下了一个订单后,订单支付时间为半个小时,如果半个小时没有支付,则关闭该订单.当然实现的方式有几种,今天 ...
- MySQL-对Change Buffer的理解
Change Buffer的处理过程 对非唯一的普通索引的新增或更新操作,如果索引B+树的需要新增或更新的数据页不在内存中,则直接更新change buffer,等到后面需要使用这个数据页(真正读到内 ...
- CSP - J理论（2）
CSP - J理论(2) CSP-J理论合集跳转 目录 本目录中所有标题单击均可以快速跳转哦
- Mybatis搭建环境时需要注意事项
- 40+程序员亲历AI冲击，出路在何方？
关注[智践行],我们一起成长 技术革新从不以人的意志为转移,但却能因个人的选择而重铸职业轨迹,AI崛起的当下,程序员的命运之笔正握在自己手中. 今年春节前后,AI界热闹非凡,各种大模型的新突破.超强的 ...
- win7激活，2023年亲测可用 ，win7激活密钥，激活码
还在找激活密钥,激活win7吗,试了无数个都激活不了? 直接用这个工具激活吧,亲测可用,用过的都知道. WIN7Chew-WGA0.9.exe 阿里云盘:https://www.aliyundrive ...
- 揭秘AI自动化框架Browser-use（终）：利用MCP与Spring AI，3行代码复刻Browser-use实现
技术背景与目标 在前几篇文章中,我们深入解析了Browser-use框架的核心机制,包括DOM树遍历与分析.提示词构造.任务分解与规划.以及浏览器操作的函数调用.我们将通过Spring AI和Play ...
- MCP Server On FC 之旅1: MCP 协议的深度解析与云上适配最佳实践
在人工智能技术高速发展的今天,数据孤岛.工具碎片化.上下文割裂问题已成为制约大模型发挥潜力的关键瓶颈.Model Context Protocol(MCP)作为 Anthropic 于 2024 年推 ...