VueHook PlususeWebSocket
用于处理 WebSocket 的 Hook。
代码演示
API
enum ReadyState {
Connecting = 0,
Open = 1,
Closing = 2,
Closed = 3,
}
interface Options {
reconnectLimit?: number;
reconnectInterval?: number;
onOpen?: (event: WebSocketEventMap['open'], instance: WebSocket) => void;
onClose?: (event: WebSocketEventMap['close'], instance: WebSocket) => void;
onMessage?: (message: WebSocketEventMap['message'], instance: WebSocket) => void;
onError?: (event: WebSocketEventMap['error'], instance: WebSocket) => void;
protocols?: string | string[];
}
interface Result {
latestMessage?: WebSocketEventMap['message'];
sendMessage?: WebSocket['send'];
disconnect?: () => void;
connect?: () => void;
readyState: ReadyState;
webSocketIns?: WebSocket;
}
useWebSocket(socketUrl: string, options?: Options): Result;
enum ReadyState {
Connecting = 0,
Open = 1,
Closing = 2,
Closed = 3,
}
interface Options {
reconnectLimit?: number;
reconnectInterval?: number;
onOpen?: (event: WebSocketEventMap['open'], instance: WebSocket) => void;
onClose?: (event: WebSocketEventMap['close'], instance: WebSocket) => void;
onMessage?: (message: WebSocketEventMap['message'], instance: WebSocket) => void;
onError?: (event: WebSocketEventMap['error'], instance: WebSocket) => void;
protocols?: string | string[];
}
interface Result {
latestMessage?: WebSocketEventMap['message'];
sendMessage?: WebSocket['send'];
disconnect?: () => void;
connect?: () => void;
readyState: ReadyState;
webSocketIns?: WebSocket;
}
useWebSocket(socketUrl: string, options?: Options): Result;
Params
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| socketUrl | 必填，webSocket 地址 | string | - |
| options | 可选，连接配置项 | Options | - |
Options
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| onOpen | webSocket 连接成功回调 | (event: WebSocketEventMap['open'], instance: WebSocket) => void | - |
| onClose | webSocket 关闭回调 | (event: WebSocketEventMap['close'], instance: WebSocket) => void | - |
| onMessage | webSocket 收到消息回调 | (message: WebSocketEventMap['message'], instance: WebSocket) => void | - |
| onError | webSocket 错误回调 | (event: WebSocketEventMap['error'], instance: WebSocket) => void | - |
| reconnectLimit | 重试次数 | number | 3 |
| reconnectInterval | 重试时间间隔（ms） | number | 3000 |
| manual | 手动启动连接 | boolean | false |
| protocols | 子协议 | string | string[] | - |
Result
| 参数 | 说明 | 类型 |
|---|---|---|
| latestMessage | 最新消息 | Ref<WebSocketEventMap['message']> |
| sendMessage | 发送消息函数 | WebSocket['send'] |
| disconnect | 手动断开 webSocket 连接 | () => void |
| connect | 手动连接 webSocket，如果当前已有连接，则关闭后重新连接 | () => void |
| readyState | 当前 webSocket 连接状态 | Ref<ReadyState> |
| webSocketIns | webSocket 实例 | WebSocket |