全局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.rhkb.cn/news/496808.html

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

相关文章

medical meadow medical flashcards

“medalpaca/medical_meadow_medical_flashcards” 是一个在 Hugging Face 数据集平台上可用的数据集。这个数据集主要面向医学领域,包含了大量的医学知识卡片,这些卡片由医学生创建和更新,旨在帮助学习和记忆重要的医学概念。以下是关于这个…

新品:SA628F39大功率全双工音频传输模块

SA628F39是一款高集成度的8W大功率全双工无线数据语音一体通话模块,专为高效、稳定的远程通信设计。该模块内置高速微控制器、高性能射频芯片、功率放大器、ESD静电保护和硬件看门狗芯片,具备反接保护、过流过压保护和防死机保护等多重安全功能&#xff…

moviepy将图片序列制作成视频并加载字幕 - python 实现

DataBall 助力快速掌握数据集的信息和使用方式,会员享有 百种数据集,持续增加中。 需要更多数据资源和技术解决方案,知识星球: “DataBall - X 数据球(free)” -------------------------------------------------------------…

面试突击-JAVA集合类(持续更新...)

前言 这篇文档非常适合面试突击人群,java集合类是面试高频问点,阅读完此文章可以直接应对面试官一切问题,最终吊打面试官。 概览 Java 集合,也叫作容器,主要是由两大接口派生而来:一个是 Collection接口&am…

如何计算相位差

如何计算相位差 假设我们有两个同频率的正弦信号: 这里两个信号的角频率w2πf是相同的,根据同频正弦信号相位差的计算方法,直接用两个信号的相位相减。 再来看利用波形图计算相位差的例子: 另一种计算方式:

龙智出席2024零跑智能汽车技术论坛,分享功能安全、需求管理、版本管理、代码扫描等DevSecOps落地实践

龙智快讯 2024年12月5日,由零跑和盖世汽车主办的“2024零跑智能汽车技术论坛”在杭州零跑总部圆满落幕。此次技术论坛聚焦AI语言大模型、AUTOSAR AP平台、DevOps、端到端自动驾驶等热点话题展开探讨,旨在推动智能汽车技术的创新与发展。 龙智作为国内领先…

剑指Offer|LCR 014. 字符串的排列

LCR 014. 字符串的排列 给定两个字符串 s1 和 s2,写一个函数来判断 s2 是否包含 s1 的某个变位词。 换句话说,第一个字符串的排列之一是第二个字符串的 子串 。 示例 1: 输入: s1 "ab" s2 "eidbaooo" 输出: True 解…

LabVIEW条件配置对话框

条件配置对话框(Configure Condition Dialog Box) 要求:Base Development System 当右键单击**条件禁用结构(Conditional Disable Structure)**并选择以下选项时,会显示此对话框: Add Subdiagr…

YOLO11改进-注意力-引入自调制特征聚合模块SMFA

本篇文章将介绍一个新的改进机制——SMFA(自调制特征聚合模块),并阐述如何将其应用于YOLOv11中,显著提升模型性能。随着深度学习在计算机视觉中的不断进展,目标检测任务也在快速发展。YOLO系列模型(You Onl…

嵌入式硬件杂谈(七)IGBT MOS管 三极管应用场景与区别

引言:在现代嵌入式硬件设计中,开关元件作为电路中的重要组成部分,起着至关重要的作用。三种主要的开关元件——IGBT(绝缘栅双极型晶体管)、MOSFET(金属氧化物半导体场效应晶体管)和三极管&#…

Numpy指南:解锁Python多维数组与矩阵运算(上)

文章一览 前言一、nmupy 简介和功能二、numpy 安装三、numpy基本使用3.1、ndarray 对象3.2、基础数据结构 ndarray 数组3.3、ndarray 数组定义3.4、ndarray 数组属性计算3.5、ndarray 数组创建3.5.1 通过 array 方式创建 ndarray 数组3.5.2 通过 arange 创建数组3.5.3 通过 lin…

SpringCloudAlibaba升级手册-nacos问题记录

目录 一、前言 二、升级过程 1.问题 2.原因 3.出处 4.理论解决 5.测试环境问题 6.Spring Cloud Alibaba版本对比 7. Spring Cloud Alibaba适配组件版本对比 8.降低Spring Cloud版本 9.SpringCloud与SpringBoot兼容对比表 10.naocs-client版本对比 三、最终解决 一…

MetaRename for Mac,适用于 Mac 的文件批量重命名工具

在处理大量文件时,为每个文件手动重命名既耗时又容易出错。对于摄影师、设计师、开发人员等需要频繁处理和整理文件的专业人士来说,找到一款能够简化这一过程的工具是至关重要的。MetaRename for Mac 就是这样一款旨在提高工作效率的应用程序&#xff0c…

blender中合并的模型,在threejs中显示多个mesh;blender多材质烘培成一个材质

描述:在blender中合并的模型导出为glb,在threejs中导入仍显示多个mesh,并不是统一的整体,导致需要整体高亮或者使用DragControls等不能统一控制。 原因:模型有多个材质,在blender中合并的时候,…

IntelliJ Idea常用快捷键详解

文章目录 IntelliJ Idea常用快捷键详解一、引言二、文本编辑与导航1、文本编辑2、代码折叠与展开 三、运行和调试四、代码编辑1、代码补全 五、重构与优化1、重构 六、使用示例代码注释示例代码补全示例 七、总结 IntelliJ Idea常用快捷键详解 一、引言 在Java开发中&#xff…

OpenFOAM2.3.x 圆柱体网格 blockMeshDict

一、使用更高版本的blockMeshDict 1. 设置bashrc alias of7source /opt/OpenFOAM-7/OpenFOAM-7/etc/bashrc alias of2export FOAM_INST_DIR/opt/OpenFOAM foamDotFile$FOAM_INST_DIR/OpenFOAM-2.3.x/etc/bashrc [ -f $foamDotFile ] && . $foamDotFile export LD_LI…

复习打卡大数据篇——Hadoop MapReduce

目录 1. MapReduce基本介绍 2. MapReduce原理 1. MapReduce基本介绍 什么是MapReduce MapReduce是一个分布式运算程序的编程框架,核心功能是将用户编写的业务逻辑代码和自带默认组件整合成一个完整的分布式运算程序,并发运行在Hadoop集群上。 MapRed…

EDGE浏览器每次关闭时再次打开保存的密码就消失如何解决

文章目录 EDGE浏览器每次重启的时候保存的密码都消失如何解决? 打开EDGE浏览器点击三个点 点击设置 点击隐私、搜索和服务 找到选择每次关闭浏览器时要清除的内容 将开启的关闭即可

akamai3.0 wizzair 网站 分析

声明: 本文章中所有内容仅供学习交流使用,不用于其他任何目的,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关! 有相关问题请第一时间头像私信联系我删…

中间件xxl-job安装

拉取镜像 docker pull xuxueli/xxl-job-admin:2.4.2 创建xxl-job-admin容器 docker create --name xxl-job-admin -p 9099:8080 -e PARAMS"--spring.datasource.urljdbc:mysql://192.168.96.57:3306/xxl_job2Unicodetrue&characterEncodingUTF-8 --spring.dataso…