5.3.3 客戶端 · 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 ws; var wsUrl = "ws://www.51websocket.cn/message?groupid=22&userid=111&name=李四"; var wsReconnect = false; //避免重復鏈接 var time1 = 10 * 60 * 1000; //心跳檢測 var time2 = 10 * 1000; //斷線重連 var tt; createWebSocket(wsUrl); function createWebSocket() { try { ws = new WebSocket(wsUrl); init(); } catch (e) { console.log('catch'); reconnect(wsUrl); } } function init() { //連接關閉時觸發 ws.onclose = function () { console.log('Close'); reconnect(wsUrl); }; //通信發生錯誤時觸發 ws.onerror = function () { console.log('Error'); reconnect(wsUrl); }; //連接建立時觸發 ws.onopen = function () { //心跳檢測重置 console.log('Connect'); heartCheck.start(); }; //客戶端接收服務端數據時觸發 ws.onmessage = function (event) { $("#div1").prepend("<h3>" + event.data + "</h3>"); } } //心跳檢測 var heartCheck = { timeout: time1, timeoutObj: null, serverTimeoutObj: null, start: function () { var self = this; this.timeoutObj && clearTimeout(this.timeoutObj); this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj); this.timeoutObj = setTimeout(function () { console.log("heartCheck"); ws.send("ping www.51websocket.cn"); self.serverTimeoutObj = setTimeout(function () { ws.close(); // createWebSocket(); }, self.timeout); }, this.timeout) } }; //斷線重連 function reconnect(url) { if (wsReconnect) { return; } wsReconnect = true; console.log("ReConnect"); //沒連接上會一直重連，設置延遲避免請求過多 tt && clearTimeout(tt); tt = setTimeout(function () { createWebSocket(url); wsReconnect = false; }, time2); } function Send() { ws.send($("#content").val()); $("#content").val(""); } </script > </html > ~~~