ai问答：vue3+pinia+WebSocket 封装断线重连（实战）-Toy模板网

这篇具有很好参考价值的文章主要介绍了ai问答：vue3+pinia+WebSocket 封装断线重连（实战）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

把Socket实例挂载到全局

为方便梳理，请忽略typescript，一切尽在注释中

# main.ts
import {createApp} from 'vue'

import App from './App.vue'
import {socket} from "@/xihu/socket"
import router from "@/xihu/router"

const app = createApp(App);
app.use(router).mount('#root');

// 全局挂载
app.config.globalProperties.$socket = socket;

Socket封装(断线重连)

这个WebSocket类封装了WebSocket的连接、重连、发送数据等方法。
在connect方法中,它会连接WebSocket,并绑定相关事件监听。
在onclose事件中,它会调用reconnect方法进行重连。
reconnect方法会在一定时间内重连,并且重连的时间间隔会越来越长,最大重连次数达到设定值后就不再重连。
这样就实现了一个可以断线重连的WebSocket连接。
我们可以在vue应用中使用这个类来进行WebSocket通信,并处理可能出现的网络断开重连情况。

# socket.ts

// @ts-nocheck
export default class Socket {
    constructor(url, protocols) {
        this.url = url
        this.protocols = protocols
        this.ws = null
        this.reconnectTimeout = 1000
        this.maxReconnectTimes = 5
    }

    connect() {
        this.ws = new WebSocket(this.url, this.protocols)
        this.ws.onopen = () => {
            console.log('WebSocket连接成功')
            this.reconnectTimes = 0
        }
        this.ws.onclose = () => {
            console.log('WebSocket断开连接')
            this.reconnect()
        }
        this.ws.onerror = err => {
            console.log('WebSocket连接出错', err)
        }
    }

    reconnect() {
        if (this.reconnectTimes < this.maxReconnectTimes) {
            setTimeout(() => {
                this.connect()
                this.reconnectTimes++
            }, this.reconnectTimeout)
            this.reconnectTimeout *= 2
        } else {
            console.log('WebSocket重连超过最大次数,放弃重连')
        }
    }

    // 消息发送
    msg(param) {
        if (param === 'heartbeat') {
            this.ws.send(param);
        } else {
            this.ws.send(JSON.stringify(param));
        }
    }

    // 延迟发送
    timeout(param) {
        setTimeout(() => {
            this.msg(param);
        }, 2000)
    }

    send(param) {
        if (this.ws.readyState === this.ws.OPEN) {
            this.msg(param);
        } else if (this.ws.readyState === this.ws.CONNECTING) {
            this.timeout(param);
        } else {
            this.timeout(param);
        }
    }
}

实例化Socket

通过type关键字，分发数据，并且通过pinia(vuex)存储实时数据
在消息回调函数，处理返回的数据，使用type关键字对应各种推送事件，比如：实时设备告警、地图显示用户坐标等等...

// @ts-nocheck
import {createPinia} from 'pinia';
import {useAlarm} from '@/store/alarm';

// 状态管理
export const pinia = createPinia();
export const store = useAlarm(pinia);

export function wsInit(callback) {
    const url = 'ws://api.xx.cn';
    const init = new Socket(url);

    // 连接 WebSocket
    init.connect();

    // 监听 WebSocket
    init.ws.onmessage = function (ev) {
        if (ev && ev.data && ev.data.indexOf('subscribe') > -1) {
            console.log('subscribe->', ev.data);
        } else if (ev && ev.data) {
            var data = eval('(' + ev.data + ')');
            callback(data);
        }
    };

    return init;
}

// 消息回调
export const socket = wsInit((data) => {
    switch (data.type) {
        case 1:
            store.setType1(data);
            break;
        case 2:
            store.setType2(data.message);
            break;
    }
});

// 心跳连接
function heartbeat() {
    socket.send("heartbeat");
}

// 十分钟一次 (简陋心跳，也请忽略吧^_^)
heartbeat();
setInterval(heartbeat, 1000 * 60 * 10);

状态管理

# alarm.ts
import {defineStore} from 'pinia'
export const useAlarm = defineStore('user', {
    state:()=>({
        type1:{},
        type2:{},
    }),
    getters:{
        getType1: (state) => state.type1,
        getType2: (state) => state.type2,
    },
    actions:{
        setType1(payload: any) {
            this.type1 = payload;
        },
        setType2(payload: any) {
            this.type2 = payload;
        },
    },
})

在页面中，使用数据(pinia)

# home.vue
import { watch, computed, onMounted, getCurrentInstance} from 'vue'
import {useAlarm} from "@/xihu/store/alarm";
const store = useAlarm();

// 还记得全局挂载的`$socket`吧，这样使用
const ctx: any = getCurrentInstance();
const {$socket} = ctx.appContext.config.globalProperties;

onMounted(() => {
    // 列表数据 -- 根据参数 {"cmd":"1"} 实现数据交互
    $socket.send({cmd: 1});

    // 返回的数据格式
    const type1 = {
        type: 1,
        message: [
            {id: 1, name: '', value: ''},
            {id: 2, name: '', value: ''},
        ],
    };
});

const click = ()=>{
    // 其他数据 -- 点击列表的某一项，根据参数 获取数据
    $socket.send({cmd: 2,extras:{id:1}});

    // 返回的数据格式
    const type2 = {
        type: 2,
        message: {
            id: 1, name: '', value: ''
        },
    };
}

// 这里监听的数据，是由[消息回调]分发的

// 第一种 监听方式：
watch(() => store.type1, ({message}: any) => {
    console.log('/watch/', message);
}, {deep: true});

// 第二种 监听方式：
store.$subscribe(({events}: any, state) => {
    if (events.key === 'type1') {
        console.log('/$subscribe/', state.type1);
    }
});

大多数情况，数据是后台主动推送的，比如：告警数据，这也是使用websocket的主要原因文章来源地址https://www.toymoban.com/news/detail-436323.html

到了这里，关于ai问答：vue3+pinia+WebSocket 封装断线重连（实战）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！