vue中使用 websocekt

直接复制用 不会的 或者有问题直接评论 或私聊我

<template>
  <div class="test"></div>
</template>

<script>
export default {
  data() {
    return {
      websock: null,//websocket数据初始化 不需要改 下面会赋值
    };
  },
  created() {
    this.initWebSocket();
  },
  destroyed() {
    this.websock.close();
  },
  methods: {
    // websocket
    initWebSocket() {
      // 初始化weosocket
      //只需要修改这里
      const wsuri = `wss://基地址/websocket地址/${传参的值} `;
      //只需要修改上面一行
      //`wss://www.baidu.com/websocket/course/${this.userId}`
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      // 连接建立成功
      console.log("连接成功");
    },
    websocketonerror() {
      // 连接建立失败重连
      if (this.reLink && this.reLinkCount < 100) {
        this.reLinkCount += 1;
        setTimeout(() => {
          this.initWebSocket();
        }, 1000);
      }
    },
    websocketonmessage(e) {
      // 数据接收
      console.log(e, "--///");
      const redata = JSON.parse(e.data);//数据在这里  
      //this.aaa = redata   //会vue应该知道什么意思吧  
      setTimeout(() => {
        this.$refs.speakbox.scrollTop = this.$refs.speakbox.scrollHeight;
      }, 100);
    },
    websocketsend(Data) {
      // 数据发送
      // console.log('消息内容' , Data);
      this.websock.send(Data);
    },
    websocketclose(e) {
      // 关闭
      console.log("断开连接");
      if (this.reLink) {
        setTimeout(() => {
          this.initWebSocket();
        }, 1000);
      }
    },
    // websocket
  },
};
</script>