1. socket生命周期监听、断线重连、心跳检测 2. socket消息校验、生成、解析 3. 观察者模式分发消息

hcong

2024-11-26 4260da6a8b15cc3fd8dfb254ba3a078b1d7c596a

 src/App.vue

@@ -19,17 +19,17 @@
          <el-scrollbar>
            <div class="el-main__content">
              <Content></Content>
              <el-backtop
              <!-- <el-backtop
                target=".el-main .el-scrollbar__wrap"
                :right="40"
                :right="10"
                :bottom="100"
                style="width: 120px"
                style="z-index: 1000;"
              >
                <div class="back-top">
                  <el-icon><ArrowUpBold /></el-icon>
                  <span style="">返回顶部</span>
                </div>
              </el-backtop>
              </el-backtop> -->
            </div>
          </el-scrollbar>
        </el-main>
@@ -40,13 +40,15 @@

<script>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';

import { FYWebSocket } from '@/socket/index.js'
import eventBus from '@/socket/eventBus.js';
export default {
  data() {
    return {
      isCollapsed: false,
      navTitles: [],
      locale: zhCn,
      socket: null,
    };
  },
  methods: {
@@ -56,7 +58,26 @@
    navPage(titles) {
      this.navTitles = titles;
    },
    // 连接websocket
    connectWebSocket() {
      this.socket = new FYWebSocket()
      this.socket.init({
        time: 4 * 1000,
        timeout: 2 * 1000,
        reconnect: 3 * 1000
      }, true)
    },
    // 断线重连websocket
    startReconnectWebSocket() {
      eventBus.register('reconnect', () => {
        this.connectWebSocket()
      })
    }
  },
  created() {
    this.connectWebSocket()
    this.startReconnectWebSocket()
  }
};
</script>