页面完善

src/renderer/store/modules/chat.js

@@ -0,0 +1,139 @@
+// import { getAllList, getChatList, bindId, chatBegin } from '@/api/message'
+// import { Message, MessageBox } from 'element-ui'
+
+let timeouter = null
+let websock = null
+let isConnect = false
+const getDefaultState = () => {
+  return {
+    reconnections: 0,
+  }
+}
+
+const state = getDefaultState()
+
+const mutations = {
+  set_client_id: (state, client_id) => {
+    state.client_id = client_id
+  },
+}
+
+const actions = {
+  // 初始化websocket
+  initWebSocket({ commit, dispatch, rootState }) {
+    if (typeof WebSocket === 'undefined') return console.log('您的浏览器不支持websocket')
+    if ((websock && isConnect) || !rootState.user.token) {
+      return
+    }
+    websock = new WebSocket(process.env.VUE_APP_SOCKET_API)
+    websock.onmessage = function (res) {
+      dispatch('websocketonmessage', res)
+    }
+    websock.onopen = function (res) {
+      dispatch('websocketonopen', res)
+    }
+    websock.onerror = function (res) {
+      dispatch('websocketonerror', res)
+    }
+    websock.onclose = function (res) {
+      dispatch('websocketonclose', res)
+    }
+  },
+  // 接收消息
+  websocketonmessage({ commit, dispatch }, e) {
+    const data = JSON.parse(e.data) // 转json对象
+    if (data.state) {
+      
+    } else {
+      if (data.type === 'init') {
+        state.pingNum = 0
+        clearTimeout(timeouter)
+        dispatch('pingCheck')
+        commit('set_client_id', data.client_id)
+        // 初始化
+        bindId({
+          client_id: data.client_id
+        })
+          .then(() => {})
+          .catch((err) => {
+            alert(err.msg)
+            // Message.error(err.msg)
+          })
+      } else if (data.type === 'ping') {
+        // 心跳回执
+        state.pingNum = 0
+        dispatch('websocketsend', { type: 'pong' })
+      } else {
+        // 未知消息
+        console.log('未知消息: ' + JSON.stringify(data))
+      }
+    }
+  },
+  // 心跳检测重连
+  pingCheck({ state, commit, dispatch, rootState }) {
+    if (state.pingNum < 4) {
+      state.pingNum++
+      timeouter = setTimeout(() => {
+        dispatch('pingCheck')
+      }, 10000)
+    } else {
+      dispatch('closeWebsocket')
+    }
+  },
+  // 发送消息
+  websocketsend({ commit, dispatch }, res) {
+    if (!websock) {
+      // Message.info('webSocket未连接，正在尝试连接')
+      dispatch('initWebSocket')
+      return
+    }
+    websock.send(JSON.stringify(res))
+  },
+  // 链接建立之后执行的方法
+  websocketonopen: ({ commit, dispatch }, res) => {
+    console.log('链接建立之后执行send方法发送数据', res)
+    isConnect = true
+  },
+  // 链接关闭之后执行的方法
+  websocketonclose: ({ commit, dispatch }, res) => {
+    console.log('断开链接', res)
+    // 关闭
+    if (isConnect) {
+      isConnect = false
+      dispatch('initWebSocket')
+    }
+  },
+  // 链接错误之后执行的方法
+  websocketonerror({ commit, dispatch }, res) {
+    isConnect = false
+    state.reconnections += 1
+    if (state.reconnections <= 3) {
+      setTimeout(() => {
+        dispatch('initWebSocket')
+      }, 5000)
+    } else {
+      state.reconnections = 0
+      dispatch('initWebSocket')
+      // MessageBox.alert('服务器启动异常，请刷新重试', '温馨提示', {
+      //   confirmButtonText: '刷新',
+      //   showCancelButton: true
+      // })
+      //   .then(() => {
+          
+      //   })
+      //   .catch(() => {})
+    }
+  },
+  // 关闭
+  closeWebsocket: () => {
+    // 关闭
+    if (websock) websock.close()
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}