一、前言
二、效果
三、代码

一、前言

前端调用的服务端地址：ws://echo.websocket.org ，网站地址为websocket.org
用 js 写的 WebSocketHeartBeat，心跳检测
前端调用websocket的3种不同写法，只是 3 种 [ 写法 ]，不是 3 种 [ 方法 ]
WebSocket心跳检测和重连机制

二、效果

正常连接，每6秒给服务端发送一个心跳消息

连接异常（比如：把服务端地址ws://echo.websocket.org改成ws://echo.websocket.org1），每10秒尝试重新连接

三、代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="output"></div>
</body>
<script>//获取存放内容的节点var output = document.getElementById("output");//打印提示内容var print = function(message) {var d = document.createElement("div");d.innerHTML = message;output.appendChild(d)};var ws;//websocket实例var lockReconnect = false;//避免重复连接var wsUrl = "ws://echo.websocket.org"; //websocket服务器连接地址；网站地址：http://www.websocket.org/echo.html//创建一个websocket实例，创建失败重新连接function createWebSocket(url) {try {ws = new WebSocket(url);initWebSocket();} catch (e) {reconnect(url);}}//实例化websocket的相关操作function initWebSocket() {ws.onmessage = function (event) {try{print("响应：" + event.data)} catch (e) {console.log('catch - error evt：' + event.data + ' parse json error !!!' + e);}};ws.onopen = function (event) {print("打开")//保持连接：每6秒发送一个消息（这里为了演示设置成6秒，实际使用过程中可设置成60秒）setInterval(function () {ws.send('发送心跳消息'); // ws://echo.websocket.org 可用于测试，发送什么到服务器，（服务器）就会响应什么给客户端。}, 6000);};ws.onclose = function (event) {print("关闭")reconnect(wsUrl);};ws.onerror = function (event) {print("错误：" + event.data)reconnect(wsUrl);};}//重连操作function reconnect(url) {if(lockReconnect) {return;}lockReconnect = true;//没连接上会一直重连，设置延迟避免请求过多setTimeout(function () {createWebSocket(url);lockReconnect = false;}, 10000); //10秒后重连}//入口方法createWebSocket(wsUrl);</script>
</html>

WebSocket心跳检测和重连机制相关推荐

Websocket心跳检测、重连机制
前言为了获取实时数据,前端需要和后端保持通信,HTTP 协议只能是客户端向服务器发出请求,服务器返回查询结果.这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦.我们只能使 ...
socket心跳机制图片_WebSocket心跳检测和重连机制
1. 心跳重连原由心跳和重连的目的用一句话概括就是客户端和服务端保证彼此还活着,避免丢包发生. websocket连接断开有以下两种情况: 前端断开在使用websocket过程中,可能会出现网络断 ...
【Netty】利用Netty实现心跳检测和重连机制
一.前言心跳机制是定时发送一个自定义的结构体(心跳包),让对方知道自己还活着,以确保连接的有效性的机制. 我们用到的很多框架都用到了心跳检测,比如服务注册到 Eureka Server 之后会维 ...
websocket心跳检测
1.心跳检测的缘由 websocket心跳检测的目的用一句话概括就是客户端和服务端保证彼此还活着,避免丢包发生. websocket断开一般有两种情况前端断开在使用websocket过程中,可能会 ...
websocket心跳检测前后端架构
websocket心跳检测前后端架构本篇文章为初略架构websocket在前后端的心跳检测机制,实现相对毛糙. 下面介绍内容参照廖雪峰的描述,为了切换页面麻烦,这里就直接挑简要的信息复制黏贴过来 ...
微信小程序WebSocket心跳检测与断来重连
为什么要心跳检测使用微信小程序WebSocket时,WebSocket在一定的时间没有进行通信就会断开连接,所以需要使用心跳检测. 那么心跳检测是什么呢,心跳检测顾名思义就是和人心脏动一样,客户端在 ...
netty自定义消息实现心跳检测与重连
netty的心跳发送的重连,主要在client端.前面有关于自定义协议的demo:https://blog.csdn.net/zc_ad/article/details/83829620 其实客户端心 ...
socket心跳检测和重连小demo
转载自: http://blog.csdn.net/u011791526/article/details/53536403 有时候我们的程序要求socket一直保持连接,并且希望在socket断开以后 ...
Netty下的WebSocket心跳检测
什么是心跳检测心跳机制是定时发送一个自定义的结构体(心跳包),让对方知道自己还活着,以确保连接的有效性的机制. 在WebSocket中即判断套接字是否已经与服务器断开,无法使用,此时要清理服务器的该 ...
Spring Boot + WebSocketClient + wss协议证书认证 + 客户端心跳重连机制
近期公司项目中要对接第三方的WebSocket服务获取数据,本来以为是很简单的工作,但问题是服务方提供的是"wss"协议,需要证书认证,为此查阅了很多博客,都没有解决, 最后还是自 ...

WebSocket心跳检测和重连机制

一、前言

二、效果

三、代码

WebSocket心跳检测和重连机制相关推荐

最新文章

热门文章