websocket在vue3的ts封装

WebSocket是一种在单个TCP连接上进行全双工通信的协议，常用于实现实时双向数据传输，如聊天应用、在线游戏等。在Vue 3中结合TypeScript使用WebSocket，可以创建更类型安全、易于维护的组件。

首先，确保已安装`vue-websocket`库，可以通过npm或yarn添加：

npm install vue-websocket typescript
# 或者
yarn add vue-websocket ts

接下来，在`.d.ts`配置文件中引入WebSocket类型，并定义一个自定义的WebSocket实例类型：

// src/global.d.ts
import { WebSocket } from 'vue-websocket';

declare module '*.vue' {
  import { ComponentOptionsBase } from 'vue';
  export default ComponentOptionsBase;
}

declare module 'vue/types/vue' {
  interface Vue {
    $websocket: WebSocket;
  }
}

然后在你的组件中，你可以像下面这样创建和管理WebSocket连接：

<template>
  <!-- ... -->
</template>

<script lang="ts">
import { ref, onMounted } from 'vue';
import { createSocket } from '@/utils/websocket'; // 自定义函数，处理创建和连接

export default {
  setup() {
    const socket = ref(null);

    onMounted(() => {
      socket.value = createSocket('your-url'); // 创建WebSocket并连接到指定URL
      socket.value.on('message', (data) => console.log('Received:', data));
      socket.value.onClose(() => console.log('Connection closed'));
    });

    // 添加其他事件处理器，如错误处理
    return {
      socket,
      sendMessage: async (message: string) => socket.value.send(message),
      closeConnection: () => socket.value.close(),
    };
  },
};
</script>

在这个例子中，`createSocket`是你自己定义的一个辅助函数，它负责初始化WebSocket实例，设置回调监听器等。记得提供正确的URL，并处理可能发生的错误和异常。