Feature/socket (#439)

* refactor(notify): Rebuild Message Center

re #436

* feat: add whether to enable websocket configuration

Author: vanoneang

.env.development

@@ -1,3 +1,3 @@
 ENV = 'development'
 
-VUE_APP_BASE_URL = 'http://localhost:5000/'
+VUE_APP_BASE_URL = 'http://api.s.colorful3.com/'

src/component/layout/nav-bar.vue

@@ -2,18 +2,16 @@
   <div class="app-nav-bar">
     <div class="nav-content">
       <breadcrumb />
-      <!-- 暂时放这里 -->
       <div class="right-info">
         <lin-notify
           height="370"
-          @readMessages="readMessages"
+          :value="value"
+          :hidden="hidden"
           :trigger="'click'"
-          :messages="messages"
           @readAll="readAll"
           @viewAll="viewAll"
-          class="lin-notify"
-          :value="value"
-          :hidden="hidden"
+          :messages="messages"
+          @readMessages="readMessages"
         >
         </lin-notify>
         <clear-tab></clear-tab>
@@ -24,28 +22,39 @@
 </template>
 
 <script>
-import Breadcrumb from './breadcrumb'
-import Screenfull from './screen-full'
 import User from './user'
+import store from '@/store'
+import Config from '@/config'
 import ClearTab from './clear-tab'
-// import { getToken } from '@/lin/util/token'
-// import store from '@/store'
+import Breadcrumb from './breadcrumb'
+import Screenfull from './screen-full'
+import { getToken } from '@/lin/util/token'
 
 export default {
   name: 'NavBar',
+  data() {
+    return {
+      value: 0,
+      hidden: false,
+      messages: [],
+      path: `//api.s.colorful3.com/ws/message?token=${getToken('access_token').split(' ')[1]}`,
+    }
+  },
   created() {
-    // this.$connect(this.path, { format: 'json' })
-    // this.$options.sockets.onmessage = data => {
-    //   console.log(JSON.parse(data.data))
-    //   this.messages.push(JSON.parse(data.data))
-    // }
-    // this.$options.sockets.onerror = err => {
-    //   console.log(err)
-    //   this.$message.error('token已过期,请重新登录')
-    //   store.dispatch('loginOut')
-    //   const { origin } = window.location
-    //   window.location.href = origin
-    // }
+    if (Config.websocketEnable) {
+      this.$connect(this.path, { format: 'json' })
+      this.$options.sockets.onmessage = data => {
+        console.log(JSON.parse(data.data))
+        this.messages.push(JSON.parse(data.data))
+      }
+      this.$options.sockets.onerror = err => {
+        console.error(err)
+        this.$message.error('token已过期,请重新登录')
+        store.dispatch('loginOut')
+        const { origin } = window.location
+        window.location.href = origin
+      }
+    }
   },
   watch: {
     messages: {
@@ -60,14 +69,6 @@ export default {
       immediate: true,
     },
   },
-  data() {
-    return {
-      value: 0,
-      hidden: true,
-      messages: [],
-      // path: `//api.s.colorful3.com/ws/message?token=${getToken('access_token').split(' ')[1]}`,
-    }
-  },
   methods: {
     readAll() {
       console.log('点击了readAll')
@@ -89,9 +90,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.lin-notify {
-  margin-right: 20px;
-}
 .app-nav-bar {
   width: 100%;
   height: $navbar-height;

src/component/notify/emitter.js

@@ -1,11 +1,11 @@
-/* eslint-disable*/
 class Emitter {
   constructor() {
     this.listeners = new Map()
   }
 
   addListener(label, callback, vm) {
     if (typeof callback === 'function') {
+      // eslint-disable-next-line no-unused-expressions
       this.listeners.has(label) || this.listeners.set(label, [])
       this.listeners.get(label).push({ callback, vm })
       return true
@@ -20,6 +20,7 @@ class Emitter {
     if (listeners?.length) {
       index = listeners.reduce((i, listener, index) => {
         if (typeof listener.callback === 'function' && listener.callback === callback && listener.vm === vm) {
+          // eslint-disable-next-line no-param-reassign
           i = index
         }
         return i

src/component/notify/index.js

@@ -1,39 +1,39 @@
-/* eslint-disable*/
-
 /* Author: https://github.com/nathantsoi/vue-native-websocket */
 import Notify from './notify.vue'
 import Observer from './observer'
 import Emitter from './emitter'
 
 export default {
-  install(Vue, connection, opts = {}) {
+  install(app, connection, opts = {}) {
     if (typeof connection === 'object') {
+      // eslint-disable-next-line no-param-reassign
       opts = connection
+      // eslint-disable-next-line no-param-reassign
       connection = ''
     }
     let observer = null
 
     opts.$setInstance = wsInstance => {
-      Vue.prototype.$socket = wsInstance
+      app.config.globalProperties.$socket = wsInstance
     }
-    Vue.prototype.$connect = (connectionUrl = connection, connectionOpts = opts) => {
+    app.config.globalProperties.$connect = (connectionUrl = connection, connectionOpts = opts) => {
       connectionOpts.$setInstance = opts.$setInstance
       observer = new Observer(connectionUrl, connectionOpts)
-      Vue.prototype.$socket = observer.WebSocket
+      app.config.globalProperties.$socket = observer.WebSocket
     }
 
-    Vue.prototype.$disconnect = () => {
+    app.config.globalProperties.$disconnect = () => {
       if (observer?.reconnection) {
         observer.reconnection = false
       }
-      if (Vue.prototype.$socket) {
-        Vue.prototype.$socket.close()
-        delete Vue.prototype.$socket
+      if (app.config.globalProperties.$socket) {
+        app.config.globalProperties.$socket.close()
+        delete app.config.globalProperties.$socket
       }
     }
     const hasProxy = typeof Proxy !== 'undefined' && typeof Proxy === 'function' && /native code/.test(Proxy.toString())
-    Vue.component('LinNotify', Notify)
-    Vue.mixin({
+    app.component('LinNotify', Notify)
+    app.mixin({
       created() {
         const vm = this
         const { sockets } = this.$options
@@ -70,7 +70,7 @@ export default {
           }
         }
       },
-      beforeDestroy() {
+      beforeUnmount() {
         if (hasProxy) {
           const { sockets } = this.$options
 

src/component/notify/notify.vue

@@ -1,46 +1,48 @@
 <template>
   <!-- eslint-disable max-len  -->
-  <el-dropdown :trigger="trigger" :placement="placement" :hide-on-click="hideOnClick">
+  <el-dropdown :trigger="trigger" :placement="placement" :hide-on-click="hideOnClick" style="margin-right: 20px;">
     <div class="notify">
       <el-badge :value="value" class="item" :hidden="hidden" :max="max" :is-dot="isDot">
         <i :class="icon"></i>
       </el-badge>
     </div>
-    <el-dropdown-menu slot="dropdown">
-      <div class="notify-title">
-        <p>消息提醒</p>
-        <p class="button" @click="readAll">全部已读</p>
-      </div>
-      <div class="content" :style="{ 'min-height': height + 'px', 'max-height': height + 'px' }">
-        <div
-          class="css-nomessage"
-          v-if="messages.length === 0"
-          :style="{ 'min-height': height + 'px', 'max-height': height + 'px' }"
-        >
-          <div class="css-sumlaa">
-            <svg width="150" height="120" viewBox="0 0 150 120" fill="currentColor">
-              <path
-                fill="#EBEEF5"
-                d="M46.76 78.71a1.895 1.895 0 0 0-1.378 2.092c.13.948.94 1.648 1.904 1.635h55.468a1.882 1.882 0 0 0 1.884-1.635c.13-.95-.46-1.846-1.367-2.09a8.61 8.61 0 0 1-6.4-7.872l-2.473-20.928c-.96-7.872-6.567-14.37-14.178-16.435l-.986-.267-.113-1.014c-.24-2.106-2.01-3.696-4.11-3.696s-3.87 1.59-4.104 3.696l-.114 1.014-.98.267c-7.61 2.063-13.22 8.563-14.18 16.43L53.15 70.84c-.2 3.74-2.79 6.926-6.393 7.87zm50.61-29.155l2.482 20.982c.127 2.562 1.817 4.654 4.19 5.276a4.895 4.895 0 0 1 3.568 5.397c-.336 2.446-2.434 4.26-4.876 4.227H47.306a4.883 4.883 0 0 1-4.896-4.227 4.897 4.897 0 0 1 3.58-5.4 5.614 5.614 0 0 0 4.17-5.168l2.49-21.093c1.068-8.77 7.135-16.06 15.46-18.7.807-3.11 3.615-5.35 6.9-5.35s6.094 2.24 6.9 5.35c8.325 2.64 14.393 9.93 15.46 18.7zm-16.417 38.91c-.288 3.184-3.007 5.36-5.943 5.36-2.936 0-5.655-2.176-5.943-5.36l-2.988.27c.43 4.82 4.52 8.09 8.93 8.09s8.49-3.27 8.93-8.09l-2.99-.27z"
-              ></path>
-            </svg>
-            <div>还没有消息</div>
-          </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <div class="notify-title">
+          <p>消息提醒</p>
+          <p class="button" @click="readAll">全部已读</p>
         </div>
-        <el-dropdown-item v-for="(msg, index) in messages" :key="index" @click="readMessages(msg, index)">
-          <slot :row="msg">
-            <p :class="msg[props.is_read] ? 'read-messages' : 'unread-messages'">{{ msg[props.content] }}</p>
-            <div class="sketchynformation">
-              <p class="user">{{ msg[props.user] }}</p>
-              <p class="date-time">{{ msg[props.time] }}</p>
+        <div class="content" :style="{ 'min-height': height + 'px', 'max-height': height + 'px' }">
+          <div
+            class="css-nomessage"
+            v-if="messages.length === 0"
+            :style="{ 'min-height': height + 'px', 'max-height': height + 'px' }"
+          >
+            <div class="css-sumlaa">
+              <svg width="150" height="120" viewBox="0 0 150 120" fill="currentColor">
+                <path
+                  fill="#EBEEF5"
+                  d="M46.76 78.71a1.895 1.895 0 0 0-1.378 2.092c.13.948.94 1.648 1.904 1.635h55.468a1.882 1.882 0 0 0 1.884-1.635c.13-.95-.46-1.846-1.367-2.09a8.61 8.61 0 0 1-6.4-7.872l-2.473-20.928c-.96-7.872-6.567-14.37-14.178-16.435l-.986-.267-.113-1.014c-.24-2.106-2.01-3.696-4.11-3.696s-3.87 1.59-4.104 3.696l-.114 1.014-.98.267c-7.61 2.063-13.22 8.563-14.18 16.43L53.15 70.84c-.2 3.74-2.79 6.926-6.393 7.87zm50.61-29.155l2.482 20.982c.127 2.562 1.817 4.654 4.19 5.276a4.895 4.895 0 0 1 3.568 5.397c-.336 2.446-2.434 4.26-4.876 4.227H47.306a4.883 4.883 0 0 1-4.896-4.227 4.897 4.897 0 0 1 3.58-5.4 5.614 5.614 0 0 0 4.17-5.168l2.49-21.093c1.068-8.77 7.135-16.06 15.46-18.7.807-3.11 3.615-5.35 6.9-5.35s6.094 2.24 6.9 5.35c8.325 2.64 14.393 9.93 15.46 18.7zm-16.417 38.91c-.288 3.184-3.007 5.36-5.943 5.36-2.936 0-5.655-2.176-5.943-5.36l-2.988.27c.43 4.82 4.52 8.09 8.93 8.09s8.49-3.27 8.93-8.09l-2.99-.27z"
+                ></path>
+              </svg>
+              <div>还没有消息</div>
             </div>
-          </slot>
-        </el-dropdown-item>
-      </div>
-      <div class="notify-footer">
-        <p class="viewAll" @click="viewAll">查看全部 &gt;</p>
-      </div>
-    </el-dropdown-menu>
+          </div>
+          <el-dropdown-item v-for="(msg, index) in messages" :key="index" @click="readMessages(msg, index)">
+            <slot :row="msg">
+              <p :class="msg[props.is_read] ? 'read-messages' : 'unread-messages'">{{ msg[props.content] }}</p>
+              <div class="sketchynformation">
+                <p class="user">{{ msg[props.user] }}</p>
+                <p class="date-time">{{ msg[props.time] }}</p>
+              </div>
+            </slot>
+          </el-dropdown-item>
+        </div>
+        <div class="notify-footer">
+          <p class="viewAll" @click="viewAll">查看全部 &gt;</p>
+        </div>
+      </el-dropdown-menu>
+    </template>
   </el-dropdown>
 </template>
 
@@ -110,7 +112,7 @@ export default {
 
 <style lang="scss" scoped>
 .notify {
-  font-size: 18px;
+  font-size: 19px;
   border-radius: 50%;
   display: flex;
   justify-content: center;

src/config/index.js

@@ -2,6 +2,7 @@ const Config = {
   sidebarLevel: 3, // 侧边栏层级（无限级）限制, 默认为 3 级，可根据需求自行扩充
   openAutoJumpOut: true, // 是否开启无操作跳出
   defaultRoute: '/about', // 默认打开的路由
+  websocketEnable: false, // 默认关闭 websocket
   showSidebarSearch: true, // 默认打开侧边栏搜索
   notLoginRoute: ['login'], // 无需登录即可访问的路由 name,
   useFrontEndErrorMsg: false, // 默认采用后端返回异常

src/main.js

@@ -12,6 +12,7 @@ import App from '@/app.vue'
 import store from '@/store'
 import router from '@/router'
 
+import LinNotify from '@/component/notify'
 import LIcon from '@/component/base/icon/lin-icon'
 import StickyTop from '@/component/base/sticky-top/sticky-top'
 import SourceCode from '@/component/base/source-code/source-code'
@@ -25,6 +26,11 @@ const app = createApp(App)
 app.use(store)
 app.use(router)
 app.use(ElementPlus, { locale })
+app.use(LinNotify, {
+  reconnection: true,
+  reconnectionAttempts: 5,
+  reconnectionDelay: 3000,
+})
 
 // base 组件注册
 app.component('l-icon', LIcon)