shop-pc/pages/account/index/message.vue

<!--
 * @Author: ch
 * @Date: 2022-05-04 17:48:12
 * @LastEditors: ch
 * @LastEditTime: 2022-05-04 17:53:11
 * @Description: file content
-->

<template>
  <div>
    <main class="main">
      <h3 class="title">消息通知</h3>
      <section class="section">
        <div class="section__item flex" v-for="item in msgList" :key="item.id">
          <img
            class="section__item-img"
            src="https://img1.baidu.com/it/u=3384796346,381674655&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
            alt="消息通知"
          />
          <div class="section__item-content flex flex-column">
            <div class="section__item-content--title flex">
              <span>{{ item.payload.title || `马士兵严选上新啦` }}</span>
              <span class="section__item-content--time">{{
                item.createTimeStamp
              }}</span>
            </div>
            <div class="section__item-content--txt">
              {{
                item.payload.content ||
                `马士兵严选上新啦!！走过路过不要错过，大家快来看看...`
              }}
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      Socket: null,
      msgList: [],
    };
  },
  computed: {
    ...mapState(["token"]),
  },
  mounted() {
    let url = `ws://192.168.10.93:8090/ws?client=${this.token}&type=1`;
    // let url = `wss://k8s-horse-gateway.mashibing.cn/ws?client=${this.token}&type=1`;
    this.socket(url);
  },
  methods: {
    socket(url) {
      let vm = this;
      vm.Socket = new WebSocket(url);
      vm.Socket.onopen = () => {
        let traceId = Math.random();
        vm.Socket.send(
          `{"traceId":${traceId},traceType:1,"content":{"size": 100}}`
        );
      };
      vm.Socket.onclose = () => {
        vm.Socket = null;
      };
      vm.Socket.onerror = () => {
        if (vm.Socket.readyState !== 3) {
          if (vm.reconnection > 3) {
            // vm.$message.error("链接失败!");
            return;
          }
        }
      };
      vm.Socket.onmessage = (e) => {
        if (e.data == `pong`) {
          return;
        }
        let msg = JSON.parse(e.data);
        console.log("websocket收到消息", msg);
        if (msg.traceType == 1) {
          let traceId = Math.random();
          let sys = msg.content.sessionVOS.find((item) => item.type != 3);
          let str = `{"traceId":${traceId},traceType:2,"content":{"sessionId":${sys.id}}}`;
          vm.Socket.send(str);
        }
        if (msg.traceType == 2) {
          vm.msgList = msg.content;
        }
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  width: 1000px;
  .title {
    width: 100%;
    height: 42px;
    background: #f8f8f8;
    border: 1px solid #dddddd;
    padding: 0 24px;
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 42px;
  }

  .section {
    padding: 22px 20px 0;
    border: 1px solid #ddd;
    margin-top: -1px;

    &__item {
      margin-bottom: 20px;

      &-img {
        width: 110px;
        height: 110px;
        margin-right: 20px;
      }

      &-content {
        width: 840px;
        &--title {
          margin-top: 8px;
          font-size: 16px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }
        &--time {
          font-size: 12px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #999999;
          margin-left: auto;
        }
        &--txt {
          margin-top: auto;
          margin-bottom: 8px;
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }
}
</style>