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

比如：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. Python基础教程（第3版）学习笔记

    第1章.基础 1.几个小知识点 多用 help() 帮助文档 除法运算 / 除法运算,得到结果为浮点数: // 整除运算,得到整数值(向下取整): % 取余操作 (结果符号与除数符号相同),本质上: ...

  2. Spring基于构造函数和设值函数的依赖注入

    基于构造函数的依赖注入 我们知道,bean标签中指定的类会进行初始化,这个初始化过程中自然会调用构造函数,那我们也可以利用这个构造函数完成依赖注入. 先创建一个类: public class Text ...

  3. 更好一点的：Vue 利用指令实现禁止反复发送请求

    理论上可以用于任何元素,生效时会在元素上出现一个同大小的灰色蒙层(button元素会该表原生的disabled属性). /** * 当元素触发发起请求后,当发起的请求中最后一个请求的结果返回(不关心返 ...

  4. python网络爬虫之解析网页的正则表达式(爬取4k动漫图片)[三]

    前言 hello,大家好 本章可是一个重中之重,因为我们今天是要爬取一个图片而不是一个网页或是一个json 所以我们也就不用用到selenium模块了,当然有兴趣的同学也一样可以使用selenium去 ...

  5. php 开山篇

    由韩顺平老师讲解的 php课程体系 初级课程只能是静态页面开发,不能动态的使用,只是一个界面 学完之后脑海中 应该有的体系~

  6. Linux海量数据高并发实时同步架构方案杂谈

    不论是Redhat还是CentOS系统,除去从CDN缓存或者数据库优化.动静分离等方面来说,在架构层面上,实 现海量数据高并发实时同步访问概括起来大概可以从以下几个方面去入手,当然NFS的存储也可以是 ...

  7. 大白话OSI七层协议

    目录 一.物理层 二.数据链路层 2.1 以太网协议 2.2 Mac地址 2.3 广播地址 三.网络层 3.1 IP协议详解 3.1.1 IP地址的两部分 3.2 子网掩码详解 3.3 IP数据包详解 ...

  8. c语言博客专业05

    问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-2/homework/8655 我在 ...

  9. VUE的中v-if和v-shou的区别

    v-if的特点:每次都会重新删除或创建元素 v-shou的特点:每次执行都只是切换了元素的display:none的属性 v-if的缺点: 每次使用都会有较高性能消耗(频繁的切换元素建议不适用,建议使 ...

  10. firefox-5.x关于img标签的load事件、svg、ff5.4audio标签显示的适配tip

    1.firefox中img标签的load事件后获取图片宽高错误. 需求是根据图片加载后的大小宽高比,调整图片显示的宽高. 在chrome浏览器下,使用jquery的load方法监听img标签的&quo ...