vue2 websocket配置混入

瑾清在努力

已于 2024-03-05 12:54:46 修改

阅读量427

点赞数 1

文章标签： websocket 网络协议网络

于 2023-07-07 11:12:31 首次发布

本文链接：https://blog.youkuaiyun.com/m0_72553068/article/details/131592047

版权

文章介绍了如何在Vue中创建和管理WebSocket连接，包括在mixins中编写websocket.js配置文件，初始化时传入ws接口或手动配置，设置onopen、onclose、onerror、onmessage监听事件。同时，文章还详细阐述了实现心跳机制的方法，包括开启、关闭心跳，处理心跳超时和重连的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 在mixins文件夹下写入websocket.js配置文件

思路：初始化时可以传入一个ws接口，也可以手动配置，如果当前支持ws，则开启ws以及其相关的监听：onopen连接成功，onclose连接关闭，onerror连接错误，onmessage返回消息，init时传入一个函数，在获取数据后把数据传入函数，然后调用此函数以方便操作数据

export default {
    data() {
        return {
            socket: '', //WebSocket
        }
    },
    destroyed() {
        this.closeWebsocket();
    },
    methods: {
        initWebSocket(fn,url) {
            let weburl = url || this.webSocketUrl
            if (!window.WebSocket) { return }
            if (!this.socket) {
                this.socket = new WebSocket(weburl)
                this.socketOnOpen()
                this.socketOnClose()
                this.socketOnError()
                this.socketOnMessage(fn)
            }
        },
        /**
         * 关闭websocket
         */
        closeWebsocket() {
            if (this.socket) {
                this.socket.close()
            }
        },
        socketOnSend(data) {
            this.socket.send(data)
        },
        socketOnOpen() {
            this.socket.onopen = () => {
                console.log('连接成功!')
                this.socketOnSend('连接成功')
            }
        },
        socketOnClose() {