websocket

src/layout/components/Navbar.vue

@@ -10,7 +10,7 @@
     <div class="right-menu">
       <template v-if="device !== 'mobile'">
         <!-- <search id="header-search" class="right-menu-item" /> -->
-        <!-- <notice-todo v-if="userIdentity === 1 && openSoket" /> -->
+        <notice-todo v-if="userIdentity === 1 && openSoket" />
         <!-- <error-log class="errLog-container right-menu-item hover-effect" /> -->
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
       </template>
@@ -78,7 +78,7 @@ export default {
     // Search
   },
   computed: {
-    ...mapGetters(['sidebar', 'device', 'userIdentity', 'openSoket', 'proxyState']),
+    ...mapGetters(['sidebar', 'device', 'userIdentity', 'proxyState']),
     // isSupplier
     isSupplier() {
       return this.userIdentity === 2

src/layout/components/NoticeTodo/index.vue

@@ -80,18 +80,18 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['messageList']),
+    ...mapGetters(['noticeList']),
     todoList() {
       if (this.activeName === 'first') {
-        return this.messageList
+        return this.noticeList
       } else if (this.activeName === 'second') {
-        return this.messageList.filter(item => item.status === 1)
+        return this.noticeList.filter(item => item.status === 1)
       } else {
-        return this.messageList.filter(item => item.status === 0)
+        return this.noticeList.filter(item => item.status === 0)
       }
     },
     count() {
-      const length = this.messageList.filter(item => item.status === 0).length
+      const length = this.noticeList.filter(item => item.status === 0).length
       if (length > 99) {
         return `未处理(99+)`
       } else if (length === 0) {
@@ -101,7 +101,7 @@ export default {
       }
     },
     hasMessage() {
-      return this.messageList.filter(item => item.status === 0).length > 0
+      return this.noticeList.filter(item => item.status === 0).length > 0
     }
   },
   methods: {

src/permission.js

@@ -51,6 +51,8 @@ router.beforeEach(async(to, from, next) => {
           console.log(accessRoutes)
           // 添加路由配置
           router.addRoutes(accessRoutes)
+          // websocket
+          store.dispatch('notice/start')
           // 放行
           next({ ...to, path: '/', replace: true })
         } catch (err) {

src/store/getters.js

@@ -1,5 +1,4 @@
 const getters = {
-  openSoket: state => state.settings.openSoket,
   sidebar: state => state.app.sidebar,
   size: state => state.app.size,
   countryList: state => state.app.countryList,
@@ -25,7 +24,8 @@ const getters = {
   isChangeProxy: state => state.proxy.isChangeProxy,
   shopType: state => state.user.shopType,
   brandId: state => state.user.brandId,
-  socketState: state => state.webSocket.socketState,
-  messageList: state => state.webSocket.messageList
+  socketState: state => state.notice.socketState,
+  noticeList: state => state.notice.noticeList,
+  errorMessage: state => state.notice.errorMessage
 }
 export default getters

src/store/index.js

@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import getters from './getters'
-// import { closeWebSocket } from '@/utils/WebSocketUtil'
 
 Vue.use(Vuex)
 

src/store/modules/notice.js

@@ -0,0 +1,43 @@
+import { createSocket, closeWebSocket } from '@/utils/webSocket'
+
+const state = {
+  socketStatus: false,
+  noticeList: [],
+  errorMessage: ''
+}
+
+const mutations = {
+  ON_ERROR(state, message) {
+    state.errorMessage = message
+  },
+  ON_OPEN(state) {
+    state.socketStatus = true
+  },
+  ON_MESSAGE(state, data) {
+    console.log(data)
+  },
+  ON_CLOSE(state) {
+    state.noticeList = []
+    state.socketStatus = false
+  }
+}
+
+const actions = {
+  start({ commit }) {
+    const options = {
+      onopen: () => commit('ON_OPEN'),
+      onerror: (message) => commit('ON_ERROR', message),
+      onmessage: (data) => commit('ON_MESSAGE', data),
+      onclose: () => commit('ON_CLOSE')
+    }
+    createSocket(options, (message) => commit('ON_ERROR', message))
+  },
+  close: () => closeWebSocket()
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/webSocket.js

@@ -1,66 +0,0 @@
-import { createSoceket } from '@/utils/WebSocketUtil'
-import { getMessage } from '@/api/message'
-
-const state = {
-  messageList: [],
-  socketState: false
-}
-const mutations = {
-  // 初始化socket
-  INIT_SOCKET: (state, commit) => {
-    createSoceket({ commit })
-  },
-  // 更新消息 像消息队列中添加一条消息
-  UPDATE_MESSAGE: (state, message) => {
-    state.messageList.unshift(message)
-  },
-  // 初始化消息列表
-  INIT_MESSAGE: (state, list) => {
-    state.messageList = list
-    console.log(state.messageList)
-  },
-  // 设置会话状态
-  SET_SCOKET_STATE: (state, flag) => {
-    state.socketState = flag
-  },
-  // 修改消息状态
-  SET_MESSAGE_STATE: (state, info) => {
-    if (info.type === 1) {
-      state.messageList = state.messageList.map(v => {
-        if (v.authId === info.id) {
-          v.status = 1
-        }
-        return v
-      })
-    } else {
-      state.messageList = state.messageList.map(v => {
-        if (v.authProductId === info.id) {
-          v.status = 1
-        }
-        return v
-      })
-    }
-  },
-  CLEAR_MESSAGE: (state) => {
-    state.messageList = []
-  }
-}
-const actions = {
-  // 初始化消息state
-  initMessage({ commit }) {
-    getMessage().then(res => {
-      if (res.code !== 0) {
-        return
-      }
-      commit('INIT_MESSAGE', res.data)
-      commit('INIT_SOCKET', commit)
-    })
-  }
-}
-
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
-}

src/utils/WebSocketUtil.js

@@ -1,62 +0,0 @@
-import store from '../store'
-let websocket = null
-let commit = null
-
-export function createSoceket(options) {
-  if (options) {
-    commit = options.commit
-  }
-  // 判断当前浏览器是否支持WebSocket
-  if ('WebSocket' in window) {
-    if (websocket === null) {
-      websocket = new WebSocket(process.env.VUE_APP_SOCKET_SERVER)
-      init()
-    }
-  } else {
-    alert('Not support websocket')
-  }
-}
-
-export function init() {
-  // 连接发生错误的回调方法
-  websocket.onerror = function() {
-    commit(`SET_SCOKET_STATE`, false)
-    console.log('socket connect with error !')
-  }
-
-  // 连接成功建立的回调方法
-  websocket.onopen = function(event) {
-    commit(`SET_SCOKET_STATE`, true)
-    console.log('socket is open !')
-  }
-
-  // 接收到消息的回调方法
-  websocket.onmessage = function(event) {
-    console.log(event.data)
-    commit(`UPDATE_MESSAGE`, JSON.parse(event.data))
-    console.log(store.getters.messageList)
-  }
-
-  // 连接关闭的回调方法
-  websocket.onclose = function() {
-    commit(`SET_SCOKET_STATE`, false)
-    console.log('socket is closed !')
-  }
-}
-
-// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
-window.onbeforeunload = function() {
-  websocket && websocket.close()
-}
-
-// 关闭连接
-export function closeWebSocket() {
-  websocket && websocket.close()
-}
-
-// 发送消息
-export function send() {
-  var message = document.getElementById('text').value
-  websocket.send(message)
-}
-

src/utils/webSocket.js

@@ -0,0 +1,47 @@
+let websocket = null
+
+function initSocketEevent(options) {
+  // 连接发生错误的回调方法
+  websocket.onerror = function() {
+    console.log('socket connect with error !')
+    options.onerror && options.onerror('WebSocket连接出现了问题，请稍后重试！！！')
+  }
+
+  // 连接成功建立的回调方法
+  websocket.onopen = function() {
+    console.log('socket is open !')
+    options.onopen && options.onopen()
+  }
+
+  // 接收到消息的回调方法
+  websocket.onmessage = function(event) {
+    console.log(event.data)
+    options.onmessage && options.onmessage(JSON.parse(event.data))
+  }
+
+  // 连接关闭的回调方法
+  websocket.onclose = function() {
+    console.log('socket is closed !')
+    options.onclose && options.onclose()
+  }
+
+  // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
+  window.onbeforeunload = function() {
+    websocket && websocket.close()
+  }
+}
+
+export function createSocket(options, error) {
+  // 判断当前浏览器是否支持WebSocket
+  if (!('WebSocket' in window)) return error && error('当前浏览器不支持WebSocket，连接已关闭！！！')
+  // 单例
+  if (websocket) return
+  websocket = new WebSocket(process.env.VUE_APP_SOCKET_SERVER)
+  initSocketEevent(options)
+}
+
+// 关闭连接
+export function closeWebSocket() {
+  websocket && websocket.close()
+  websocket = null
+}