vue3+vite +ts 使用websocket

好的，针对你的问题，我可以给出以下的步骤：

1. 安装依赖

首先需要在项目中安装 `websocket` 和 `@types/websocket` 两个依赖，可以使用以下命令：

npm install --save websocket @types/websocket

2. 创建 WebSocket 实例

在 Vue3 中，可以在 `setup()` 函数中创建 WebSocket 实例，示例代码如下：

import { ref } from 'vue';
import WebSocket from 'websocket';

export default {
  setup() {
    const socket = ref<WebSocket>();
    socket.value = new WebSocket('ws://localhost:8080');
    return { socket };
  }
}

在代码中，我们首先导入 `ref` 和 `WebSocket`，然后在 `setup()` 函数中创建一个 `socket` 变量，使用 `ref` 函数将其转化为响应式对象，然后通过 `new WebSocket()` 方法创建一个 WebSocket 实例，并将其赋值给 `socket.value`。

3. 监听 WebSocket 事件

在 Vue3 中，可以使用 `watchEffect()` 函数监听 WebSocket 事件，示例代码如下：

import { watchEffect } from 'vue';
import WebSocket from 'websocket';

export default {
  setup() {
    const socket = ref<WebSocket>();
    socket.value = new WebSocket('ws://localhost:8080');

    watchEffect(() => {
      socket.value.onopen = () => {
        console.log('WebSocket opened');
      };

      socket.value.onmessage = (event) => {
        console.log('WebSocket message received:', event.data);
      };

      socket.value.onclose = () => {
        console.log('WebSocket closed');
      };

      socket.value.onerror = (error) => {
        console.error('WebSocket error:', error);
      };
    });

    return { socket };
  }
}

在代码中，我们使用 `watchEffect()` 函数监听 `socket` 变量的变化，并在变化时重新注册 WebSocket 相关事件。具体来说，我们监听了 `onopen`、`onmessage`、`onclose` 和 `onerror` 四个事件，并在事件触发时输出相关信息。

4. 发送 WebSocket 消息

在 Vue3 中，可以通过 `socket.value.send()` 方法发送 WebSocket 消息，示例代码如下：

import { ref } from 'vue';
import WebSocket from 'websocket';

export default {
  setup() {
    const socket = ref<WebSocket>();
    socket.value = new WebSocket('ws://localhost:8080');

    function sendMessage(message: string) {
      if (socket.value.readyState === WebSocket.OPEN) {
        socket.value.send(message);
      } else {
        console.error('WebSocket is not open');
      }
    }

    return { socket, sendMessage };
  }
}

在代码中，我们定义了一个 `sendMessage()` 函数，用于发送 WebSocket 消息。具体来说，我们首先判断 WebSocket 是否处于打开状态（`readyState === WebSocket.OPEN`），如果是，则调用 `socket.value.send()` 方法发送消息，否则输出错误信息。

以上就是在 Vue3 中使用 WebSocket 的基本步骤，希望可以对你有所帮助。