uniapp websocket的使用和封装

news2024/9/20 16:32:37

在uniapp中socket分为两种形式,第一种适用于只有一个socket链接,第二种适用于多个socket链接。传送门
在这里插入图片描述
这里以socketTask为列子封装

在utils新建一个文件

在这里插入图片描述

在你要使用的页面引入,我这是聊天那种,所以我在拿到用户信息之后连接socket。
在这里插入图片描述

直接上源码

我这里是找了其他人的,然后改良了一下断线重连,如果重连的次数超过你设置的次数,后面就每30秒重连一下,可以根据自己的需求改细节,大体逻辑都一样。

//引入vuex,因为我需要使用vuex存储得到的数据
import store from "@/store/index.js"
import config from '@/common/config.js'
// 连接
let socketTask = null
// 是否主动关闭连接
let meClose = false
// 地址 写你的后端连接地址
 let url = 你的地址
let token = null
// 重连定时器
let Time = null
// WebSocket 连接次数
let connectCount = 0;
// 最大重连次数
const maxConnectCount = 5;
// 心跳定时器
let XTime = null
// 开启连接
const sokcet = (type) => {
	//判断是否有websocet对象,有的话清空
	if (socketTask) {
		socketTask.close()
		socketTask = null;
	}
	let userId = `?userId=${uni.getStorageSync('userInfo').userId}`
	// 进行连接
	socketTask = uni.connectSocket({
		url: url + userId,
		success(data) {
			clearInterval(XTime) //关闭心跳定时器
			console.log("创建连接!");
		}
	});
	socketTask.onOpen((res) => {
		console.log('连接成功!获取离线信息', res);
		// sendMsg("1000")
		clearInterval(Time) //关闭定时器
		clearInterval(XTime) //关闭心跳定时器
		Time = null
		// // 5秒发送一次心跳//后端检测是否在线
		XTime = setInterval(() => {
			// console.log("心跳");
			sendMsg(JSON.stringify({
				ping: true,
				type: 2
			}))
		}, 5000)

	});
	// 监听连接失败
	socketTask.onError((err) => {
		if (!meClose && Time == null) { //判断是否主动关闭进行重新连接
			console.log('连接失败,请检查');
			reconnect()
		}
	})
	// 监听连接关闭close
	socketTask.onClose((e) => {
		if (!meClose && Time == null) { //判断是否主动关闭进行重新连接
			console.log('连接关闭!', meClose);
			reconnect()
		}
	})
	// 监听收到信息
	socketTask.onMessage(function(res) {
		// 接收数据后回调
		let data = JSON.parse(res.data).data
		console.log('服务器内容:', data);
		store.commit("getMessage", data)
	});
}
// 重新连接
const reconnect = () => {
	connectCount++
	console.log("开始断线重连!!!!!!!!!!!");
	if (connectCount > maxConnectCount) {
		console.log('WebSocket 重连次数已达上限,开始每隔30秒重连一次');
		Time = setInterval(() => {
			sokcet()
		}, 30000)
		return;
	}
	setTimeout(() => {
		// 确保已经关闭后再重新打开
		socketTask.close()
		socketTask = '';
		console.log("重新连接中...");
		sokcet()
	}, 5000);

}
//向后端发送信息
const sendMsg = (msg) => {
	// console.log(msg);
	//通过 WebSocket 连接发送数据
	socketTask.send({
		data: msg,
		success() {
			// console.log("成功");
		},
		fail() {
			console.log("失败");
			uni.showLoading({
				title: "加载中..."
			})
			setTimeout(() => {
				uni.hideLoading()
			}, 1000)
			if (!meClose && Time == null) {
				reconnect()
			}
		},
	});
}
// 手动关闭连接
const stop = () => {
	// 主动关闭连接
	meClose = true
	socketTask.close({
		success() {
			console.log("手动关闭成功!");
			clearInterval(Time) //关闭定时器
			clearInterval(XTime) //关闭心跳定时器
			Time = null
			// 确保已经关闭
			socketTask = null;
		}
	})
}
// 导出方法
export const websocetObj = {
	sokcet, //连接
	stop, //关闭
	sendMsg, //发送
};

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

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

相关文章

某电子文档安全管理系统 SQL注入漏洞复现

漏洞介绍 亿赛通电子文档安全管理系统 (简称: CDG)是一款电子文档安全加密软件,该系统利用驱动层透明加密技术,通过对电子文档的加密保护,防止内部员工泄密和外部人员非法窃取企业核心重要数据资产,对电子文档进行全生命周期防护…

【小沐学Unity3d】3ds Max 减面工具汇总

文章目录 1、简介2、“优化”修改器3、“专业优化”修改器4、“多分辨率”修改器5、Polygon Cruncher5.1 工具简介5.2 下载安装5.3 使用测试 6、Simplyon6.1 工具简介6.2 下载安装6.3 使用测试 7、FAQ7.1 在3dmax里面显示点数和面数 结语 1、简介 有几个 3ds Max 修改器可帮助您…

在线更换Proxmox VE超融合集群Ceph OSD磁盘

