全局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);},
相关文章:
全局webSocket 单个页面进行监听并移除单页面监听
之前全局封装的 webSocket 在某些特定的页面中使用会直接去调用 webSocket 的 onMessage 方法 已进入页面就会调,如果退出页面移除整个监听的话全局监听就会被移除 这是修改后的 全局封装 let token uni.getStorageSync(token) const HEARTBEAT_INTERVAL 1 *…...
JVM调优实践篇
理论篇 1多功能养鱼塘-JVM内存 大鱼塘O(可分配内存): JVM可以调度使用的总的内存数,这个数量受操作系统进程寻址范围、系统虚拟内存总数、系统物理内存总数、其他系统运行所占用的内存资源等因素的制约。 小池塘A&a…...
【JavaEE】Spring Web MVC
目录 一、Spring Web MVC简介 1.1 MVC简介1.2 Spring MVC1.3 RequestMapping注解1.3.1 使用1.3.2 RequestMapping的请求设置 1.3.2.1 方法11.3.2.2 方法2 二、Postman介绍 2.1 创建请求2.2 界面如下:2.3 传参介绍 一、Spring Web MVC简介 官方文档介绍ÿ…...
VSCode 插件开发实战(七):插件支持了哪些事件,以及如何利用和监听这些事件
前言 VSCode 作为现代开发者的首选编辑器之一,其核心优势在于其高度可扩展性。通过自定义插件,开发者可以根据自己的需求对编辑器进行功能扩展和优化。在这些插件开发过程中,事件处理和监听机制尤为重要,它们允许插件在特定事件发…...
指针详解之 多层嵌套的关系
1 例子之指向3个字符串的指针数组,易混淆! 1.1过程详解: char *str[3]{ "Hello,thisisasample!", "Hi,goodmorning.", "Helloworld" }; char s[80]; strcpy(s,str[0]); //也可写成strcpy(s,*st…...
Animated Drawings:让纸上的角色动起来
前言 今天介绍的这个工具非常的有意思:它可以让我们在纸上绘画的角色动起来。先一起来看看效果: 准备 首先,我们先准备一张绘画。可以在纸上进行绘制,也可以在电子设备上进行绘制。绘制内容不限,在这里为了方便演示&am…...
技术与教育的结合:高校听课评价系统的设计与实施
3.1系统可行性分析 需要使用大部分精力开发的高校听课评价系统为了充分降低开发风险,特意在开发之前进行可行性分析这个验证系统开发是否可行的步骤。本文就会从技术角度,经济角度,还有用户使用的程序的运行角度进行综合阐述。 3.1.1 技术可行…...
web移动端项目常用解决方案
移动端总会遇到一系列特定于移动设备的问题,分享下常见的移动端常见问题的处理方案。 1px边框问题 在高清屏幕下,1px的边框显示得比较粗。 .border-1px {position: relative; } .border-1px::after {position: absolute;content: ;width: 200%;height:…...
LabVIEW软件项目设计方案如何制定
制定LabVIEW软件项目设计方案需要综合考虑需求分析、架构设计、功能模块划分和时间预算等多个方面,确保项目开发过程高效、可控且最终满足目标要求。以下是一个详细的制定流程: 1. 需求分析 目标定义:明确项目的目标,例如数据采…...
数据结构(Java)——链表
1.概念及结构 链表是一种 物理存储结构上非连续 存储结构,数据元素的 逻辑顺序 是通过链表中的 引用链接 次序实现的 。 2.分类 链表的结构非常多样,以下情况组合起来就有 8 种链表结构: (1)单向或者双向 (…...
变量与数据类型 - 整型、浮点型、字符型等
引言 在编程中,变量和数据类型是基础中的基础。理解它们如何工作以及如何正确使用它们对于编写高效且无误的代码至关重要。本文将详细介绍 C 中的几种基本数据类型:整型、浮点型、字符型等,并通过实例帮助读者更好地理解和掌握这些概念。 一…...
MacOS安装Xcode(非App Store)
文章目录 访问官网资源页面 访问官网资源页面 直接访问官网的历史版本下载资源页面地址:https://developer.apple.com/download/more/完成APP ID的登陆,直接找到需要的软件下载即可 解压后,安装将xcode.app移动到应用程序文件夹。...
运行Zr.Admin项目(后端)
1.下载Zr.Admin代码压缩包 https://codeload.github.com/izhaorui/Zr.Admin.NET/zip/refs/heads/main 2.打开项目 我这里装的是VS2022社区版 进入根目录,双击ZRAdmin.sln打开项目 3.安装.net7运行时 我当时下载的代码版本是.net7的 点击安装 点击安装࿰…...
Ubuntu24.04最新版本安装详细教程
Ubuntu 24.04 LTS发布说明 推荐的系统配置要求: 双核2 GHz处理器或更高 4 GB系统内存 25 GB磁盘存储空间 可访问的互联网 光驱或USB安装介质 Ubuntu 24.04官方下载网址:https://cn.ubuntu.com/download/desktop 04. Ubuntu 22.04(创建虚拟机方式一) 4…...
js版本之ES6特性简述【Proxy、Reflect、Iterator、Generator】(五)
目录 Proxy Reflect 静态方法 部分实例 Iterator 实际开发迭代器的使用实例 迭代器(Iterator)应用 Generator Proxy Proxy 是 ES6 中新增的对象 Proxy 是JavaScript中的内置对象,它提供了一种机制,可以拦截并自定义各种…...
CSS实现一个自定义的滚动条
要使用CSS创建一个自定义的滚动条,你可以使用伪元素和CSS的伪类来控制滚动条的外观和行为。以下是一个简单的例子,展示如何为任何HTML元素添加一个自定义的滚动条样式: <!DOCTYPE html> <html lang"en"> <head> …...
CKA认证 | Day8 K8s安全
第八章 Kubernetes安全 1、Kubernetes RBAC授权 Kubernetes 基于角色的访问控制(Role-Based Access Control, RBAC) 是一种强大的权限管理机制,用于控制用户、用户组、服务账户对 Kubernetes 集群资源的访问。通过 RBAC,可以细…...
深度分析java 使用 proguard 如何解析混淆后的堆栈
经过proguard混淆过后,发生异常时堆栈也进行了混淆,那么如果获取的原始的堆栈呢?我们下面来看下 使用proguard 根据mapping文件直接解析 import proguard.obfuscate.MappingReader; import proguard.retrace.FrameInfo; import proguard.re…...
bash 中 ${-#*i} 是什么意思?
-------------------------------------------------- author: hjjdebug date: 2024年 12月 25日 星期三 17:43:45 CST description: bash 中 ${-#*i} 是什么意思? -------------------------------------------------- 在centos 的 /etc/profile 中有这样的语句 for i in /…...
什么是Top-p采样与Top-k采样?大模型推理时如何同时设置?解析Transformers库源代码
什么是Top-p采样与Top-k采样?大模型推理时如何同时设置? 在自然语言生成(NLG)和大规模语言模型推理中,Top-k采样 和 Top-p采样 是两种常用的解码策略,用于控制生成文本的多样性和质量。它们在生成过程中对…...
接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装(Encapsulation) 定义:将数据(属性)和操作数据的方法绑定在一起,通过访问控制符(private、protected、public)隐藏内部实现细节。示例: public …...
中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试
作者:Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位:中南大学地球科学与信息物理学院论文标题:BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接:https://arxiv.…...
iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候,难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵,或者买了二手 iPhone 却被原来的 iCloud 账号锁住,这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...
Android15默认授权浮窗权限
我们经常有那种需求,客户需要定制的apk集成在ROM中,并且默认授予其【显示在其他应用的上层】权限,也就是我们常说的浮窗权限,那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
群晖NAS如何在虚拟机创建飞牛NAS
套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...
通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器
拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件: 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...
pycharm 设置环境出错
pycharm 设置环境出错 pycharm 新建项目,设置虚拟环境,出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...
C++实现分布式网络通信框架RPC(2)——rpc发布端
有了上篇文章的项目的基本知识的了解,现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...
