WebSocket重连实现

时间 2019-11-20 标签 websocket 实现

方式1、使用第三方库实现html

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

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

方式2、本身用setTimeout实现git

<%@ 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(正在关闭与服务器的链接)时仅仅重试，而不发起链接github