yos_meida/src/components/socketMessage/index.vue

<template>
  <div class="messageBox" :class="panelIsShow?'show':''">
    <div class="flex-align-center flex-between title-panel">
      <p>消息提示</p>
      <p @click="panelIsShow = false">忽略</p>
    </div>
    <p class="message-item" v-for="item in list" :key="item.index">
      [{{item.type}}消息]&nbsp;{{item.title}}
    </p>
    <p class="unread-panel">共有{{total}}条未读消息</p>
  </div>
</template>
<script>
  export default {
    components:{
    },
    data () {
      return {
        id:'',
        // path:"ws://121.37.152.76:8080/yos/webSocket/",
        path:"wss://meida.cnyunl.com/yos/webSocket/",
        panelIsShow:false,
        list:[],
        total:0,
      }
    },
    created () {
      let token = JSON.parse(sessionStorage.getItem('active_account')).token
      this.path = this.path + token
      console.log(this.path)
    },
    mounted () {
      this.init()
      this.getMessageList()
    },
    methods:{
      async getMessageList () {
        let param = {
          "classname": "system.message.Message",
          "method": "queryMessage",
          "content": {
            "isread":0,
            "nocache": true,
            "pageNumber": 1,
            "pageSize": 5,
            "type": '',
            "where":{}
          }
        }
        let res = await this.$api.requested(param)
        this.total = res.total
      },
      onCloseThemeChat () {
      },
      onTypeChange (val) {
      },
      onThemeChat (bool) {
      },
      onChange (type) {
      },
      init: function () {
          if(typeof(WebSocket) === "undefined"){
              alert("您的浏览器不支持socket")
          }else{
              // 实例化socket
              this.socket = new WebSocket(this.path)
              // 监听socket连接
              this.socket.onopen = this.open
              // 监听socket错误信息
              this.socket.onerror = this.error
              // 监听socket消息
              this.socket.onmessage = this.getMessage
              this.contectIsLive()
          }
      },
      open: function (val) {
          // console.log("socket连接成功",val)
      },
      error: function () {
          console.log("连接错误")
      },
      getMessage: function (msg) {
        if(msg.data !== 'alive') {
          this.panelIsShow = true
          this.list = [JSON.parse(msg.data).message]
          this.getMessageList()
        }
      },
      send: function (type,val,timsubjectid) {
      },
      close: function () {
        console.log("socket已经关闭")
      },
      // 心跳链接
      contectIsLive () {
        this.realTimeClData = setInterval(() => {
          this.socket.send('isalive')
        }, 10000);
      }
    },
    destroyed () {
      // 销毁监听
      this.socket.onclose = this.close
    },
    beforeDestroy () {
      clearInterval(this.realTimeClData);
    }
  }
</script>
<style>
</style>
<style scoped>
.messageBox{
  position: fixed;
  right:10px;
  bottom: -310px;
  width:250px;
  height: 300px;
  background: #fff;
  box-shadow: 0 0 10px #ccc;
  border-radius: 4px;
  z-index: 9999;
  transition: .5s linear;
  overflow: hidden;
}
.show{
  bottom:10px
}
.title-panel{
  padding: 10px;
  background: #3874F6;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.message-item{
  padding: 10px;
  font-size: 14px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}
.unread-panel{
  position: absolute;
  bottom:0px;
  width: 100%;
  text-align: center;
  font-size: 14px;
  padding: 10px;
  color:#999999;
  border-top:1px solid #CCCCCC
}
</style>