antissoft / NetworkInformation

<template>
  <div class="News">
    <el-popover
      placement="left"
      width="300"
      trigger="click"
      v-for="(item, index) in itemList"
      :key="index"
    >
      <NewsDialog />
      <div slot="reference" class="news-item" @click="activeItem = index">
        <div class="icon-item">
          <div class="red-spot" v-show="item.hasInfo"></div>
          <i :class="item.icon"></i>
        </div>
        <div class="nav-title">{{ item.title }}</div>
      </div>
    </el-popover>
  </div>
</template>

<script>
import ReconnectingWebSocket from "reconnecting-websocket";
import NewsDialog from "./NewsDialog";
export default {
  name: "News",
  components: { NewsDialog },
  data() {
    return {
      itemList: [
        // { icon: "el-icon-s-order", title: "我的待办", hasInfo: false },
        { icon: "el-icon-message-solid", title: "我的消息", hasInfo: true },
      ],
    };
  },
  created() {
    this.initWebSocket()
  },
  computed: {},
  mounted() {},
  destroyed() {
    if (this.socket) {
      //离开路由之后断开websocket连接
      this.socket.close()
      this.socket = null
      this.$store.commit('SET_SOCKET', this.socket)
    }
  },
  methods: {
    initWebSocket() {
      this.socket = this.$store.getters.socket || null;
      if ("WebSocket" in window) {
        if (!this.socket) {
          this.socket = new ReconnectingWebSocket(this.define.WebSocketUrl);
          this.$store.commit("SET_SOCKET", this.socket);
        }
        //添加事件监听
        let socket = this.socket;
        socket.onopen = () => {
          var onConnection = {
            method: "OnConnection",
            token: this.$store.getters.token,
            mobileDevice: false,
          };
          socket.send(JSON.stringify(onConnection));
        };
        socket.onmessage = (event) => {
          let data = JSON.parse(event.data);
          if (data.method == "initMessage") {
            this.messageCount =
              data.unreadMessageCount + data.unreadNoticeCount;
            this.isTwinkle = !!data.unreadNums.length;
          }
          //用户在线
          if (data.method == "Online") {
          }
          //用户离线
          if (data.method == "Offline") {
          }
          //消息推送（消息公告用的）
          if (data.method == "messagePush") {
            console.log('messagePush', '消息推送（消息公告用的）', data);
            this.messageCount += data.unreadNoticeCount;
            if (this.$refs.MessageList.visible) this.$refs.MessageList.init();
          }
          //用户过期
          if (data.method == "logout") {
            this.$message({
              message: data.msg || "登录过期,请重新登录",
              type: "error",
              duration: 1000,
              onClose: () => {
                this.$store.dispatch("resetToken").then(() => {
                  location.reload();
                });
              },
            });
          }
          //接收对方发送的消息
          if (data.method == "receiveMessage") {
            console.log('receiveMessage', '接收对方发送的消息', data);
            //判断是否打开窗口
            if (
              this.$refs.UserList &&
              this.$refs.UserList.$refs.NCCIm &&
              this.$refs.UserList.$refs.NCCIm.visible
            ) {
              if (this.$refs.UserList.$refs.NCCIm.info.id === data.formUserId) {
                let messIitem = {
                  userId: data.formUserId,
                  messageType: data.messageType,
                  message: data.formMessage,
                  dateTime: this.ncc.toDate(data.dateTime),
                };
                this.$refs.UserList.$refs.NCCIm.addItem(messIitem);
                //更新已读
                let updateReadMessage = {
                  method: "UpdateReadMessage",
                  formUserId: data.formUserId,
                  token: this.$store.getters.token,
                };
                socket.send(JSON.stringify(updateReadMessage));
                this.$refs.UserList.updateReply(data);
              } else {
                this.$refs.UserList.updateReply(data, 1);
                this.isTwinkle = true;
              }
            } else {
              this.$refs.UserList.updateReply(data, 1);
              this.isTwinkle = true;
            }
          }
          //显示自己发送的消息
          if (data.method == "sendMessage") {
            console.log('sendMessage', '显示自己发送的消息', data);
            if (this.$refs.UserList.$refs.NCCIm.info.id !== data.toUserId)
              return;
            //添加到客户端
            let messIitem = {
              userId: data.UserId,
              messageType: data.messageType,
              message: data.toMessage,
              dateTime: this.ncc.toDate(data.dateTime),
            };
            this.$refs.UserList.updateLatestMessage(data);
            this.$refs.UserList.$refs.NCCIm.addItem(messIitem);
          }
          //消息列表
          if (data.method == "messageList") {
            console.log('messageList', '消息列表', data);
            this.$refs.UserList.$refs.NCCIm.getList(data);
          }
        };
      }
    },
  },
};
</script>
<style scoped lang="scss">
.News {
  .news-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    cursor: pointer;
    margin-bottom: 15px;
    font-size: 14px;
    width: 100%;
    &:hover {
      background-color: rgba(228, 231, 237, 0.23);
    }
    &:active {
      background-color: #dfdada34;
      .nav-title {
        color: #1890ff;
      }
    }
    .icon-item {
      position: relative;
      width: 24px;
      height: 18px;
      text-align: center;
      line-height: 30px;
      font-size: 18px;
      margin: 8px;
      .red-spot {
        position: absolute;
        right: -6px;
        top: -6px;
        width: 8px;
        height: 8px;
        background-color: red;
        border-radius: 50%;
      }
    }
    .nav-title {
      line-height: 30px;
    }
  }
}
</style>