vue使用websock

封装一个组件

<template>
  <div></div>
</template>
 
<script>
let socket;
// 给服务器发送一个字符串:
export default {
  data() {
    return {
      // 连接标志位
      lockReconnect: false,
      wsCfg: {
        // websocket地址
        url: "",
      },
    };
  },
  methods: {
    createWebSocket() {
      try {
        // 创建Web Socket 连接
        socket = new WebSocket(this.wsCfg.url);
        // 初始化事件
        this.initEventHandle(socket);
      } catch (e) {
        // 出错时重新连接
        console.log("error");
        this.reconnect(this.wsCfg.url);
      }
    },
    initEventHandle(socket) {
      // 连接关闭时触发
      socket.onclose = () => {
        console.log("连接关闭");
      };
      // 通信发生错误时触发
      socket.onerror = () => {
        // 重新创建长连接
        console.log("通信发生错误");
        this.reconnect();
      };
      // 连接建立时触发
      socket.onopen = () => {
        console.log("建立连接成功");
        this.$emit("successWeb");
      };
      // 客户端接收服务端数据时触发
      socket.onmessage = (msg) => {
        let data = JSON.parse(msg.data);
        this.$emit("getSockData", data);
      };
    },
    reconnect() {
      if (this.lockReconnect) {
        return;
      }
      this.lockReconnect = true;

      // 没连接上会一直重连，设置延迟避免请求过多
      setTimeout(() => {
        this.lockReconnect = false;
        this.createWebSocket(this.wsCfg.url);
      }, 2000);
    },
    test(data) {
      // 给服务器发送一个字符串:
      socket.send(data);
    },
  },
  mounted() {
    this.reconnect();
  },
};
</script>

在文件中调用组件

<template>
  <div>
    <websock ref="webso" @getSockData="getSockData" @successWeb="successWeb" />
  </div>
</template>

<script>
import websock from "@/components/websock"

export default {
  data() {
    return {

    }
  },
  components: {
    websock
  },
  mounted() {},

  methods: {
 
    getSockData(data) {
    //链接成功后后端推送过来的数据
   console.log(data)
    },

    successWeb() {
      //websock给后台传参数
      // this.$refs.webso.test(12121);
    },

 
  }
}
</script>