当前位置：首页 > article >正文

workman服务端开发模式-应用开发-vue-element-admin挂载websocket

article 2024/12/25 11:55:15

一、项目根目录main.js添加全局引入

import '@/utils/websocket'

二、在根目录app.vue 中初始化WebSocket连接

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
  import store from './store'
export default {
  name: 'App',
  created() {
    // 因为我的页面有缓存机制，用户下次有可能直接打开某个登录后才能访问的页面 比如F5刷新了某个页面 需要重连
    // 又比如后端服务器因为什么原因突然中断了一下 也需要重新连接WebSocket
    // 每3秒检测一次websocket连接状态 未连接 则尝试连接 尽量保证网站启动的时候 WebSocket都能正常长连接
    setInterval(this.WebSocket_StatusCheck, 2000)
  },
  methods: {
    // 1、WebSocket连接状态检测：
    WebSocket_StatusCheck() {
      //如果登录了情况下，验证是否已经绑定
      if(store.getters.token != undefined || store.getters.token != null){
        if (!this.$WebSocket.WebSocketHandle || this.$WebSocket.WebSocketHandle.readyState !== 1) {
          this.WebSocketINI()
        }else{
          this.$WebSocket.WebSocketHandle.send(JSON.stringify({type: 'ping'}))
        }
      }
    },

    // 2、WebSocket初始化：
    async WebSocketINI() {
      // 1、浏览器是否支持WebSocket检测
      if (!('WebSocket' in window)) {
        return
      }

      // 2、从后台提取WebScoket服务器连接地址：根据自己业务接口获取 或者直接跳过 下面直接写死
      /*const tmpResource = await this.$Api.Resource.Get('OtherSets_WebSocket_Address').then(res => {
          return res
      })*/
      const tmpWebsocketSrverAddress = 'ws://你的地址'//可以直接赋值如：ws://127.0.0.1:1234
      // 3、创建Websocket连接
      const tmpWebsocket = new WebSocket(tmpWebsocketSrverAddress)
      /*const protocols = ['base64url.bearer.authorization.sockjs.nodecode.ly']; // 自定义header
      const tmpWebsocket = new SockJS(tmpWebsocketSrverAddress)*/
      // 4、全局保存WebSocket操作句柄：main.js 全局引用
      this.$WebSocket.WebsocketINI(tmpWebsocket)

      // 5、WebSocket连接成功提示
      tmpWebsocket.onopen = function(ev){

      }
      tmpWebsocket.onmessage = function(ev){
        const datas = JSON.parse(ev.data)
        if(datas.type == 'ping'){
          if(datas.client_id != undefined){
            store.dispatch('user/bindInfo',{client_id:datas.client_id}).then(res => {
              if(res == 2){

              }else{
                this.WebSocketINI()
              }
            })
          }
        }
        if(datas.type == 'close'){
          if(datas.eve == 'repeat'){
            store.dispatch('user/repeatToken')
          }else if(datas.eve == 'expire'){
            store.dispatch('user/expireToken')
          }
        }
      }
      //6、连接失败提示
      tmpWebsocket.onclose = function(ev) {
        console.log(ev)
        store.dispatch('user/resetToken')
      }
    }
  }
}
</script>