uniapp websocket逻辑封装

这里参考的https://blog.csdn.net/weixin_44070058/article/details/123865917的方法
结合自己的实际业务进行了修改


//是否已经连接上ws
let isOpenSocket = false
//心跳间隔,单位毫秒
let heartBeatDelay = 30000
let heartBeatInterval = null
//心跳时发送的消息文本
let heartBeatText = "888"
//最大重连次数
let reconnectTimes = 10
let reconnectInterval = null
//重连间隔,单位毫秒
let reconnectDelay = 10000


let socketTask = null

//这个参数是防止重连失败之后onClose方法会重复执行reconnect方法,导致重连定时器出问题
//连接并打开之后可重连,且只执行重连方法一次
let canReconnect = false

//封装的对象,最后以模块化向外暴露,
//init方法 初始化socketTask对象
//completeClose方法 完全将socketTask关闭(不重连)
//其他关于socketTask的方法与uniapp的socketTask api一致
let ws = {
    
    
	socketTask: null,
	isConnect: false, // 是否已连接
	init,
	completeClose
}

function init(id) {
    
    
	console.log(id);
	socketTask = uni.connectSocket({
    
    
		url: 'wss://192.168', //仅为示例,并非真实接口地址。
		complete: () => {
    
    }
	});
	socketTask.onOpen(res => {
    
    
		console.log("ws连接成功")
		clearTime() // 关闭心跳和重连定时器
		ws.isConnect = true // 判断websocket开启
		isOpenSocket = true //是否已经连接上ws
		canReconnect = true
		//开启心跳机制
		heartBeat()
	});
	socketTask.onError(err => {
    
    
		console.log("ws连接失败", err)
		clearTime();
		ws.isConnect = false // 判断websocket关闭
	});
	socketTask.onMessage(res => {
    
    
		//自定义处理onMessage方法
		console.log('收到的消息', res)
		if(res.data == 888) return

	});
	socketTask.onClose(() => {
		if (isOpenSocket) {
			console.log("ws与服务器断开")
		} else {
			console.log("连接失败")
		}
		ws.isConnect = false // 判断websocket关闭
		isOpenSocket = false
		if (canReconnect) {
			// 开启一次重连机制
			reconnect()
			canReconnect = false
		}
	});
	ws.socketTask = socketTask
};
// 心跳发送
function heartBeat() {
	heartBeatInterval = setInterval(() => {
		console.log(heartBeatText)
		send(JSON.stringify(heartBeatText));
	}, heartBeatDelay)
}

function send(value) {
    
    
	ws.socketTask.send({
    
    
		data: value,
		async success() {
    
    
			console.log("消息发送成功")
		}
	});
}

function reconnect() {
    
    
	//停止发送心跳
	if (heartBeatInterval) {
    
    
		clearInterval(heartBeatInterval)
	}
	//如果不是人为关闭的话,进行重连
	if (!isOpenSocket) {
    
    
		let count = 0;
		reconnectInterval = setInterval(() => {
    
    
			console.log("正在尝试重连")
			init();
			count++
			//重连一定次数后就不再重连
			if (count >= reconnectTimes) {
    
    
				clearTime()
				console.log("网络异常或服务器错误")
			}
		}, reconnectDelay)
	}
}
// 心跳与重连的定时器清除
function clearTime() {
    
    
	if (heartBeatInterval) {
    
    
		clearInterval(heartBeatInterval)
	}
	if (reconnectInterval) {
    
    
		clearInterval(reconnectInterval)
	}
}

function completeClose() {
    
    
	//先将心跳与重连的定时器清除
	clearTime();
	ws.isConnect = false // 判断websocket关闭
	canReconnect = false
	if(ws.socketTask){
    
    
		console.log("关闭连接")
		ws.socketTask.close()
	}
}

module.exports = ws

在实际过程中,建立长连接响应耗时比较长,而长期保持无用的长连接又会对服务器造成压力,所以需要在不用或者意外断开的时候关闭掉长连接ws.isConnect = false,在建立的时候判断ws.isConnect是否开启从而减少连接的建立耗时

if(!this.$ws.isConnect){
    
    
	// 如果没有长连接则建立连接
	this.$ws.init('建立的连接传参')
}

猜你喜欢

转载自blog.csdn.net/weixin_38566069/article/details/130626330
今日推荐