全局webSocket 单个页面进行监听并移除单页面监听

之前全局封装的 webSocket  在某些特定的页面中使用会直接去调用  webSocket  的 onMessage 方法 已进入页面就会调,如果退出页面移除整个监听的话全局监听就会被移除

这是修改后的 全局封装

let token = uni.getStorageSync('token')
const HEARTBEAT_INTERVAL = 1 * 1000; // 心跳间隔时间,单位为毫秒
// const url = `ws://自己的地址/ws?token=${token}&bizUserType=${1}`; 
class WebSocketService {constructor() {this.wsTask = null;this.lastPongTime = Date.now();this.heartbeatTimer = null;this.webSocketType = true// 存储页面特定监听器this.pageListeners = new Map(); this.initSocket();}initSocket() {var that = thistoken = uni.getStorageSync('token')this.wsTask = uni.connectSocket({url: url,success: (res) => {that.startHeartbeat();},fail: (err) => {this.webSocketType = falseconsole.log(err);}});// 监听 WebSocket 打开事件this.wsTask.onOpen(function(res) {});// 监听 WebSocket 接收到服务器消息事件this.wsTask.onMessage((res) => {this.webSocketType = trueif (res.data === 'pong') {this.lastPongTime = Date.now(); // 更新接收到 pong 的时间console.log('收到服务器的心跳响应--运营端111@@@@');} else {var obj = JSON.parse(res.data)if (obj.type == "group-message-send") {var content = JSON.parse(obj.content)}}// 调用所有页面特定监听器this.pageListeners.forEach((listener, pageId) => listener(res));});// 监听 WebSocket 关闭事件this.wsTask.onClose((res) => {console.log('WebSocket 已关闭:---@@@@@运营端', res);that.closeWebSocket()this.webSocketType = false});// 监听 WebSocket 错误事件this.wsTask.onError((err) => {that.closeWebSocket()console.error('WebSocket 错误---@@@@@运营端:', err);this.webSocketType = false});}// 添加 页面监听addPageListener(pageId, listener) {if (!this.pageListeners.has(pageId)) {this.pageListeners.set(pageId, listener);}}// 移除某些页面的监听removePageListener(pageId) {if (this.pageListeners.has(pageId)) {this.pageListeners.delete(pageId);}}closeWebSocket() {this.webSocketType = falseif (this.wsTask) {this.wsTask.close({success: () => {console.log('WebSocket closed successfully');}});}}// 发送消息sendSocketMessage(msg) {this.wsTask.send({data: JSON.stringify(msg),success: () => {this.webSocketType = trueconsole.log('消息发送成功111---@@@@@运营端');// uni.$off('message')},fail: (err) => {this.webSocketType = falseconsole.error('消息发送失败:---@@@@@运营端', err);}});}// 发送心跳连接startHeartbeat() {if (this.heartbeatTimer) {clearInterval(this.heartbeatTimer); // 清除之前的定时器}this.lastPongTime = Date.now(); // 记录上一次接收到 pong 的时间this.heartbeatTimer = setInterval(() => {this.sendHeartbeat();}, HEARTBEAT_INTERVAL);}reconnect() {this.wsTask.close();this.webSocketType = falsesetTimeout(() => {this.initSocket(); // 尝试重新初始化连接}, 500); // 等待5秒后重试}// 重新连接sendHeartbeat() {const currentTime = Date.now();if (currentTime - this.lastPongTime > HEARTBEAT_INTERVAL * 2) {console.warn('心跳超时,重新连接...---@@@@@运营端');this.reconnect();return;}this.wsTask.send({data: 'ping', // 发送 ping 消息success: () => {this.webSocketType = trueconsole.log('心跳消息发送成功---@@@@@运营端');},fail: err => {this.webSocketType = falseconsole.error('心跳消息发送失败---@@@@@运营端:', err);}});}
}// 创建一个全局的 WebSocketService 实例
const webSocketService = new WebSocketService();export default webSocketService;

在页面中使用 

data

pageId: Symbol('jiaohPageId'), // 创建唯一标识符
pageListener: null, // 保存页面特定监听器

onShow生命周期调用

