vue+websocket demo 实例

Posted 2022-06-19 mengfangui

vue+websocket demo：

<!-- vue + websocket连接demo -->
<template>
    <div class="">vue + websocket连接demo</div>
</template>

<script>
export default 
    data() 
        return 
            // 连接标志位
            lockReconnect: false,
            wsCfg: 
                // websocket地址
                url: ‘ws://10.74.52.107:9001/websocket‘
            
        ;
    ,
    methods: 
        createWebSocket() 
            try 
                // 创建Web Socket 连接
                const socket = new WebSocket(this.wsCfg.url);
                // 初始化事件
                this.initEventHandle(socket);
             catch (e) 
                // 出错时重新连接
                this.reconnect(this.wsCfg.url);
            
        ,
        initEventHandle(socket) 
            // 连接关闭时触发
            socket.onclose = () => 
                console.log(‘连接关闭‘);
            ;
            // 通信发生错误时触发
            socket.onerror = () => 
                // 重新创建长连接
                this.reconnect();
            ;
            // 连接建立时触发
            socket.onopen = () => 
                console.log(‘连接成功‘);
            ;
            // 客户端接收服务端数据时触发
            socket.onmessage = msg => 
                // 业务逻辑处理
                this.list = msg.data;
            ;
        ,
        reconnect() 
            if (this.lockReconnect) 
                return;
            
            this.lockReconnect = true;

            // 没连接上会一直重连，设置延迟避免请求过多
            setTimeout(() => 
                this.lockReconnect = false;
                this.createWebSocket(this.wsCfg.url);
            , 2000);
        
    ,
    mounted() 
        this.createWebSocket();
    
;
</script>