uniapp websocket的使用和封装_uniapp socket

在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, //发送
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136