uniapp websocket的使用和封装

在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, //发送
};

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【STM32单片机入门-1】堆栈/全局变量,局部变量,静态全局变量,局部静态变量等

1,堆栈对比 堆:由程序员分配和释放。容易产生碎片,使用方便,地址分配使用从下到上 栈:用来存放函数地址和局部参数,主函数使用时,要对函数的首地址断点保存,地址分配从上到下&#…

微软官方发布的C#开源、免费、实用的Windows工具箱

前言 今天分享一款由微软官方发布的C#开源、免费、实用的Windows工具箱(帮助用户调整和简化Windows系统的体验,从而提高工作效率):Microsoft PowerToys。 项目介绍 Microsoft PowerToys 是使用 C 和 C# 编程语言开发的。它利用了 …

ansible的playbook

1、playbook的组成部分 (1)task任务:在目标主机上执行的操作,使用模块定义这些操作,每个任务都是一个模块的调用 (2)variables变量:存储和传递数据(变量可以自定义&…

DRF从入门到精通二(Request源码分析、DRF之序列化组件)

文章目录 一、Request对象源码分析区分原生request和新生request新的request还能像原来的reqeust一样使用吗源码片段分析总结: 二、DRF之序列化组件序列化介绍序列化步骤序列化组件的基本使用反序列化基本使用反序列化的新增反序列化的新增删除单条 反序列化的校验 …

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

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

Graylog配置日志保留策略

找了半天没找到说的清楚的,只能抠官方文档 graylog的归档(日志持久化)只有付费版才能用,所以日志只能存在es中 1.理解官方给出的几个概念 轮转策略 (Index Rotation Strategy): 轮转策略定义了何时创建新的索引以及何时关闭旧的索…

ssm基于vue技术的绿色蔬菜销售管理系统+vue论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本绿色蔬菜销售管理就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息…

网络技术基础与计算思维实验教程_2.2_单交换机实验_重制版

实验内容 实验目的 实验原理 关键命令说明 开始实验 构建 选择交换机 选择终端--台式机 放置四台终端 直通线连接 依次连接pc0到pc3 终端配置Ip地址和子网掩码 完成了交换机和终端连接以后,为每一个终端配置Ip地址和子网掩码 单击pc0 在选择桌面选项卡中选择Ip配置使用程序 …

快速从图中提取曲线坐标数据的在线工具WebPlotDigitizer

快速从图中提取曲线坐标数据的在线工具WebPlotDigitizer 1 介绍2 WebPlotDigitizer在线版的使用2.1 上传图像2.2 点击横纵坐标点:2.3 选择曲线 3 查看数据参考 1 介绍 写论文时要对比别人曲线图、点图、柱形图的数据,但是只有图没有原始数据怎么办&…

【51单片机系列】C51中的中断系统扩展实验

本文是关于51单片机中断系统的扩展实验。 文章目录 一、 扩展实验一:使用外部中断0控制蜂鸣器,外部中断1控制直流电机二、扩展实验二:修改定时器初值,设定3秒钟的定时时间让LED模块闪烁三、扩展实验三:使用定时器1和数…

基于NestJS 和 TypeORM 实现 CURD RESTful API接口

前言 对于服务端项目而言,对外如何提供合格规范的HTTP接口,对内如何优雅的操作数据存储,比如mysql、mongodb。 本文是NestJS服务端开发的基础入门教程,我会根据成熟的解决方案,给大家详细介绍如何基于NestJS实现开发…

【RTOS学习】源码分析(信号量和互斥量 事件组 任务通知)

🐱作者:一只大喵咪1201 🐱专栏:《RTOS学习》 🔥格言:你只管努力,剩下的交给时间! 目录 🍓信号量和互斥量🍅创建🍅Take🍅Give &#x…

中国激光雷达的2023:倔强的笨小孩

作者 |David 编辑 |王博 现在回头来看,从2007年莱万多夫斯基和大卫霍尔在硅谷骑着摩托车四处兜售激光雷达开始,到2023年仅中国车载市场出货量接近60万,覆盖了市面上40%以上搭载高阶智驾的新车型,激光雷达一直在用有力的数据回应着…

华为atlas300安装教程

1、安装包位置: /data/ai_install_packages 2、添加HwHiAiUser用户: groupadd -g 1000 HwHiAiUser useradd -g HwHiAiUser -u 1000 -d /home/HwHiAiUser -m HwHiAiUser -s /bin/bash 3、安装驱动: ./Ascend-hdk-310p-npu-driver_6.0.0_l…

HashMap扩容是2倍的原因(全网博客几乎都解释错了)

零、前言 最近在写博客时,突然又想起来哪个经常出现在面试题里的问题: HashMap扩容为什么是原来的2倍? 因为看过源码,我觉得这个问题并不难。在我之前的通俗解释equals和hashCode的关系和作用里也说过这个原因。但为了博客的严谨…

DesignDoll使用方法

选择材质球 取消网格线 控制手部动作-设置左右手 - 手部运动 控制身材 控制身高 比例

第三节TypeScript 基础类型

1、typescript的基础类型 如下表: 数据类型 关键字 描述 任意类型 any 生命any的变量可以赋值任意类型的值 数字类型 number 整数或分数 字符串类型 string 使用单引号(‘’)或者双引号(“”)来表示字符串…

RESTful简介与C/C++实现

一、RESTful简介 RESTful,全称为Representational State Transfer,是一种软件架构风格和设计理念,而不是一种标准。它主要用于Web服务的设计和开发,强调资源的状态表示和状态转移。RESTful风格的设计使得Web服务更加简洁、清晰和…

页面菜单,通过get请求一个url后,跳转另外一个页面,+丢失问题

业务场景描述: 在A系统,菜单点击跳B系统这个操作。 A系统菜单是get请求到B系统的一个缓冲页面,然后这个缓冲页面获取到url中的accessToken后,在这个页面中通过post请求后端接口。 问题描述: 当accessToken中包含了…

MongoDB 单机安装部署

文章目录 说明1. 下载安装包2. 安装数据库3. 配置 systemctl4. 创建 root 用户 说明 本篇文章介绍 MongoDB 二进制安装的步骤,整个过程还是比较简单。 1. 下载安装包 进入 MongoDB 官网,获取安装包的下载链接: https://www.mongodb.com/tr…