vue项目运用websocket

需要浏览器支持
完整代码

<template>
  <div id="app">
    <router-view />
    <div v-show="isusercome" @mouseout="out" @mousemove="over" class="websocket">
      <span>消息</span>
      <div class="message" v-show="show"  ><span @click="done" style="position:absolute;right:0.05rem;top:-0.04rem;color:#333333" >X</span>任务名称：</span><span @click="locationHref" class="msg" v-html="msg" ></span><br/><span>用户：</span><span class="msg" v-html="user" ></span></div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
import { web } from "../src/axios/login";

export default {
  name: "App",
  data() {
    return {
      route: "",
      msg:'事中任务-全部',
      user:'管理员',
      isusercome:false,
      show:false,
    };
  },
  beforeMount() {
    //取当前浏览器地址，用户刷新依旧进入此页面
    this.route = location.hash.slice(1);
  },
  created() {},
  mounted() {
      this.updata()
    
  },
  computed:{
    ...mapGetters("c", ["getwebsocket"]),
    ...mapState("c", ["websocket"])
  },
  watch:{
    getwebsocket(val){
      //登录进来执行websocket
      if(val){
        // this.socket()
      }
      //退出关闭消息框
      else{
        this.isusercome=false
      }
    }
  },
  methods: {
    //开启websocket
    socket() {
      console.log(99)
      var socket;
      this.msg='6666666'
      var that=this
      if (typeof WebSocket == "undefined") {
        console.log("遗憾：您的浏览器不支持WebSocket");
      } else {
        console.log("恭喜：您的浏览器支持WebSocket");
        //实现化WebSocket对象
        //指定要连接的服务器地址与端口建立连接
        //注意ws、wss使用不同的端口。我使用自签名的证书测试，
        //无法使用wss，浏览器打开WebSocket时报错
        //ws对应http、wss对应https。
        socket = new WebSocket("ws://192.168.12.13:9112/manage/ws/"+JSON.parse(sessionStorage.getItem("userInformation")).id.toString());
        //连接打开事件
        socket.onopen = function() {
          console.log("Socket 已打开");
          web().then(res=>{
            console.log(res,'成功了')
          })
          alert("1");
        };
        //收到消息事件
        socket.onmessage = function(msg) {
          //收到消息弹窗消息框
          this.isusercome=true
          //消息框赋值
          let aa=JSON.parse(msg.data)
          that.msg=aa.name
          that.user=aa.username
        };
        //连接关闭事件
        socket.onclose = function() {
          console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
          console.log("Socket连接错误");
        };

        //窗口关闭时，关闭连接
        window.unload = function() {
          socket.close();
        };
      }
    },
    //鼠标移动到消息框
    over(){
    this.show=true
    },
    //鼠标移出到消息框

    out(){
      // this.show=false
    },
    //点击关闭
    done(){
      this.show=false
    },
    //点击文字跳转到事前或事中详情页
    locationHref(){
      if(this.msg.indexOf('事前')!=-1){
        //事前
        this.show=false
        this.$router.push('/index/tab/PriorVerification/PriorVerification')
      }
      else{
        //事中
        this.show=false
        this.$router.push('/index/tab/MatterCheck/MatterCheck')

      }
    },
    //刷新页面执行的一系列caozuo
    updata(){
      //用户信息存在，显示消息框
      if(JSON.parse(sessionStorage.getItem('userInformation'))){

        // this.socket()
    }
    //用户登录后刷新页面依旧进入当前页
    if (JSON.parse(sessionStorage.getItem("userInformation"))) {
      this.$router.push(this.route);
    } else {
      //如果在页面状态清除了localstorage,刷新则进入登录页
      this.$router.push("./login");
    }
    }
  }
};
</script>

<style lang="scss">
#app {
  height: 100%;
  position: relative;
}

  @keyframes gg{from {bottom:0;}to {bottom:0.50rem;}}
.websocket{
  animation: gg 3s infinite alternate-reverse linear;
  width:0.50rem;
  height: 0.5rem;
  position: absolute;
  right: 0.2rem;
  bottom:0;
  border-radius: 50%;
  background: lightgray;
  color: black;
  white-space: nowrap;
  // overflow: hidden;
  line-height: 0.5rem;
  cursor: pointer;
  text-align: center;

  
  .message{
    padding: 0 0.05rem;
    position: absolute;
    right:0.50rem;
    bottom: 0.30rem;
    background: lightgray;
    height: 0.60rem;
    line-height: 0.30rem;
    width: 2.20rem;
    box-shadow: gray;
    z-index: 9999;
    color: black;
    text-align: left;
    .msg{
      color: blue;
    text-decoration: underline;

    }
  }
}
//设置滚动条整体
::-webkit-scrollbar {
  width: 0.05rem;
  background-color: lightgrey;
}
//设置滚动条滑块
::-webkit-scrollbar-thumb {
  border-radius: 0.01rem;
  background: grey;
}
//引入全局样式
@import "./assets/css/original.scss";
@import "./assets/icon/iconfont.css";
@import "./assets/css/common.scss";
@import "./components/Top/Top.scss";
</style>