uniapp：白色 1 分钟学会使用 webSocket（可无脑复制）
最编程
2024-04-25 19:17:32
...
import Vue from 'vue';
export default {
namespaced: true,
state: {
socketUrl:'wss://api.****.com/wss/default.io', // socke链接
isclose: false, // 是否已连接
reconnections: 0, // 连接次数
heartbeatInterval: null, // 心跳检测
},
mutations: {
},
actions: {
// 开始或重启即时通讯，全局监听
async start({state, dispatch, rootState}){
// 如果已连接，关闭重新连接
uni.onSocketOpen(()=> {
state.isclose = true;
});
if (state.isclose) {
uni.closeSocket();
uni.onSocketClose((res)=> {
clearInterval(state.heartbeatInterval)
state.heartbeatInterval = null
console.log('已经连接中的Socket关闭成功')
});
}
// 获取token省略，自行请求接口并赋值，这里只是快速演示如何：创建一个 WebSocket 连接
let token = 'eyJ0****c1Ng'
if(token){
let url = `${state.socketUrl}?token=${token}`
uni.connectSocket({url});
}else{
console.log('未获取到token');
}
// 监听 WebSocket 连接打开事件
uni.onSocketOpen((res)=> {
console.log('新创建的Socket连接成功');
});
// 监听WebSocket错误。
uni.onSocketError((res)=> {
state.reconnections += 1;
if (state.reconnections <= 3) {
console.log(`连接失败，正在尝试第${state.reconnections}次连接`);
dispatch('start');
}else{
console.error('已尝试3次重新连接均未成功');
}
});
// 监听socket接受到服务器的消息事件
uni.onSocketMessage((res)=> {
let getData = JSON.parse(res.data)
if(getData.event == 'connect'){
// 心跳
state.heartbeatInterval = setInterval(()=>{
uni.sendSocketMessage({data: '{"event":"heartbeat"}'});
},5000)
}
// 通过uni.$emit触发全局的自定义事件，并在页面中通过uni.$on接收数据
if(getData.event == 'event_talk'){
uni.$emit('getMsg',getData.content); // 更新消息内容
uni.$emit('getList',getData.content); // 更新消息列表
}
});
}
}
}