# WebSocket 工具类

一个通用的 WebSocket 连接管理工具，提供连接、重连、消息发送等功能。

## 功能特性

- 🔌 **自动连接管理**: 自动处理连接、断开、重连
- 🔄 **智能重连**: 支持自动重连，可配置重连次数和间隔
- 📡 **事件系统**: 完整的事件监听机制
- 🎯 **Vue 2 兼容**: 提供组合式 API 风格的 Hook

## 基本用法

### 1. 直接使用 WebSocketManager 类

```javascript
import { WebSocketManager } from '@vue2-client/utils/websocket/websocket'

// 创建实例
const wsManager = new WebSocketManager({
  autoReconnect: true,
  reconnectInterval: 3000,
  maxReconnectAttempts: 5
})

// 连接 WebSocket
wsManager.connect('ws://localhost:8080/websocket')

// 监听事件
wsManager.on('connected', (data) => {
  console.log('连接成功', data)
})

wsManager.on('message', (data) => {
  console.log('收到消息', data.data)
})

// 发送消息
wsManager.send({ type: 'ping', data: 'hello' })

// 断开连接
wsManager.disconnect()
```

### 2. 在 Vue 组件中使用 useWebSocket Hook

```vue
<template>
  <div>
    <div>连接状态: {{ connectionState.isConnected ? '已连接' : '未连接' }}</div>
    <div>重连次数: {{ connectionState.reconnectAttempts }}</div>
    <button @click="sendMessage">发送消息</button>
    <button @click="reconnect">重连</button>
  </div>
</template>

<script>
import { useWebSocket } from '@vue2-client/utils/websocket/websocket'

export default {
  setup() {
    const {
      connect,
      disconnect,
      reconnect,
      send,
      on,
      off,
      getConnectionState
    } = useWebSocket({
      autoReconnect: true,
      reconnectInterval: 3000,
      maxReconnectAttempts: 5
    })

    // 连接状态
    const connectionState = getConnectionState()

    // 连接 WebSocket
    connect('ws://localhost:8080/websocket')

    // 监听消息
    on('message', (data) => {
      console.log('收到消息:', data.data)
    })

    // 发送消息
    const sendMessage = () => {
      send({ type: 'ping', data: 'hello' })
    }

    // 重连
    const reconnectWebSocket = () => {
      reconnect('ws://localhost:8080/websocket')
    }

    return {
      connectionState,
      sendMessage,
      reconnect: reconnectWebSocket
    }
  }
}
</script>
```

## API 参考

### WebSocketManager 类

#### 构造函数选项

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| autoReconnect | Boolean | true | 是否自动重连 |
| reconnectInterval | Number | 3000 | 重连间隔（毫秒） |
| maxReconnectAttempts | Number | 5 | 最大重连次数 |

#### 方法

##### connect(url, options)
连接 WebSocket
- `url`: WebSocket 连接地址
- `options`: 连接选项（可选）

##### disconnect()
断开 WebSocket 连接

##### send(message)
发送消息
- `message`: 要发送的消息（字符串或对象）

##### reconnect(url, options)
手动重连
- `url`: WebSocket 连接地址
- `options`: 连接选项（可选）

##### on(event, callback)
添加事件监听器
- `event`: 事件名称
- `callback`: 回调函数

##### off(event, callback)
移除事件监听器
- `event`: 事件名称
- `callback`: 回调函数

##### getConnectionState()
获取连接状态
- 返回: `{ isConnected, reconnectAttempts, readyState }`

### 事件列表

| 事件名称 | 说明 | 数据 |
|----------|------|------|
| connecting | 正在连接 | `{ url }` |
| connected | 连接成功 | `{ event }` |
| message | 收到消息 | `{ data, event }` |
| closed | 连接关闭 | `{ event }` |
| error | 连接错误 | `{ event }` |
| reconnecting | 重连中 | `{ attempts }` |
| reconnect-failed | 重连失败 | `{ attempts }` |
| disconnected | 已断开连接 | `{}` |

## 使用示例

### 实时聊天应用

```javascript
import { useWebSocket } from '@vue2-client/utils/websocket/websocket'

export default {
  setup() {
    const { connect, send, on, off } = useWebSocket({
      autoReconnect: true,
      reconnectInterval: 2000,
      maxReconnectAttempts: 10
    })

    const messages = ref([])
    const isConnected = ref(false)

    // 连接聊天服务器
    connect('ws://localhost:8080/chat')

    // 监听连接状态
    on('connected', () => {
      isConnected.value = true
    })

    on('disconnected', () => {
      isConnected.value = false
    })

    // 监听消息
    on('message', (data) => {
      messages.value.push(data.data)
    })

    // 发送消息
    const sendChatMessage = (message) => {
      send({
        type: 'chat',
        message: message,
        timestamp: Date.now()
      })
    }

    return {
      messages,
      isConnected,
      sendChatMessage
    }
  }
}
```

## 注意事项

1. **内存泄漏**: 组件销毁时记得调用 `disconnect()` 方法
2. **错误处理**: 建议监听 `error` 和 `reconnect-failed` 事件
3. **消息格式**: 支持字符串和 JSON 对象格式的消息
4. **重连策略**: 可以根据业务需求调整重连参数
5. **浏览器兼容性**: 需要现代浏览器支持 WebSocket API