说明
此教程针对typescript,提供断线自动重连,断线数据重发,自动心跳,自定义消息发送机制
测试用例地址:在vue3+typescript-websocket示例
安装
安装tools-vue3工具库,此仓库提供了http请求、文件请求、websocket、signalr、cookie的功能
pnpm i tools-vue3
使用示例
- 创建 WSUtil.ts文件
- 内容:
import { WebSocketBean } from 'tools-vue3'
export default class WSUtil {
static ws: WebSocketBean
static async init() {
const sendSuffix = ''
//初始化websokcet对象
this.ws = new WebSocketBean({
url: 'ws://192.168.1.66:8801/ws',
needReconnect: true,
reconnectGapTime: 3000,
onerror: () => {
console.log('断开')
},
sendSuffix,
messageSuffix: sendSuffix,
heartSend: '~',
heartGet: '~',
heartGapTime: 3000,
onmessage: (data) => {
//在这里写消息处理逻辑
console.log(data.data)
const sp = data.data.split(sendSuffix).filter((el: string) => el.length > 0)
console.log(sp)
}
})
//建立连接
this.ws.start()
}
}
- 发送数据
WSUtil.ws.send('data')
- 主动断开
WSUtil.ws.dispose()
- 消息处理
对消息处理一般使用事件总线去做,使用tools-javascript仓库中提供的CEvent.on和CEvent.emit去做即可
//安装tools-javascript
npm i tools-javascript
//在main.ts中引入tools-javascript
import 'tools-javascript'
//在WSUtil.ts的onmessage方法中
onmessage: (data) => {
//在这里写消息处理逻辑
console.log(data.data)
const sp = data.data.split(sendSuffix).filter((el: string) => el.length > 0)
console.log(sp)
//这里sp的数据为['{\"code\":\"getData\",\"data\":\"test\"}']
sp.forEach(item=>{
const jsonData = JSON.parse(item)
//事件触发
CEvent.emit(jsonData.code,jsonData.data)
})
}
//在任意文件或者页面中
CEvent.on("getData",(data)=>{
//在onmessage触发后,这里应该打印test字符串
console.log(data)
})