处理 socket 问题

src/layouts/BasicLayout.vue

@@ -28,7 +28,7 @@
       :collapsible="true"
     ></side-menu>
 
-    <div :style="{minWidth:placeholderDivMinWidth}" v-if="!isMobile()"></div>
+    <div :style="{ minWidth: placeholderDivMinWidth }" v-if="!isMobile()"></div>
     <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ minHeight: '100vh' }">
       <!-- layout header -->
       <global-header
@@ -53,10 +53,8 @@
       <a-layout-footer>
         <global-footer />
       </a-layout-footer>
-
     </a-layout>
   </a-layout>
-
 </template>
 
 <script>
@@ -78,7 +76,7 @@ export default {
     GlobalHeader,
     GlobalFooter
   },
-  data () {
+  data() {
     return {
       collapsed: false,
       menus: []
@@ -89,7 +87,7 @@ export default {
       // 动态主路由
       mainMenu: state => state.permission.addRouters
     }),
-    contentPaddingLeft () {
+    contentPaddingLeft() {
       if (!this.fixSidebar || this.isMobile()) {
         return '0'
       }
@@ -99,26 +97,26 @@ export default {
       return '80px'
     },
     placeholderDivMinWidth() {
-      let width = this.collapsed ? '80px' : '230px';
-      return width;
+      let width = this.collapsed ? '80px' : '230px'
+      return width
     }
   },
   watch: {
-    sidebarOpened (val) {
+    sidebarOpened(val) {
       this.collapsed = !val
     },
     // 菜单变化
-    mainMenu (val) {
+    mainMenu(val) {
       this.setMenus()
     }
   },
-  created () {
+  created() {
     this.setMenus()
     /* const routes = convertRoutes(this.mainMenu.find(item => item.path === '/'))
     this.menus = (routes && routes.children) || [] */
     this.collapsed = !this.sidebarOpened
   },
-  mounted () {
+  mounted() {
     const userAgent = navigator.userAgent
     if (userAgent.indexOf('Edge') > -1) {
       this.$nextTick(() => {
@@ -129,35 +127,46 @@ export default {
       })
     }
     console.log('== 1111进入页面 == ,这里添加获取订舱下拉数据 ')
-    this.setBookingInfo()
+    // this.setBookingInfo()
   },
   methods: {
-    ...mapActions(['setSidebar', 'setCarrierList', 'setYardList', 'setPackageList', 'setIssuetypeList', 'setBlfrtList', 'setCtnallList', 'setLineList', 'setBookingSourcePage', 'setBookingInitData', 'setCodeCountryList']),
+    ...mapActions([
+      'setSidebar',
+      'setCarrierList',
+      'setYardList',
+      'setPackageList',
+      'setIssuetypeList',
+      'setBlfrtList',
+      'setCtnallList',
+      'setLineList',
+      'setBookingSourcePage',
+      'setBookingInitData',
+      'setCodeCountryList'
+    ]),
     // 重新生成
-    setMenus () {
+    setMenus() {
       const routes = convertRoutes(this.mainMenu.find(item => item.path === '/'))
       this.menus = (routes && routes.children) || []
     },
-    toggle () {
+    toggle() {
       this.collapsed = !this.collapsed
       this.setSidebar(!this.collapsed)
       triggerWindowResizeEvent()
     },
-    paddingCalc () {
+    paddingCalc() {
       let left = ''
       if (this.sidebarOpened) {
         left = this.isDesktop() ? '230px' : '80px'
       } else {
-        left = (this.isMobile() && '0') || ((this.fixSidebar && '80px') || '0')
+        left = (this.isMobile() && '0') || (this.fixSidebar && '80px') || '0'
       }
       return left
     },
-    menuSelect () {
-    },
-    drawerClose () {
+    menuSelect() {},
+    drawerClose() {
       this.collapsed = false
     },
-    setBookingInfo () {
+    setBookingInfo() {
       this.setCarrierList()
       this.setYardList()
       this.setPackageList()

src/main.js

@@ -29,7 +29,7 @@ import VXETable from 'vxe-table'
 import 'vxe-table/lib/style.css'
 import 'vue-easytable/libs/theme-default/index.css'
 import VueEasytable from 'vue-easytable'
-import qs from 'qs';
+import qs from 'qs'
 
 Vue.use(VXETable)
 Vue.use(VueContextMenu)
@@ -44,7 +44,7 @@ Vue.prototype.hasPerm = hasBtnPermission
 Vue.prototype.applocation = sysApplication
 Vue.prototype.$bus = new Vue()
 Vue.config.productionTip = false
-Vue.prototype.$qs = qs;
+Vue.prototype.$qs = qs
 
 new Vue({
   router,

src/utils/socket.js

@@ -46,45 +46,45 @@ class SocketConnection extends EventEmitter {
     }
   }
 
-  async start(token) {
-    // 组件重新加载时, 如果 socket 存在, 不需要新建
-    if (!this.socket) {
-      this.socket = new SignalR.HubConnectionBuilder()
-        .configureLogging(SignalR.LogLevel.Information)
-        .withUrl(
-          `/hubs/chathub`, {
-            accessTokenFactory: () => token,
-            skipNegotiation: true,
-            transport: SignalR.HttpTransportType.WebSockets
-          }
-        )
-        .build()
-
-      this.socket.on('ForceExist', () => { //可以做相关业务逻辑
-        store.dispatch("Logout").then(()=>{
-          window.location.reload()
-        }).catch(err=>{
-          this.$message.error({
-            title: '错误',
-            description: err.message
-          })
-        })
-      })
-      
-      this.socket.on('AppendNotice', (notice) => { 
-         store.commit("APPEND_NOTICE",notice)
-      })
-
-      this.socket.onclose(async () => {
-        this.offline = true
-        this.emit('onclose')
-        await this._initialize()
-      })
-
-      await this._initialize()
-
-    }
-  }
+  // async start(token) {
+  //   // 组件重新加载时, 如果 socket 存在, 不需要新建
+  //   if (!this.socket) {
+  //     this.socket = new SignalR.HubConnectionBuilder()
+  //       .configureLogging(SignalR.LogLevel.Information)
+  //       .withUrl(
+  //         `/hubs/chathub`, {
+  //           accessTokenFactory: () => token,
+  //           skipNegotiation: true,
+  //           transport: SignalR.HttpTransportType.WebSockets
+  //         }
+  //       )
+  //       .build()
+
+  //     this.socket.on('ForceExist', () => { //可以做相关业务逻辑
+  //       store.dispatch("Logout").then(()=>{
+  //         window.location.reload()
+  //       }).catch(err=>{
+  //         this.$message.error({
+  //           title: '错误',
+  //           description: err.message
+  //         })
+  //       })
+  //     })
+
+  //     this.socket.on('AppendNotice', (notice) => {
+  //        store.commit("APPEND_NOTICE",notice)
+  //     })
+
+  //     this.socket.onclose(async () => {
+  //       this.offline = true
+  //       this.emit('onclose')
+  //       await this._initialize()
+  //     })
+
+  //     await this._initialize()
+
+  //   }
+  // }
 
   async authenticate(token) {
     await this.start(token)
@@ -92,11 +92,11 @@ class SocketConnection extends EventEmitter {
 
   listen(method) {
     if (this.offline) return
-    if (this.listened.some((v) => v === method)) return
+    if (this.listened.some(v => v === method)) return
     this.listened.push(method)
     this.one('onstart', () => {
-      this.listened.forEach((method) => {
-        this.socket.on(method, (data) => {
+      this.listened.forEach(method => {
+        this.socket.on(method, data => {
           if (this.options.log) {
             console.log({
               type: 'receive',
@@ -143,7 +143,7 @@ class SocketConnection extends EventEmitter {
     }
 
     // eslint-disable-next-line no-async-promise-executor
-    return new Promise(async (resolve) => this.one('onstart', () => resolve(this.socket.invoke(methodName, ...args))))
+    return new Promise(async resolve => this.one('onstart', () => resolve(this.socket.invoke(methodName, ...args))))
   }
 }
 
@@ -173,16 +173,16 @@ function install(Vue, connection) {
       if (this.$options.sockets) {
         const methods = Object.getOwnPropertyNames(this.$options.sockets)
 
-        methods.forEach((method) => {
+        methods.forEach(method => {
           Socket.listen(method)
 
-          Socket.one(method, (data) => this.$options.sockets[method].call(this, data))
+          Socket.one(method, data => this.$options.sockets[method].call(this, data))
         })
       }
 
       if (this.$options.subscribe) {
         Socket.one('authenticated', () => {
-          this.$options.subscribe.forEach((channel) => {
+          this.$options.subscribe.forEach(channel => {
             Socket.invoke('join', channel)
           })
         })