在vue3中使用WebSocket的正确姿势，优雅~实在是太优雅了~-Toy模板网

这篇具有很好参考价值的文章主要介绍了在vue3中使用WebSocket的正确姿势，优雅~实在是太优雅了~。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

说明

此教程针对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去做即可文章来源地址https://www.toymoban.com/news/detail-524206.html

//在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)
})

到了这里，关于在vue3中使用WebSocket的正确姿势，优雅~实在是太优雅了~的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！