byte-sailing-main/src/components/notice-one.vue

<template>
  <el-popover placement="top-start" width="350" trigger="click" ref="popover">
    <el-tabs v-model="activeName" stretch>
      <el-tab-pane :label="spellItLabel('全部', 4)" name="first"></el-tab-pane>
      <el-tab-pane :label="spellItLabel('代办', 5)" name="second"></el-tab-pane>
    </el-tabs>
    <el-scrollbar>
      <div style="height: 280px">
        <div v-if="activeName === 'first'">全部</div>
        <div v-if="activeName === 'second'">代办</div>
      </div>
    </el-scrollbar>
    <div slot="reference">
      <el-badge :value="messageSum" class="badge">
        <i class="el-icon-message-solid"></i>
      </el-badge>
    </div>
  </el-popover>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
      messageSum: 0,
      activeName: "first",
      allList: [],
      backlogList: [],
      ws: null, //建立的webSocket连接
      lockReconnect: false, //是否真正建立连接
      timeout: 30 * 1000, //30秒一次心跳
      timeoutObj: null, //心跳倒计时
      timeoutnum: null, //断开 重连倒计时
    };
  },
  created() {
    const userInfo = JSON.parse(window.localStorage.getItem("saber-userInfo"));
    this.userInfo = userInfo.content;
    // this.initWebpack();
  },
  mounted() {
    this.$refs.popover.doShow();
  },
  methods: {
    initWebpack() {
      // this.ws = new WebSocket(
      //   `/cz/victoriatourist/webStock/userId=${this.userInfo.user_id}`
      // );
      // const url = `ws:${location.host}/socket/api/victoriatourist/webStock/${this.userInfo.access_token}`;
      // const url =
      //   "ws://36.134.91.96:10003/api/victoriatourist/webStock/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0ZW5hbnRfaWQiOiI4NDUyMDYiLCJ1c2VyX25hbWUiOiJhZG1pbiIsInJlYWxfbmFtZSI6ImFkbeWnk-WQjSIsImF2YXRhciI6IiIsImF1dGhvcml0aWVzIjpbImFkbWluIl0sImNsaWVudF9pZCI6InNhYmVyIiwicm9sZV9uYW1lIjoiYWRtaW4iLCJsaWNlbnNlIjoicG93ZXJlZCBieSBibGFkZXgiLCJwb3N0X2lkIjoiMTYxOTYwOTExNzE1NDg4OTczMCIsInVzZXJfaWQiOiIxNjE5NjA5MTE3NTU3NTI2NTMwIiwicm9sZV9pZCI6IjE2MTk2MDkxMTU1Nzc4MzE0MjYiLCJzY29wZSI6WyJhbGwiXSwibmlja19uYW1lIjoiYWRtaW4iLCJvYXV0aF9pZCI6IiIsImRldGFpbCI6eyJ0eXBlIjoid2ViIn0sImV4cCI6MTY3ODMyOTA1OCwiZGVwdF9pZCI6IjE2MTk2MDkxMTcxMjk3MjM5MDYiLCJqdGkiOiI2OTE0YjY2Mi02OTVjLTQxNGYtYWU1ZC1mOTAxODgyOTJmZDkiLCJhY2NvdW50IjoiYWRtaW4ifQ.dUpl71ynDH06u_tpSqZGSHMmd0maXCGXZRrLUvTMqf4";
      // this.ws = new WebSocket(url);
      // this.ws.onopen = this.onopen;
      // this.ws.onmessage = this.onmessage;
      // this.ws.onclose = this.onclose;
      // this.ws.onerror = this.onerror;
    },
    onopen() {
      this.ws.send("ping");
      //开启心跳
      this.start();
    },
    start() {
      //开启心跳
      var self = this;
      self.timeoutObj && clearTimeout(self.timeoutObj);
      self.timeoutObj = setTimeout(() => {
        //这里发送一个心跳，后端收到后，返回一个心跳消息，
        if (self.ws.readyState == 1) {
          //如果连接正常
          self.ws.send("ping");
        } else {
          //否则重连
          self.reconnect();
        }
      }, self.timeout);
    },
    reconnect() {
      //重新连接
      if (this.lockReconnect) {
        return;
      }
      this.lockReconnect = true;
      //没连接上会一直重连，设置延迟避免请求过多
      this.timeoutnum && clearTimeout(this.timeoutnum);
      this.timeoutnum = setTimeout(() => {
        //新连接
        this.initWebpack();
        this.lockReconnect = false;
      }, 5000);
    },
    onmessage(e) {
      var msg = JSON.parse(e.data);
      console.log(msg, "assw");
    },
    onclose() {
      console.log("close");
      this.reconnect();
    },
    onerror() {
      console.log("error");
      this.reconnect();
    },
    spellItLabel(text, index) {
      if (index > 0) {
        return text + " (" + index + ")";
      } else {
        return text;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.badge {
  cursor: pointer;
  margin: 15px 24px 15px 0;
  height: 20px;
  width: 20px;
  i {
    color: #bbbbbb;
  }
}
.notice {
  padding: 12px 24px;
  border-bottom: 1px solid #e8eaec;
  font-size: 12px;
  cursor: pointer;
  display: flex;
}
</style>