# websocket聊天模板 [uniapp版本點擊這里](WebSocket聊天.md) <br /> <br /> **vuex** store/modules/chat.js ```JavaScript import { Message } from 'element-ui' /** * 聊天 */ const state = { // 是否打開連接 isOpen: false, // websocket socket: null, // 心跳間隔 timeout: 10000, // 心跳事件 interval: null, // 重連次數 connectNum: 0, // ws token token: '', // 當前聊天場景 currentToUser: { id: 1, name: '', avatar: '', type: 's' // s=單聊, g群聊 }, // 我的信息 wsUserInfo: { addr: '', avatar: '', driver: '', fd: 0, id: 0, ip: '', nickName: '未登錄', token: '' }, // 消息處理回調 wsCallback: null } const mutations = { /** * 關閉連接 */ wsClose(state) { if (state.isOpen) { state.isOpen = false state.socket.close() } }, /** * ws用戶登錄 * * @param {string} jwt jwtToken */ wsLogin(state, jwt) { this.dispatch('chat/SendRaw', { call: 'login.token', data: { token: jwt } }) }, /** * 設置ws收到消息回調 * * @param {function} callback */ set_message_callback(state, callback) { state.wsCallback = callback }, /** * 設置當前聊天對象 * * @param {object} payload {to:對方id, type:'類型, s=單聊/g=群聊'} */ set_chat_object(state, payload) { state.currentToUser.id = payload.id state.currentToUser.type = payload.type state.currentToUser.name = '' state.currentToUser.avatar = '' // 查詢用戶信息 this.dispatch('chat/SendRaw', { call: 'user.get', data: { uid: payload.id } }) } } const actions = { /** * 初始化 or 連接websocket */ initWs({ commit, state, rootState }) { const that = this console.log('檢查是否已鏈接') if (state.isOpen) return // 防止重復連接 // 連接ws const wsurl = process.env.VUE_APP_WEB_SOCKET state.socket = new WebSocket(wsurl) if (!state.socket) return // 連接失敗 // 事件_連接成功 state.socket.onopen = () => { console.log('ws連接成功') // 將連接狀態設為已連接 state.isOpen = true // 心跳定時器 state.interval = setInterval(() => { // 發送心跳 if (state.isOpen) { try { state.socket.send('ping') } catch (err) { console.log('心跳發送失敗了 ...執行重連', err) Message({ msg: '正在嘗試重新連接' + (state.connectNum + 1) + '次', type: 'error', duration: 2 * 1000 }) 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.token': // 登錄 state.token = pack.result.token state.wsUserInfo = pack.result break case 'chat.recv': // 收到信息 // TODO: 播放提示音 break case 'user.get': // 用戶信息獲取 // 更新聊天對象的用戶信息 if (pack.result.id == state.currentToUser.id) { state.currentToUser.name = pack.result.nickName state.currentToUser.avatar = pack.result.avatar } break } // 轉向回調處理 if (typeof state.wsCallback == 'function') { state.wsCallback(pack) } } // 事件_連接關閉 state.socket.onclose = () => { state.isOpen = false state.socket = null // 清除定時器 clearTimeout(state.interval) state.interval = null } // 事件_連接錯誤 state.socket.onerror = (e) => { state.isOpen = false state.socket = null } }, /** * 重連 */ reConnect({ commit, state }) { // 逐漸延長重連時間 var time = 3000; if (state.connectNum < 20) { time = 3000; } else if (state._connectNum < 50) { time = 10000; } else { time = 450000; } state.timer = setTimeout(() => { this.dispatch('chat/initWs') }, time) state.connectNum += 1 }, /** * 發送消息 * * @param {object} payload 消息數據 * * payload格式: * {type:消息類型, msg:消息數據} */ 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 }) }, /** * 發送數據 * * @param {object} data * * data格式: * { call:"請求標識", data:{...其他數據...} } */ SendRaw({ commit, state }, data) { try { const message = { call: data.call, body: data.data, token: state.token } const msgText = JSON.stringify(message) console.log(typeof state.socket) if (state.socket && state.isOpen) { state.socket.send(msgText) } } catch (err) { console.log(err) } } } export default { namespaced: true, state, mutations, actions } ``` **使用** 在vuex里引入模塊 ```JavaScript const store = new Vuex.Store({ modules: { chat // chat }, getters }) ``` 連接 (main.js) ```javascript // 連接websocket store.dispatch('chat/initWs') ``` 登錄 ```JavaScript store.commit('chat/wsLogin', state.token) // 在用戶登錄后, 同步登錄ws ```