本来想使用socket.io-client插件的,但是实操后发现不行,只有另寻他法,最后使用了原生的websoket。
1、首先在setup中初始化let socket = null。
2、然后在onMounted生命周期里面创建websocket实例代码如下。

 	// Websoket连接成功事件
    const websocketonopen = (res: any) => {
      console.log("WebSocket连接成功", res);
    };
    // Websoket接收消息事件
    const websocketonmessage = (res: any) => {
      console.log("数据", res);
    };
    // Websoket连接错误事件
    const websocketonerror = (res: any) => {
      console.log("连接错误", res);
    };
    // Websoket断开事件
    const websocketclose = (res: any) => {
      console.log("断开连接", res);
    };

    onMounted(() => {
      // 创建 websocket 的实例
      const wsurl = "ws://*****";
      socket = new WebSocket(wsurl);
      socket.onopen = websocketonopen;
      socket.onmessage = websocketonmessage;
      socket.onerror = websocketonerror;
      socket.onclose = websocketclose;
    });

3、最后别忘记销毁websoket

    // 组件被销毁之前,清空 sock 对象
    onBeforeUnmount(() => {
      // 关闭连接
      websocketclose;

      // 销毁 websocket 实例对象
      socket = null;
    });

旨在分享~~~~~~

Logo

前往低代码交流专区

更多推荐