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

hcong

2024-11-26 4260da6a8b15cc3fd8dfb254ba3a078b1d7c596a

 src/App.vue

@@ -4,7 +4,6 @@
      <el-aside class="el-aside"
        ><SiderMenu
          :collapse="isCollapsed"
          @collapsed-sider="collapsedSider"
          @nav-page="navPage"
        ></SiderMenu
      ></el-aside>
@@ -20,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>
@@ -41,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: {
@@ -57,11 +58,33 @@
    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>

<style scoped>
.el-container{
  /* min-height: 820px; */
}
.el-aside {
  width: initial;
}
@@ -80,8 +103,9 @@
}

.el-main__content {
  padding: var(--el-main-padding);
  padding: var(--el-main-padding) calc(var(--el-main-padding) / 2);
  max-height: calc(100vh - 60px - var(--el-main-padding) * 2);
  /* background-color: aqua; */
  /* overflow: auto; */
}
.back-top {