vue3 ts vue封装web socketvue

在Vue3中，使用TypeScript（TS）封装WebSocket的过程包括了几个关键步骤。首先，你需要了解Vue3的Composition API，它提供了一种更灵活的方式来组织和重用逻辑。TypeScript则为你的WebSocket提供类型安全和代码的自动补全。以下是一个简单的封装过程：

1. 安装并引入必要的依赖：
你需要安装Vue3和TypeScript，以及任何其他你可能需要的Vue插件或库。

2. 创建WebSocket服务：
使用Vue3的Composition API创建一个可重用的WebSocket服务。你可以定义一个函数，它创建WebSocket连接，并提供方法来发送消息和监听消息。

3. 类型定义：
使用TypeScript为WebSocket服务定义类型，确保消息的发送和接收都有明确的类型定义，这样可以在编译时捕获潜在的错误。

4. 使用服务：
在Vue组件中引入并使用这个WebSocket服务，利用Composition API的reactive、ref等特性来管理WebSocket连接的状态和数据。

示例代码如下：

// WebSocketService.ts
import { ref } from 'vue';

export const useWebSocketService = () => {
  const socket = ref<WebSocket | null>(null);
  const isConnected = ref(false);

  const connect = (url: string): void => {
    socket.value = new WebSocket(url);
    socket.value.onopen = () => {
      isConnected.value = true;
    };
  };

  const send = (message: string): void => {
    if (socket.value && isConnected.value) {
      socket.value.send(message);
    }
  };

  const receive = (callback: (message: string) => void): void => {
    if (socket.value && isConnected.value) {
      socket.value.onmessage = (event) => {
        callback(event.data as string);
      };
    }
  };

  return {
    connect,
    send,
    receive,
    isConnected,
  };
};

// 使用服务的组件示例
<script lang="ts">
import { defineComponent } from 'vue';
import { useWebSocketService } from './WebSocketService';

export default defineComponent({
  setup() {
    const { connect, send, receive, isConnected } = useWebSocketService();

    connect('ws://example.com/socket');

    receive((message) => {
      console.log('Received message:', message);
    });

    send('Hello, WebSocket!');

    return {
      isConnected,
    };
  },
});
</script>