59 lines
1.4 KiB
Markdown
59 lines
1.4 KiB
Markdown
|
# WebSocketClient
|
||
|
|
|
||
|
|
Vue 3 的 WebSocket 客户端组件，提供连接/断开、自动重连、消息发送与事件回调。
|
||
|
|
|
||
|
|
## 安装
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm i com.joyd.websocket-client --registry=http://47.111.181.23:8081/repository/npm-public/
|
||
|
|
```
|
||
|
|
|
||
|
|
> 发布在私有仓库 `npm-releases`，对外读取建议通过组仓库 `npm-public`。
|
||
|
|
|
||
|
|
## 使用
|
||
|
|
|
||
|
|
```ts
|
||
|
|
import { createApp } from 'vue'
|
||
|
|
import App from './App.vue'
|
||
|
|
|
||
|
|
// 按需导入
|
||
|
|
import { WebSocketClient } from 'com.joyd.websocket-client'
|
||
|
|
|
||
|
|
createApp(App).component('WebSocketClient', WebSocketClient).mount('#app')
|
||
|
|
```
|
||
|
|
|
||
|
|
或在 SFC 中：
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<script setup>
|
||
|
|
import { WebSocketClient } from 'com.joyd.websocket-client'
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<WebSocketClient url="ws://localhost:3000/ws" @message="onMsg" />
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Props
|
||
|
|
- `url`: WebSocket 服务端地址。
|
||
|
|
- `protocols`: 子协议，数组或字符串。
|
||
|
|
- `autoReconnect`: 是否自动重连（默认 `true`）。
|
||
|
|
- `reconnectInterval`: 重连间隔毫秒（默认 `3000`）。
|
||
|
|
- `maxReconnectAttempts`: 最大重连次数（默认无限）。
|
||
|
|
|
||
|
|
## 事件
|
||
|
|
- `connect`: 连接成功触发。
|
||
|
|
- `disconnect`: 连接关闭触发。
|
||
|
|
- `message`: 收到消息触发，`(payload: any)`。
|
||
|
|
- `error`: 发生错误触发。
|
||
|
|
|
||
|
|
## 发布说明
|
||
|
|
已设置 `publishConfig.registry` 指向：
|
||
|
|
`http://47.111.181.23:8081/repository/npm-releases/`
|
||
|
|
|
||
|
|
如需发布：
|
||
|
|
```bash
|
||
|
|
npm publish
|
||
|
|
```
|
||
|
|
|
||
|
|
需要在本目录配置 `.npmrc` 或使用 `npm adduser --registry=<repo>` 完成鉴权。
|