在uniapp中socket分为两种形式，第一种适用于只有一个socket链接，第二种适用于多个socket链接。传送门
这里以socketTask为列子封装
在utils新建一个文件
在你要使用的页面引入，我这是聊天那种，所以我在拿到用户信息之后连接socket。
文章来源：https://www.toymoban.com/news/detail-826272.html
直接上源码
我这里是找了其他人的，然后改良了一下断线重连，如果重连的次数超过你设置的次数，后面就每30秒重连一下，可以根据自己的需求改细节，大体逻辑都一样。文章来源地址https://www.toymoban.com/news/detail-826272.html
//引入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, //发送
};
到了这里，关于uniapp websocket的使用和封装的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
