WebSocket重连实现
方式一、使用第三方库实现
比如:reconnecting-websocket.js
ReconnectingWebSocket,代码:https://github.com/joewalnes/reconnecting-websocket
var ws = new WebSocket('ws://....');
替换成下面的
var ws = new ReconnectingWebSocket('ws://....');
方式二、自己用setTimeout实现
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>socketjs</title>
</head>
<body>
发送者:<input id="fromUserId" value="2">
接收者:<input id="toUserId" value="3">
<button type="button" onclick="openClick();">打开</button>
<button type="button" onclick="closeClick();">关闭</button><br/>
<input id="message" value="---"/>
<button type="button" onclick="sendClick();">发送</button>
<div id="content"></div>
<script>
var socket;
var t;
var MAX = 1000;
var count = 0;
function openClick() {
connection();
}
function closeClick() {
socket.close();
}
function sendClick() {
var fromUserId = document.getElementById("fromUserId").value;
var toUserId = document.getElementById("toUserId").value;
var content = document.getElementById("message").value;
var obj = {
"fromUserId":fromUserId,
"toUserId":toUserId,
"content":content
};
document.getElementById("content").innerHTML = document.getElementById("content").innerHTML + '<br/>' + fromUserId + "说:" + content;
socket.send(JSON.stringify(obj));
console.log(fromUserId + "说:" + JSON.stringify(content));
} var connection = function() {
var fromUserId = document.getElementById("fromUserId");
var url = 'ws://' + window.location.host + '/ycxcode/websocket/commodity/{' + fromUserId.value + '}';
socket = new WebSocket(url);
socket.onopen = onopen;
socket.onmessage = onmessage;
socket.onclose = onclose;
socket.onerror = onerror;
}
var reconnection = function() {
count = count + 1;
console.log("reconnection...【" + count + "】");
//1与服务器已经建立连接
if (count >= MAX || socket.readyState == 1) {
clearTimeout(t);
} else {
//2已经关闭了与服务器的连接
if (socket.readyState == 3) {
connection();
}
//0正尝试与服务器建立连接,2正在关闭与服务器的连接
t = setTimeout(function() {reconnection();}, 100);
}
}
var onopen = function() {
console.log("open...");
}
var onclose = function() {
console.log("close...");
reconnection();
}
var onmessage = function(e) {
console.log("message...");
if (e.data === "") return;
var toUserId = document.getElementById("toUserId").value;
document.getElementById("content").innerHTML = document.getElementById("content").innerHTML + '<br/>' + toUserId + "说:" + e.data;
console.log(toUserId + "说:" + e.data);
}
var onerror = function() {
console.log("error...");
reconnection();
}
</script>
</body>
</html>
核心代码就是在onclose事件发生时调用reconnection()方法,但是要特别注意重试次数和状态控制。
在socket.readyState == 3(已经关闭了与服务器的连接)才真正的发起连接,
在socket.readyState == 1(与服务器已经建立连接)或重试次数超了设定值就终止重试,但要注意在终止浏览器页面及网络恢复时重刷页面
在socket.readyState == 0(正尝试与服务器建立连接)或socket.readyState == 2(正在关闭与服务器的连接)时仅仅重试,而不发起连接
WebSocket重连实现的更多相关文章
- websocket 重连解决方案
1.websocket 重连的脚本:https://github.com/joewalnes/reconnecting-websocket reconnecting-w ...
- WebSocket重连reconnecting-websocket.js的使用
原文:https://www.cnblogs.com/kennyliu/p/6477746.html 页面引用 <script src="~/Scripts/reconnectin ...
- websocket 心跳重连
websocket 的基本使用: var ws = new WebSocket(url); ws.onclose = function () { //something reconnect(); // ...
- webSocket使用心跳包实现断线重连
首先new一个webscoket的连接 let noticeSocketLink = new WebSocket(‘webSocket的地址’) 这里是连接成功之后的操作 linkNoticeWebs ...
- HTTP请求回调IM系统LB,确保服务定向调用
1. 背景介绍 基于websocket的及时通信中,客户端与服务端建立ws连接后,服务端将业务继续传递到下一级业务服务系统Business server后,下一级服务系统处理完毕后,要将结果反馈给客户 ...
- Java 社区平台 - Sym 1.7.0 发布
English | 中文 简介 Symphony([ˈsɪmfəni],n.交响乐)是一个现代化的社区平台,因为它: 实现了面向内容讨论的论坛 包含了面向用户分享.交友.游戏的社交网络 集成了聚合独立 ...
- 巨蟒python全栈开发flask10 项目开始2
1.websocket异常处理 出现上图报错的原因是什么? 原因是:websocket断开了,所以报错 19行接收的msg是None值,所以报错. 打开一个文件,点击发送音乐,出现上面的内容: 客户端 ...
- hydra-microservice 中文手册(3W字预警)
Hydras 是什么? Hydra 是一个 NodeJS 包(技术栈不是重点,思想!思想!思想!),它有助于构建分布式应用程序,比如微服务. Hydra 提供服务发现(service discover ...
- 初探和实现websocket心跳重连
心跳重连缘由 在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时性关闭,这时候websocket的连接已经断开, 而浏览器不会执行websocket 的 onclos ...
随机推荐
- 力扣(LeetCode)两整数之和 个人题解
不使用运算符 + 和 - ,计算两整数 a .b 之和. 示例 1: 输入: a = 1, b = 2 输出: 3 示例 2: 输入: a = -2, b = ...
- C语言|博客作业07
这个作业属于哪个课程 C语言程序设计II 这个作业的要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-1/homework/9935 我在这个课程的 ...
- bash:双引号和单引号
单引号.双引号都能引用字符和字符串 单引号:'$i'仅仅是字符,没有变量的意思了 双以号:变量等能表示出来
- Flex调用本地文件分析
最近在用Flex做一个相册的功能,因为图片数据很多,所以想调用本地文件的方式做. 但是B/S的缘故,很多安全上的限制给我造成了不小的麻烦,把我这个小菜鸟弄的晕头转向. 第一,刚开始,查了很多资料发现都 ...
- Win10如何快速截屏
Win10不用QQ,如何快速截屏? 年轻的时候想截图总是需要把QQ打开,但是直到我遇到了一种尴尬的场景:就是需要我把鼠标放着标签上,才会有下一步内容出现,这就很难搞. 经过查找资料,做出一些总结. 第 ...
- python数据分析pandas中的DataFrame数据清洗
pandas中的DataFrame中的空数据处理方法: 方法一:直接删除 1.查看行或列是否有空格(以下的df为DataFrame类型,axis=0,代表列,axis=1代表行,以下的返回值都是行或列 ...
- 使用 colgroup 和 col 实现响应式表格
Table 在项目使用中十分频繁,特别是在后台管理系统中,table 无疑是数据展示的第一公民,在早些年的网页中,table 也是网页布局的第一选择,然后使用好 table 并不容易,其它有很多子元素 ...
- JavaScript新手经常遇到的问题(二)
1.Form表单只提交数据而不进行页面跳转的方法 <script type="text/javascript" src="js/jquery/jquery-1.8. ...
- 基于antd封装一个高可用form组件 减少cv代码导致的bug
引言 在开发中台过程中 我们的原型中有很多表单,antd有表单组件,但是粒度比较细,就单纯组件而言,无可厚非,但是在开发过程中,可能会造成代码不够聚合,有些表单公共逻辑无法提取,copy paste比 ...
- Selenium 4 Java的最佳测试框架
几十年来,Java一直是开发应用程序服务器端的首选编程语言.尽管JUnit一直在与开发人员一起帮助他们进行自动化的单元测试,但随着时间的推移和测试行业的发展,特别是伴随着自动化测试的兴起,已经开发了许 ...