uniapp websocket的封装与使用 ts语言

UniApp 的 WebSocket 封装通常是为了简化开发者在使用 Websocket 进行实时通信时的工作，特别是在 TypeScript 中，可以提供类型安全和更好的代码组织。下面是一个简单的步骤和示例：

1. **安装依赖**:
首先，在 UniApp 的项目里安装 WebSocket 库，如 `uni-websocket` 或者 `@imjoy/socketio-universal`，这对于基于 TypeScript 的项目通常是通过 `npm` 或 `yarn add` 完成。

2. **创建连接管理器**:
创建一个 TypeScript 类，如 `WebSocketManager`，用于初始化、关闭以及处理连接状态。这个类可能包含属性如 `socket`（WebSocket 实例），以及私有方法 `connect()` 和 `disconnect()` 等。

import { onReady } from '@imjoy/socketio-universal';

export class WebSocketManager {
  private socket: any;

  async connect(url: string) {
    this.socket = await onReady(url);
    // 添加事件监听器，比如接收到消息等
    this.socket.on('message', (data: any) => console.log('Received:', data));
  }

  disconnect() {
    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
      this.socket.close();
    }
  }
}

3. **使用实例**:
在需要的地方创建并管理 WebSocketManager 对象，例如在生命周期钩子 `onShow` 或 `onHide` 中打开或关闭连接。

export default {
  data() {
    return {
      wsManager: new WebSocketManager(),
    };
  },
  methods: {
    async onLoad() {
      this.wsManager.connect('ws://your-server.com');
    },
    onHide() {
      this.wsManager.disconnect();
    },
  },
};