方式一、使用第三方库实现
比如：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(正在关闭与服务器的连接)时仅仅重试，而不发起连接