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 > ~~~