在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()}})// 监听连接关闭closesocketTask.onClose((e) => {if (!meClose && Time == null) { //判断是否主动关闭进行重新连接console.log('连接关闭！', meClose);reconnect()}})// 监听收到信息socketTask.onMessage(function(res) {// 接收数据后回调let data = JSON.parse(res.data).dataconsole.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 = truesocketTask.close({success() {console.log("手动关闭成功！");clearInterval(Time) //关闭定时器clearInterval(XTime) //关闭心跳定时器Time = null// 确保已经关闭socketTask = null;}})
}
// 导出方法
export const websocetObj = {sokcet, //连接stop, //关闭sendMsg, //发送
};
