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(正在关闭与服务器的连接)时仅仅重试,而不发起连接
分类:
00-Java
标签:
WebSocket重连
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性