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

一、项目根目录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>

三、提前说明

明天开始调试链接业务

相关推荐
cts6186 分钟前
Milvus分布式数据库工作职责
数据库·分布式·milvus
2401_831501731 小时前
Linux之Zabbix分布式监控篇(二)
数据库·分布式·zabbix
软件2059 小时前
【vue3主题切换】
vue
cui_win10 小时前
Kafka 配置参数详解:ZooKeeper 模式与 KRaft 模式对比
分布式·zookeeper·kafka
代码搬运媛11 小时前
HTTP REST API、WebSocket、 gRPC 和 GraphQL 应用场景和底层实现
websocket·http·graphql
liux352812 小时前
Zabbix 分布式监控系统架构设计与优化
分布式·zabbix
cui_win14 小时前
深入理解 Kafka 核心:主题、分区与副本的协同机制
网络·分布式·kafka
淦暴尼14 小时前
基于spark的二手房数据分析可视化系统
大数据·分布式·数据分析·spark
结衣结衣.15 小时前
Vue3入门-计算属性+监听器
前端·javascript·vue.js·vue·js
拾光拾趣录15 小时前
WebSocket:断线、心跳与重连
前端·websocket