因为资源紧张的原因,担心一旦关机,虚拟机因为没有空闲的资源而被冻结,以致于不能漂移,导致部分服务停止,只好让机房帮忙热插拔。 幸运的是,插上去能够被系统所识别(/dev/sdf就是新插入的硬盘&am…

深入理解 Spring Boot:核心知识与约定大于配置原则

深入理解 Spring Boot:核心知识与约定大于配置原则 简单说一下为什么要有 Spring Boot? 因为 Spring 的缺点。 虽然 Spring 的组件代码是轻量级的,但它的配置却是重量级的(需要大量 XML 配置) 为了减少配置文件,简化开发 Spri…

MaBatis使用`ResultMap`标签手动映射详解使用

文章目录 MaBatis使用ResultMap标签手动映射详解使用1、MyBatis只能自动维护库表”列名“与”属性名“相同时的对应关系,二者不同时无法自动ORM,如下:2、在SQL中使用 as 为查询字段添加列别名,以匹配属性名:但是如果我…

JDBC的使用

目录 JDBC简介 JDBC的使用 JDBC简介 JDBC(Java DataBase Connectivity)是用Java操作数据库的一套API。 sun公司官方定义的一套操作所有关系型数据库的规范,即接口。各个数据库厂商去实现这套接口,提供数据库驱动jar包。我们可以使用这套接口(JDBC)来编…

神经网络:优化器和全连接层

SGD(随机梯度下降) 随机梯度下降的优化算法在科研和工业界是很常用的。 很多理论和工程问题都能转化成对目标函数进行最小化的数学问题。 举个例子:梯度下降(Gradient Descent)就好比一个人想从高山上奔跑到山谷最低…

提升数据处理技巧:Python正则表达式的高级应用

提升数据处理技巧:Python正则表达式的高级应用 引言:探索正则表达式的高级应用高级匹配技巧使用正则表达式处理复杂数据正则表达式的性能优化正则表达式的局限和替代方案 引言:探索正则表达式的高级应用 在数据驱动的世界里,有效…

机器学习笔记:支持向量机回归SVR

1 主要思想 主要思路类似于机器学习笔记:支持向量机SVM_支撑向量学习-CSDN博客 和SVM的区别主要有 解法和SVM区别不大,也是KKT 2 和线性回归的区别 对SVR,如果f(x)和y之间的差距小于阈值ε【也即落在两条间隔带之间】,则不计算…

华为交换配置OSPF与BFD联动

实验拓扑 组网需求 如图所示,SW1、SW2和SW3之间运行OSPF,SW1和SW2之间的交换机仅作透传功能。现在需要SW1和SW2能够快速感应它们之间的链路状态,当链路SW1-SW2发生故障时,业务能快速切换到备份链路SW1-SW3-SW2上 配置思路 采用…

QT isDirty函数

参考:QSqlTableModel 类 |Qt SQL 6.6.1

LeetCode 19 删除链表的倒数第 N 个结点

题目描述 删除链表的倒数第 N 个结点 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点。 示例 1: 输入:head [1,2,3,4,5], n 2 输出:[1,2,3,5]示例 2: 输入:head [1], n 1…

Flink cdc3.0同步实例(动态变更表结构、分库分表同步)

文章目录 前言准备flink环境docker构建mysql、doris环境数据准备 通过 FlinkCDC cli 提交任务整库同步同步变更路由变更路由表结构不一致无法同步 结尾 前言 最近Flink CDC 3.0发布, 不仅提供基础的数据同步能力。schema 变更自动同步、整库同步、分库分表等增强功…

开发知识点-HTML/JavaScript

HTML/JavaScript xlinksvgviewBoxuse基础预热与语法基础知识js 如何运行页面适用js 及输出 面向对象抽奖功能 json 支持 字符串转数组数组转字符串数组元素删除长度0位添加一个元素// 表示在下标为1处添加一项tttarray.splice(1,0,ttt)//[123,ttt,456]// 数组是否包含某个元素a…

天猫数据分析(天猫查数据工具):2023年天猫平台假发行业市场销售数据分析报告

如今,由于人们工作和生活的压力较大,居民脱发问题严重,且脱发群体倾向于80后和90后,逐渐向低龄化发展。除脱发外,在颜值经济的背景下,人们越来越注重外貌和形象,假发作为一种改善发型的工具&…

MyBatis——MyBatis的原始Dao开发(了解)

MyBatis的原始Dao开发-了解 使用Mybatis开发Dao,通常有两个方法,即原始Dao开发方式和Mapper接口代理开发方式。而现在主流的开发方式是接口代理开发方式,这种方式总体上更加简便。在之前的文章已经给大家介绍了基于代理方式的dao开发&#x…

Javascript 开发html网页读写IC卡源码

本示例使用设备&#xff1a; Android Linux RFID读写器NFC发卡器WEB可编程NDEF文本/智能海报/-淘宝网 (taobao.com) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">…

OSPF面试总结

OSPF 基本特点 属于IGP、LS支持无类域间路由没有环路&#xff08;区域内运行LS、区域间是DV,所以所有的区域要和区域0相连&#xff09;收敛速度快使用组播发送数据 224.0.0.5、224.0.0.6 什么时候用224.0.0.5&#xff1f;支持多条等价路由支持协议报文认证 OSPF路由的计算过程…

嵌入式热门发展方向有哪些?

嵌入式热门发展方向有哪些? 由于嵌入式的薪资待遇和发展前景都非常不错&#xff0c;现在越来越多的学生从计算机、电子、通信、自动化等相关专业跨行学习嵌入式技术&#xff0c;并将嵌入式开发作为未来职业发展的方向。 嵌入式系统设计是电子产品设计的重要组成部分&#xff0…

短视频账号矩阵系统3年独立开发正规接口源码搭建部署开发

一、矩阵系统源码主要有三种框架&#xff1a; 短视频账号矩阵源码的框架有很多种&#xff0c;以下列举其中几种&#xff1a; 1. **星图矩阵**&#xff1a;星图矩阵是抖音官方向商家提供的短视频广告推广平台&#xff0c;是抖音官方的赚钱工具。商家可利用星图矩阵进行广告推广…