标签：Vue websocket 100% hasMes 即时 height content width

<template>
  <div  class="app-wrapper">
    <div class="message" v-show="hasMes">
      <div class="header"><i class="el-icon-close" style="float: right;cursor: pointer;color: white;line-height: 1.4;" @click="hideMessage"></i></div>
      <div class="content"><span>{{content}}</span></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Layout',
  components: {
  },
  data() {
    return {
        hasMes:false,
        content:'',
    }
  },
  methods: {
    hideMessage() {
      this.hasMes = false;
      this.content = '';
    },
    initWebSocket () {
        // 连接错误
        this.websocket.onerror = this.setErrorMessage
        // 连接成功
        this.websocket.onopen = this.setOnopenMessage
        // 收到消息的回调
        this.websocket.onmessage = this.setOnmessageMessage
        // 连接关闭的回调
        this.websocket.onclose = this.setOncloseMessage
        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = this.onbeforeunload
      },
      setErrorMessage () {
        this.initWebSocket();
      },
      setOnopenMessage () {
      },
      setOnmessageMessage (event) {
        // 根据服务器推送的消息做自己的业务处理
        this.hasMes = true;
        let messageData =  JSON.parse(event.data);
        this.content = messageData.content; 
        setTimeout(() => {
          this.hasMes = false;
        }, 5 * 1000)
      },
      setOncloseMessage () {
         
      },
      onbeforeunload () {
         
        this.closeWebSocket()
      },
      closeWebSocket () {
        this.websocket.close()
      }
  },
  created() {
    if ('WebSocket' in window) {
      const wsuri = "ws://" + location.host + "/websocket/admin";        //路径可根据不同用户指定，此处我指定的是用户名
        this.websocket = new WebSocket(wsuri);
        this.initWebSocket()
      } else {
        alert('当前浏览器 Not support websocket')
      }
  },
  mounted(){
  },
  destroyed() {   
        this.websock.close() //离开路由之后断开websocket连接
  }, 
}
</script>
<style lang="scss" scoped>
.message{
    position: absolute;
    bottom: 20px;
    right: 50px;
    width: 300px;
    height: 100px;
    background: #fff;
    border: 1px solid #7289ac;
    border-radius: 5px;
}
.message .header{
  width: 100%;
  height: 23px;
  background: #7289ac;
}
.message .content{
  width: 100%;
  height: 80px;
  border: none;
  padding: 20px 10px 10px 10px;
}
.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
}

</style>

标签：Vue,websocket,100%,hasMes,即时,height,content,width
来源： https://www.cnblogs.com/mr17/p/16112762.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。