Vue 连接使用WebSocket，WebSocket心跳检测

最新推荐文章于 2024-06-02 14:05:51 发布

#ming

最新推荐文章于 2024-06-02 14:05:51 发布

阅读量923

点赞数 14

文章标签： vue.js websocket 前端

本文链接：https://blog.csdn.net/xsm520yy/article/details/135976632

版权

Vue使用WebSocket

WebSocket定义

WebSocket 是独立的、创建在 TCP 上的协议。
Websocket 通过HTTP/1.1 协议的101状态码进行握手。
为了创建Websocket连接，需要通过浏览器发出请求，之后服务器进行回应，这个过程通常称为“握手”

WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输

Vue中使用WebSocket

使用前先使用测试工具，测试你的WebSocket是否有用

推荐一个WebSocket在线测试地址：http://www.websocket-test.com/

可用情况下,直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#root',
            data:{
               url:'wss://xxx/wss', //修改为你自己的WebSocket地址，可以是wss、ws开头
               lockReconnect:false, //断线重连状态
               second:0, //测试查看WebSocket自动断开的时间
            },
            created() {  
                console.log('created==')
                this.initWebSocket() 
		    },
            methods:{
                initWebSocket() {
                    console.log('initWesocket==')

                    // 建立WebSocket连接
                    this.socket = new WebSocket(this.url);  
                            
                    // 监听WebSocket的open事件，当连接打开时触发  
                    this.socket.onopen = (event) => {  
                        console.log('socket.onopen=='); 

                        //可删除，只是用来测试后端自动断开连接的时间
                        setInterval(() => {  
                            this.second++;  
                        }, 1000);
                    };  
                            
                    // 监听WebSocket的message事件，当收到服务器消息时触发  
                    this.socket.onmessage = (event) => {  
                        console.log('socket.onmessage==', event.data);
                        var data=JSON.parse(event.data)
                        switch(data.type){ //根据WebSocket返回值的某个字段，区分改做什么事情
                            case 'connect': // // {"type":"connect","data":"7f0000010b540000000a"}
                                //写你自己的逻辑                               
                                break;
                            case 'xxx': 
                                //写你自己的逻辑
                                break;
                        }						
                    };  
                            
                    // 监听WebSocket的close事件，当连接关闭时触发  
                    this.socket.onclose = (event) => {  
                        console.log('socket.onclose==');
                        console.log(`WebSocket连接${this.second}秒后关闭了`);

                        //连接关闭，就重新连接
                        this.reconnect()
                    };  
                            
                    // 监听WebSocket的error事件，当发生错误时触发  
                    this.socket.onerror = (error) => {  
                        console.error('socket.onerror:', error);  
                    }; 
                },
                reconnect() {//断线重新连接
                    console.log('断线重新连接==');
                    var that = this;
                    if(that.lockReconnect) {
                        return;
                    };
                    that.lockReconnect = true;
                    //没连接上会一直重连，设置延迟避免请求过多
                    setTimeout(function () {
                        //重新连接
                        that.initWebSocket();
                        that.lockReconnect = false;
                    },5000);
                },
            }
        })
    </script>
</body>
</html>

！！！这种写法，会每隔段时间就会触发onclose事件，虽然可以重连上去，但是会丢失一部分消息，所以我们要用到心跳。保证连接不被断开

心跳检测

WebSocket为什么要心跳检测

在实际应用中，可能会面临多种网络状况，例如：
1、客户端网络故障，可能会导致客户端无法发送和接收数据；
2、服务器网络故障，可能会导致客户端无法连接服务器；
3、防火墙或者代理等网络设备可能会拦截WebSocket通信，从而导致连接中断。
为了应对这些可能的网络问题，我们需要使用WebSocket心跳检测机制来检测客户端的在线状态，避免无法处理掉线等异常情况。

如何使用心跳

// 监听WebSocket的open事件，当连接打开时触发  
this.socket.onopen = (event) => {  
		console.log('socket.onopen==');

		//心跳，心跳建个时间要比服务器自动断开连接小，服务器自动断开连接时间可参考上面的data.second时间
		setInterval(()=>{
			this.socket.send("宗介：还活着")
		},50000)
};

心跳注意事项

注意间隔发送心跳的时间
注意发送的内容尽量精简，避免浪费资源
心跳间隔和最长超时时间的设置需要考虑网络状况和服务器负载等因素