src/views/homePage/components/news/index.vue

<template>
  <div class="News">
    <el-popover placement="left" width="300" trigger="click">
      <NewsDialog ref="MessageDialog" @changeMagNum="changeMagNum" />
      <div slot="reference" class="news-item" >
        <div class="icon-item">
            <div class="red-spot" v-show="isHaveMsg"></div>
              <i class="el-icon-message-solid"></i>
          </div>
          <div class="nav-title">我的消息</div>
      </div>
    </el-popover>
    <div class="news-item" @click="gopath">
        <div class="icon-item">
        <i class="el-icon-data-line"></i>
      </div>
      <div class="nav-title">大屏</div>
    </div>
  </div>
</template>
<script>
import ReconnectingWebSocket from "reconnecting-websocket";
import NewsDialog from "./NewsDialog";
export default {
  name: "News",
  components: { NewsDialog },
  data() {
    return {
      isHaveMsg: false,
      isTwinkle: false,
      messageCount: 0,
      userList: [],
    };
  },
  created() {
    this.initWebSocket();
  },
  computed: {},
  mounted() {},
  watch: {},
  destroyed() {
    if (this.socket) {
      //离开路由之后断开websocket连接
      this.socket.close();
      this.socket = null;
      this.$store.commit("SET_SOCKET", this.socket);
    }
  },
  methods: {
    gopath(){
      	window.location.href = 'http://10.0.0.208:5000/HomePage/index.html';
    },
    changeMagNum(val) {
      this.isHaveMsg = val ? true : false;
      this.messageCount = val;
    },
    initWebSocket() {
      this.socket = this.$store.getters.socket || null;
      if ("WebSocket" in window) {
        if (!this.socket) {
          console.log(this.define.WebSocketUrl, 'this.define.WebSocketUrl');
          this.socket = new ReconnectingWebSocket(this.define.WebSocketUrl);
          this.$store.commit("SET_SOCKET", this.socket);
        }
        //添加事件监听
        let socket = this.socket;
        socket.onopen = () => {
          console.log('连接成功')
          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);
          console.log(data, "event.data");
          if (data.method == "initMessage") {
            this.isTwinkle = !!data.unreadNums.length;
            this.$refs.MessageDialog.init();
          }
          //用户在线
          if (data.method == "Online") {
          }
          //用户离线
          if (data.method == "Offline") {
          }
          //消息推送（消息公告用的）
          if (data.method == "messagePush") {
            this.$refs.MessageDialog.init();
            this.$notify({
              title: '消息推送',
              message: data.title,
              position: 'bottom-right'
            });
          }
          //用户过期
          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;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    margin-bottom: 15px;
    font-size: 14px;
    width: 100%;
    height: 80px;
    &: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: 30px;
      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>