5.3.5.2 草稿 - 2 · Go语言工作笔记

~~~ <!DOCTYPE HTML> <html > <head > <meta charset="utf-8" > <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js" ></script > </head > <body > <form > <div id="div1" ></div > <hr > <textarea style="width: 300px;height: 100px;" id="content" ></textarea > <input type="button" value="发送" onclick="Send()" > </form > </body > <script > var wsCopy; //服务端地址 var wsUrl = "ws://127.0.0.1:8095/message?groupid=22&userid=111&name=李四"; //心跳检测 var heartTimeOut = 10 * 1000; //10s (1000 毫秒= 1 秒) - 设置时间比nginx超时时间短) //断线重连 var reConnTimeOut = 2 * 1000; //心跳检测 var heartCheck = { timer: null, timeout: heartTimeOut, start: function (ws) { this.timer = setInterval(function () { console.log("heartCheck"); ws.send("ping www.51websocket.cn"); }, this.timeout); } }; //断线重连 var reConnection = { timer: null, timeout: reConnTimeOut, url: wsUrl, start: function (ws) { if (!ws.token) { this.timer = setTimeout(function () { console.log("ReConnect"); createWebSocket(this.url); }, this.timeout); return; } return; } }; //创建连接 createWebSocket(wsUrl); function createWebSocket() { try { var ws = new WebSocket(wsUrl); init(ws); } catch (e) { console.log('catch'); reConnection.start(); } } function init(ws) { //TODO : 连接关闭时触发 ws.onclose = function () { clearInterval(heartCheck.timer); if (this.token == undefined) { //多种错误事件, 只会触发一个断线重连 this.token = false; } else if (this.token == false) { this.token = true; } console.log('Close'); reConnection.start(this); }; //通信发生错误时触发 ws.onerror = function () { clearInterval(heartCheck.timer); if (this.token == undefined) { this.token = false; } else if (this.token == false) { this.token = true; } console.log('Error'); reConnection.start(this); }; //连接建立时触发 ws.onopen = function () { clearTimeout(reConnection.timer); console.log('Connect'); //心跳检测重置 heartCheck.start(this); wsCopy = ws; }; //客户端接收服务端数据时触发 ws.onmessage = function (event) { $("#div1").append("<h3>" + event.data + "</h3>"); } } //向服务端发送消息 function Send() { wsCopy.send($("#content").val()); $("#content").val(""); } </script > </html > ~~~