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

比如：reconnecting-websocket.js
ReconnectingWebSocket，代码：https://github.com/joewalnes/reconnecting-websocket

  1. var ws = new WebSocket('ws://....');
  2. 替换成下面的
  3. var ws = new ReconnectingWebSocket('ws://....');

方式二、自己用setTimeout实现

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7.  
  8. <title>socketjs</title>
  9. </head>
  10. <body>
  11. 发送者：<input id="fromUserId" value="2">
  12. 接收者：<input id="toUserId" value="3">
  13. <button type="button" onclick="openClick();">打开</button>
  14. <button type="button" onclick="closeClick();">关闭</button><br/>
  15. <input id="message" value="---"/>
  16. <button type="button" onclick="sendClick();">发送</button>
  17. <div id="content"></div>
  18. <script>
  19. var socket;
  20. var t;
  21. var MAX = 1000;
  22. var count = 0;
  23. function openClick() {
  24.     connection();
  25. }
  26. function closeClick() {
  27.     socket.close();
  28. }
  29. function sendClick() {
  30.     var fromUserId = document.getElementById("fromUserId").value;
  31.     var toUserId = document.getElementById("toUserId").value;
  32.     var content = document.getElementById("message").value;
  33.     var obj = {
  34.             "fromUserId":fromUserId,
  35.             "toUserId":toUserId,
  36.             "content":content
  37.     };
  38.     document.getElementById("content").innerHTML = document.getElementById("content").innerHTML + '<br/>' + fromUserId + "说：" + content;
  39.     socket.send(JSON.stringify(obj));
  40.     console.log(fromUserId + "说：" + JSON.stringify(content));
  41. }
  42.  
  43. var connection = function() {
  44.     var fromUserId = document.getElementById("fromUserId");
  45.     var url = 'ws://' + window.location.host + '/ycxcode/websocket/commodity/{' + fromUserId.value + '}';
  46.     socket = new WebSocket(url);
  47.     socket.onopen = onopen;
  48.     socket.onmessage = onmessage;
  49.     socket.onclose = onclose;
  50.     socket.onerror = onerror;
  51. }
  52. var reconnection = function() {
  53.     count = count + 1;
  54.     console.log("reconnection...【" + count + "】");
  55.     //1与服务器已经建立连接
  56.     if (count >= MAX || socket.readyState == 1) {
  57.         clearTimeout(t);
  58.     } else {
  59.         //2已经关闭了与服务器的连接
  60.         if (socket.readyState == 3) {
  61.             connection();
  62.         }
  63.         //0正尝试与服务器建立连接,2正在关闭与服务器的连接
  64.         t = setTimeout(function() {reconnection();}, 100);
  65.     }
  66. }
  67. var onopen = function() {
  68.     console.log("open...");
  69. }
  70. var onclose = function() {
  71.     console.log("close...");
  72.     reconnection();
  73. }
  74. var onmessage = function(e) {
  75.     console.log("message...");
  76.     if (e.data === "") return;
  77.     var toUserId = document.getElementById("toUserId").value;
  78.     document.getElementById("content").innerHTML = document.getElementById("content").innerHTML + '<br/>' + toUserId + "说：" + e.data;
  79.     console.log(toUserId + "说：" + e.data);
  80. }
  81. var onerror = function() {
  82.     console.log("error...");
  83.     reconnection();
  84. }
  85. </script>
  86. </body>
  87. </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. 百度下载给的termux是个坑

    termux有两个版本,0.32以及0.64.百度提供0.32的下载,太坑爹.谷歌则是0.64的下载.32版uname -m识别为armv8l,绝对影响你进行其它linux的部署.通过atilo脚本会 ...

  2. java课笔记

    http://127.0.0.1:8088/ http://127.0.0.1:8088/test/index.jsp http://127.0.0.1:8088/test/show 用户 (请求) ...

  3. 缓冲&缓存&对象池概念的理解

    一).缓冲 作用:缓解程序上下层之间的性能差异. 1).当上层组件的性能优于下层组件时加入缓冲机制可以减少上层组件对下 层组件的等待时间. 2).上层组件不需要等待下层组件接收全部数据,即可返回操作, ...

  4. 我的第一个python web 开发框架

    1:数据库结构设计与创建 小白做好前端html设计后,马上开始进入数据库结构设计步骤. 在开始之前,小白回忆了一下老大在公司里培训时讲过的数据库设计解说: 对于初学者来说,很多拿到原型时不知道怎么设计 ...

  5. python字符串删除,列表删除以及字典删除的总结

    一:字符串删除  1,字符串本身是不可变的,一个字符串定义以后,对他本身是不能做任何操作的,所以的增删改都是对原字符串拷贝的副本的操作,原来的字符串还是原来的字符串,它本身并没 有变 2,字符串本身是 ...

  6. 转载 C#中DataTable中的Compute方法使用收集

    原文: C#中DataTable中的Compute方法使用收集 Compute函数的参数就两个:Expression,和Filter. Expresstion是计算表达式,关于Expression的详 ...

  7. 【Android - 控件】之MD - TextInputLayout的使用

    TextInputLayout是Android 5.0新特性——Material Design中的一个布局控件,主要用来嵌套EditText,实现数据输入时的一些效果,如: 当输入框获取焦点时,输入提 ...

  8. c 语言I博客作业02

    这个作业属于哪个课程 C语言程序设计1 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/SE2019-2/homework/8687 我在这个课程的目标是 ...

  9. 关于jsp中jstl报错Can not find the tag library descriptor for "http://java.sun.com/jsp/jstl/core

    有的时候在开发jsp时,需要使用jstl时,在jsp上面引用jstl却出现错误:Can not find the tag library descriptor for "http://jav ...

  10. PAT甲级专题|树的遍历

    PAT甲级专题-树的遍历 涉及知识点:树.建树.深度优先搜索.广度优先搜索.递归 甲级PTA 1004 输出每一层的结点,邻接表vector建树后.用dfs.bfs都可以边搜边存当前层的数据, #in ...