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 = `" /> {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, //发送};