全局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,一经查实,立即删除!

相关文章

每天五分钟机器学习:凸函数

一、凸函数的定义:何为“凸”? 在数学上,凸函数的概念源于几何直观——想象一个平面上的曲线,如果在这条曲线上的任意两点之间连线段总是位于曲线的下方(或恰好与曲线重合),则这条曲线所对应的函数即为凸函数。更正式地,对于定义在实数集(或某个子集)上的函数f(x),…

uniapp中wx.getFuzzyLocation报错如何解决

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

springMVC-请求响应

springmvc——一 站式web框架,核心是处理http请求响应。 前后端分离:需要序列化,服务端把数据序列化成字符串或者流给前端,前端又把json转成对象,前端的叫反序列化。前端把数据序列化转成字符串给服务器,服…

【探花交友】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…

关于 VRRP的详解

VRRP(Virtual Router Redundancy Protocol,虚拟路由器协议)是一个用于提高网络可靠性和可用性的协议。它通过允许多个路由器(物理设备)在同一网络中共享一个虚拟IP地址,从而提供了冗余这样,即使…

datax与sqoop的优缺点?

DataX 的优缺点 优点 多种数据源支持:DataX 是一个开源的数据同步工具,它支持多种数据源之间的数据传输,包括关系型数据库(如 MySQL、Oracle、SQL Server 等)、非关系型数据库(如 HBase、Hive、Elasticsear…

FreePBX修改IP地址和端口以及添加SSL证书开启HTTPS访问

最近给单位部署了freepbx网络电话系统,我的系统是安装在ibm x3650 m4物理机上的,iso镜像下载后直接用Rufus烧录到U盘,服务器上先做好了raid1,插上U盘重启服务器开撸。安装过程略过了,在虚拟机上安装就不用那么麻烦。 …

FastAPI vs Flask 专业对比与选择

FastAPI与Flask是两个流行的Python Web框架,它们在构建Web应用程序和API方面各有特点。以下是对这两个框架的详细比较: 一、设计理念与用途 Flask: 是一个轻量级的Python Web框架,基于Werkzeug WSGI工具箱和Jinja2模板引擎。设计…

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

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

Android `android.graphics.drawable` 包深度解析:架构与设计模式

Android android.graphics.drawable 包深度解析:架构与设计模式 目录 引言Drawable 概述Drawable 的架构 Drawable 类层次结构Drawable 的核心方法Drawable 的设计模式 装饰者模式工厂模式状态模式常用 Drawable 子类解析 BitmapDrawableShapeDrawableLayerDrawableStateList…

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

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

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

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

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

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

深入解析Spring Boot中的@ConfigurationProperties注解

深入解析Spring Boot中的ConfigurationProperties注解 在Spring Boot框架中,配置管理是一个核心功能。Spring Boot提供了多种方式来处理外部配置,其中ConfigurationProperties注解是一个非常强大且灵活的工具。本文将深入探讨ConfigurationProperties注…

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

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

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

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

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

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