Android 心跳检测应该放在独立进程吗

转载

daleiwang 2024-12-25 17:36:34

文章标签 vue.js websocket 前端服务器客户端 文章分类 Android 移动开发

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)
};