js Websocket自动重连插件，ReconnectingWebsocket

1、下载

reconnecting-websocket.zip

2、代码

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>RecWebsocket</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
    <meta http-equiv="Expires" content="0"/>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/plugins/websocket/reconnecting-websocket.js}"></script>
    <script type="text/javascript">
        let addrPort = "ws://" + window.location.host + "/tcc";
        $('document').ready(function () {
            initReconnectWebsocket();
        })

        //████████████████████  初始化 RecWebsocket  ████████████████████████████████
        let RecWebsocket = null, RecWebsocketName = "RecWebsocket";

        function initReconnectWebsocket() {
            RecWebsocket = new ReconnectingWebSocket(addrPort + '/ws/ReconnectingWebSocketTest');
            RecWebsocket.onopen = function () {
                console.log(RecWebsocketName + " 客户端已连接");
            }
            RecWebsocket.onmessage = function (evt) {
                console.log(RecWebsocketName + " 客户端接收消息 ", evt.data);
            }
            RecWebsocket.onclose = function () {
                console.log(RecWebsocketName + " 客户端已断开连接");
            };
            RecWebsocket.onerror = function (evt) {
                console.log(RecWebsocketName + " 连接出现错误", evt.e);
            };
        }
    </script>
<body>
</body>
</html>
posted @ 2022-01-27 16:52  一只桔子2233  阅读(420)  评论(0)  编辑  收藏  举报