方式一、使用第三方库实现

比如：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重连实现的更多相关文章

  1. websocket 重连解决方案

    1.websocket 重连的脚本:https://github.com/joewalnes/reconnecting-websocket                 reconnecting-w ...

  2. WebSocket重连reconnecting-websocket.js的使用

    原文:https://www.cnblogs.com/kennyliu/p/6477746.html   页面引用 <script src="~/Scripts/reconnectin ...

  3. websocket 心跳重连

    websocket 的基本使用: var ws = new WebSocket(url); ws.onclose = function () { //something reconnect(); // ...

  4. webSocket使用心跳包实现断线重连

    首先new一个webscoket的连接 let noticeSocketLink = new WebSocket(‘webSocket的地址’) 这里是连接成功之后的操作 linkNoticeWebs ...

  5. HTTP请求回调IM系统LB，确保服务定向调用

    1. 背景介绍 基于websocket的及时通信中,客户端与服务端建立ws连接后,服务端将业务继续传递到下一级业务服务系统Business server后,下一级服务系统处理完毕后,要将结果反馈给客户 ...

  6. Java 社区平台 - Sym 1.7.0 发布

    English | 中文 简介 Symphony([ˈsɪmfəni],n.交响乐)是一个现代化的社区平台,因为它: 实现了面向内容讨论的论坛 包含了面向用户分享.交友.游戏的社交网络 集成了聚合独立 ...

  7. 巨蟒python全栈开发flask10 项目开始2

    1.websocket异常处理 出现上图报错的原因是什么? 原因是:websocket断开了,所以报错 19行接收的msg是None值,所以报错. 打开一个文件,点击发送音乐,出现上面的内容: 客户端 ...

  8. hydra-microservice 中文手册（3W字预警）

    Hydras 是什么? Hydra 是一个 NodeJS 包(技术栈不是重点,思想!思想!思想!),它有助于构建分布式应用程序,比如微服务. Hydra 提供服务发现(service discover ...

  9. 初探和实现websocket心跳重连

    心跳重连缘由 在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时性关闭,这时候websocket的连接已经断开, 而浏览器不会执行websocket 的 onclos ...

随机推荐

  1. Kotlin Coroutines不复杂, 我来帮你理一理

    Coroutines 协程 最近在总结Kotlin的一些东西, 发现协程这块确实不容易说清楚. 之前的那篇就写得不好, 所以决定重写. 反复研究了官网文档和各种教程博客, 本篇内容是最基础也最主要的内 ...

  2. python：沙盒（virtualenv）

    当电脑需要使用多个版本的python时,可以使用沙盒:或者使用docker: virtualenv是Python自带的,通过pip安装的 [root@centos7 public]# cd jinji ...

  3. Java虚拟机的内存

    JDK1.8之前,java内存分为 线程共享区:堆.方法区.直接内存(非运行时数据区的一部分).线程私有区:程序计数器.虚拟机栈.本地方法栈. JDK1.8开始,虚拟机取消了方法区,改为元空间. 程序 ...

  4. Android 8.1 自定义热点的时候设置了热点maxLength="32"，但是在希伯来语等状态下还是发现在没到32个字符之前就无法把热点设置成功了

    初步认为应该是与热点名称的字节数有关. 然后开始查看源码. /Settings/res/xml/tether_prefs.xml 中的 <Preference android:key=" ...

  5. /etc/security/limits.conf配置文件详解

    这个文件主要是用来限制用户对系统资源的使用.是/lib64/security/pam_limits.so模块对应的/etc/serurity/pam_limits的配置文件. # /etc/secur ...

  6. Chapter 07-Basic statistics(Part1 描述统计数据)

    在这一部分中,仍然使用mtcars(Motor Trend Car Road Tests)这一数据集,以及mpg(one mile per gallon), hp(horsepower), wt(we ...

  7. Djangoday2第二个app加减法

    第二个app 计算新建一个app在view定义显示的内容修改urls指定连接对应的视图测试另一种通过路径传参的方式访问网址路径传参的urls定义方法网址路径传参测试urls的urlnamedjango ...

  8. AJAX入门介绍

    在我们平时的开发过程中,经常使用到Ajax数据交互,相信有很大一部分人会使用,可能没太详细了解过Ajax的工作原理.下面我们一起看一下吧! ( 一 ) 什么是Ajax Ajax 即“Asynchron ...

  9. 小白的springboot之路（七）、事务支持

    0-前言 事务管理对于企业级应用来说必不可少,用来确保数据的完整性和一致性: 1-开启事务 spring boot支持编程式事务和声明式事务,用声明式事务即可: spring boot开启事务非常简单 ...

  10. 关于iframe/子窗体与父窗体的交互

    父子窗体交互方式 通过contentWindow交互 通过postMessage交互 通过contentWindow交互 主窗体内嵌的iframe或者是其通过js打开的新窗口都可以通过contentW ...