 this.onMessageChange()

在  onHide 和 onUnload 中销毁

this.$webSocketService.removePageListener(this.pageId)
 this.pageListener = null;

 methods 方法

	onMessageChange() {this.pageListener = (res) => {console.log(res, '页面进行监听1111@@');if (res.data != 'pong' && res.data != 'ping') {var obj = JSON.parse(res.data)console.log(obj.type, '=======');switch (obj.type) {case "group-message-send":var content = JSON.parse(obj.content)if (this.getUnreadNum > 99) {this.getUnreadNum = 99} else {this.getUnreadNum += 1}break;case "new-order":this.pageNo = 1this.list = []this.init()break;}}};this.$webSocketService.addPageListener(this.pageId, this.pageListener);},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/65431.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uniapp中wx.getFuzzyLocation报错如何解决

一、用wx.getLocation接口审核不通过 用uniapp开发小程序时难免需要获取当前地理位置。 代码如下: uni.getLocation({type: wgs84,success: function (res) {console.log(当前位置的经度: res.longitude);console.log(当前位置的纬度: r…

【探花交友】day03—MongoDB基础

目录 课程介绍 1、通用设置 1.1 需求分析 1.2 查询通用设置 1.2 陌生人问题 1.3 通知设置 1.4 黑名单管理 2、MongoDB简介 1.1、MongoDB简介 1.2、MongoDB的特点 1.3 数据类型 3、MongoDB入门 2.1、数据库以及表的操作 2.2、新增数据 2.3、更新数据 2.4、删除数…

编程考古-传奇的开始Delphi(下)含所有版本.iso

概览 Delphi 的最新版本,即 Delphi 12,勾勒出了自公司创立以来的一条进化之路。该平台不断通过提升开发者生产力、扩展其支持的平台范围以及引入前沿技术来实现自我完善。作为 Embarcadero 提供的主要快速应用开发(RAD)环境&…

Debian安装配置RocketMQ

安装配置 本次安装在/tools/rocket目录下 下载 wget https://dist.apache.org/repos/dist/release/rocketmq/5.3.1/rocketmq-all-5.3.1-bin-release.zip 解压缩 unzip rocketmq-all-5.3.1-bin-release.zip 如果出现以下报错 -bash: unzip: command not found可安装unzip工具后执…

MyBatis知识点笔记

目录 mybatis mapper-locations的作用? mybatis configuration log-impl 作用? resultType和resultMap的区别? 参数 useGeneratedKeys ,keyColumn,keyProperty作用和用法 取值方式#和$区别 动态标签有哪些 MyBat…

20241218-信息安全理论与技术复习题

20241218-信息安全理论与技术复习题 一、习题1 信息安全的基本属性是(D )。 A、机密性 B、可用性 C、完整性 D、上面 3 项都是 “会话侦听和劫持技术” 是属于(B)的技术。 A、 密码分析还原 B、 协议漏洞渗透 C、 应用漏洞分析与渗透 D、 D…

顶顶通呼叫中心中间件的三种呼叫方式(mod_cti基于FreeSWITCH)

顶顶通呼叫中心共有三种呼叫方式: 手拨呼叫点击呼叫自动外呼 联系我们 有意向了解呼叫中心中间件的用户,可以点击该链接添加工作人员:https://blog.csdn.net/H4_9Y/article/details/136148229 手拨呼叫 手拨呼叫属于常规的呼叫方式&…

C 语言中 strlen 函数的深入剖析

目录 一、strlen 函数的基本介绍 二、strlen 函数的工作原理 三、strlen 函数的使用注意事项 四、strlen 与其他字符串处理函数的结合使用 五、strlen 在实际编程中的应用场景 六、总结 在 C 语言的编程世界里,strlen函数是一个经常被使用但又容易被误解的重要…

Redis 实战篇 ——《黑马点评》(上)

《引言》 在进行了前面关于 Redis 基础篇及其客户端的学习之后,开始着手进行实战篇的学习。因内容很多,所以将会分为【 上 中 下 】三篇记录学习的内容与在学习的过程中解决问题的方法。Redis 实战篇的内容我写的很详细,为了能写的更好也付出…

文档解析丨高效准确的PDF解析工具,赋能企业非结构化数据治理

在数据为王的时代浪潮中,企业数据治理已成为组织优化运营、提高竞争力的关键。随着数字化进程的加速,企业所积累的数据量呈爆炸式增长,数据类型也愈发多样化,这些数据构成了现代企业数据资产的重要组成部分。 然而,传…

支持最新 mysql9的workbench8.0.39 中文汉化教程来了

之前在 B 站上发布了 mysql8 workbench 汉化教程,一年多来帮助很多初学者解决了不熟悉英文的烦恼。 汉化视频可以访问: 2024最新版mysql8.0.39中文版mysql workbench汉化 中文升级 旧版汉化报错解决_哔哩哔哩_bilibili MySql Workbench汉化_哔哩哔哩_…

02-18.python入门基础一基础算法

(一)排序算法 简述: 在 Python 中,有多种常用的排序算法,下面为你详细介绍几种常见的排序算法及其原理、实现代码、时间复杂度以及稳定性等特点,并对比它们适用的场景。 冒泡排序(Bubble Sor…

机器学习详解(11):分类任务的模型评估标准

模型评估是利用不同的评估指标来了解机器学习模型的性能,以及其优势和劣势的过程。评估对于确保机器学习模型的可靠性、泛化能力以及在新数据上的准确预测能力至关重要。 文章目录 1 介绍2 评估准则3 分类指标3.1 准确率 (Accuracy)3.2 精确率 (Precision)3.3 召回率…

【Mac】终端改色-让用户名和主机名有颜色

效果图 配置zsh 1.打开终端,进入.zshrc配置 cd ~ vim .zshrc2.添加如下配置并保存 # 启用命令行颜色显示 export CLICOLOR1 ## 加载颜色支持 autoload -U colors && colors # 配置 zsh 提示符 PROMPT"%{$fg_bold[red]%}%n%{$reset_color%}%{$fg_bol…

【Artificial Intelligence篇】智行未来:AI 在日常出行领域的崛起征程

目录 ​编辑 一、引言: 二、AI 在日常出行中的关键技术应用: 2.1自动驾驶技术: 2.2智能交通管理: 2.3出行辅助系统: 三、AI 在日常出行领域的发展现状: 四、AI 在日常出行领域的未来前景&#xff…

指针之矢:C 语言内存幽境的精准飞梭

一、内存和编码 指针理解的2个要点: 指针是内存中一个最小单元的编号,也就是地址平时口语中说的指针,通常指的是指针变量,是用来存放内存地址的变量 总结:指针就是地址,口语中说的指针通常指的是指针变量。…

springboot478基于vue全家桶的pc端仿淘宝系统(论文+源码)_kaic

摘 要 随着我国经济的高速发展与人们生活水平的日益提高,人们对生活质量的追求也多种多样。尤其在人们生活节奏不断加快的当下,人们更趋向于足不出户解决生活上的问题,网上购物系统展现了其蓬勃生命力和广阔的前景。与此同时,为解…

Html——12. 定义样式和引入样式

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>定义样式和引入样式文件&#xff08;CSS文件&#xff09;</title><style type"text/css">body{font-size: 40px;}</style><link rel"s…

Gitlab17.7+Jenkins2.4.91实现Fastapi/Django项目持续发布版本详细操作(亲测可用)

一、gitlab设置&#xff1a; 1、进入gitlab选择主页在左侧菜单的下面点击管理员按钮。 2、选择左侧菜单的设置&#xff0c;选择网络&#xff0c;在右侧选择出站请求后选择允许来自webhooks和集成对本地网络的请求 3、webhook设置 进入你自己的项目选择左侧菜单的设置&#xff…

pathlib:面向对象的文件系统路径

pathlib:面向对象的文件系统路径 pathlib官方介绍: Python3.4内置的标准库&#xff0c;Object-oriented filesystem paths&#xff08;面向对象的文件系统路径&#xff09; 文章目录 pathlib:面向对象的文件系统路径1. 使用示例1.1 最常用&#xff1a;获取项目目录1.2 遍历一…