[ vue版本點擊這里](WebSocket聊天模板.md) ```JavaScript export default { namespaced: true, state: { // 是否打開連接 isOpen: false, // websocket socket: null, // 心跳間隔 timeout: 10000, // 心跳事件 interval: null, // 重連次數 connectNum: 0, // ws token token: '', // 當前聊天場景 currentToUser: { id: 1, name: '', avatar: '', type: 's', // s=單聊, g群聊 }, // 當前列表歷史 wsHistory: [ ], // 我的信息 wsUserInfo: { addr: "", avatar: "", driver: "", fd: 0, id: 0, ip: "", nickName: "未登錄", token: "", }, // 消息回調 wsCallback: null }, mutations: { // 關閉連接 wsClose(state) { if (state.isOpen) { state.isOpen = false; state.socket.close(); } }, // 登錄 wsLogin(state, jwt) { this.dispatch('chat/SendRaw', { call: 'login.token', data: { token: jwt } }); }, // message 回調 set_message_callback(state, callback) { state.wsCallback = callback } }, actions: { initWs({ commit, state, rootState }) { console.log('檢查是否已鏈接') if (state.isOpen) return; // 防止重復連接 //檢查網絡是否可用 const that = this; uni.getNetworkType({ success(result) { console.log('網絡類型', result) if (result.networkType != 'none') { // 連接 console.log('開始ws鏈接') state.socket = uni.connectSocket({ url: rootState.wsUrl, complete: (e) => { console.log(e); }, }); if (!state.socket) return; // 監聽開啟 state.socket.onOpen(() => { console.log('ws連接成功') // 將連接狀態設為已連接 state.isOpen = true; state.timer = null; //開啟心跳 state.interval = setInterval(() => { //發送心跳 uni.sendSocketMessage({ data: 'ping', fail: function (e) { console.log('心跳發送失敗了 ...執行重連'); uni.showToast({ title: '正在嘗試重新鏈接第' + (state.connectNum + 1) + '次', icon: "none", }); state.isOpen = false; //執行重連 that.dispatch('chat/reConnect'); }, }); }, state.timeout); }); // 監聽信息 state.socket.onMessage((e) => { if (e.data === 'pong') return; const pack = JSON.parse(e.data); if (typeof pack !== 'object') return; switch (pack.call) { case 'login.uid': // 登錄 state.token = pack.result.token; state.wsUserInfo = pack.result; break; case 'chat.recv': const music = uni.createInnerAudioContext(); music.src = 'static/san.mp3'; music.autoplay = true; music.play(); break; } if (state.wsCallback !== null) { state.wsCallback(pack) } }) // 監聽關閉 state.socket.onClose(() => { state.isOpen = false; state.socket = false; //清除定時器 clearTimeout(state.interval); state.interval = null }); // 監聽錯誤 state.socket.onError((e) => { state.isOpen = false; state.socket = false; }); } else { console.log('網絡已斷開'); uni.showModal({ title: '網絡錯誤', content: '請重新打開網絡', showCancel: false, }) } } }) }, reConnect({ commit, state }) { if (state.connectNum < 20) { state.timer = setTimeout(() => { this.dispatch('chat/initWs') }, 3000) state.connectNum += 1; } else if (state._connectNum < 50) { state.timer = setTimeout(() => { this.dispatch('chat/initWs') }, 10000) state.connectNum += 1; } else { state.timer = setTimeout(() => { this.dispatch('chat/initWs') }, 450000) state.connectNum += 1; } }, // 發送消息 SendMsg({ commit, state }, payload) { var data = { to: payload.to, origin: state.currentToUser.type, type: payload.type, msg: payload.msg }; this.dispatch('chat/SendRaw', { call: 'chat.send', data: data }) }, //發送體 SendRaw({ commit, state }, data) { console.log(data); const message = { call: data.call, body: data.data, token: state.token }; const msgText = JSON.stringify(message) if (state.socket) { state.socket.send({ data: msgText, success: (res) => { console.log('發送成功'); }, fail: (e) => { console.log('發送失敗', e); that.dispatch('chat/reConnect'); } }) } } } } ```