vue3+vite +ts 使用websocket

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

1. 安装 `socket.io-client` 库

您可以使用以下命令进行安装：

npm install socket.io-client@4.0.0

2. 在 `main.ts` 中引入 `socket.io-client` 库

在 `main.ts` 中添加以下代码：

import { io } from 'socket.io-client';
const socket = io('ws://localhost:3000');

这里的 `ws://localhost:3000` 是您的 WebSocket 服务地址，根据您的实际情况进行修改。

3. 在组件中使用 WebSocket

在您的组件中，您可以使用以下代码来连接 WebSocket 并发送消息：

import { ref } from 'vue';
export default {
  setup() {
    const message = ref('');

    socket.on('connect', () => {
      console.log('Connected to server');
    });

    socket.on('message', (data: any) => {
      console.log('Received message:', data);
    });

    const sendMessage = () => {
      socket.emit('message', message.value);
      message.value = '';
    };

    return {
      message,
      sendMessage,
    };
  },
};

这里的 `message` 是用户输入的消息，`sendMessage` 是发送消息的方法。当用户连接到 WebSocket 服务器时，会在控制台中输出 `Connected to server`，当收到消息时，会在控制台中输出 `Received message: xxx`，其中 `xxx` 是收到的消息内容。

以上就是使用 Vue3 + Vite + TypeScript 进行 WebSocket 开发的简单步骤，希望能对您有所帮助！