最近在做即時通訊，做了一個web端的js websocket做測試，源代碼在這里：
<!DOCTYPE HTML> <html> <head> <title>My WebSocket</title> </head> <body> <input id="text" type="text" /> <button onclick="send()">Send</button> <button onclick="closeWebSocket()">Close</button> <div id="message"></div> </body> <script type="text/javascript" th:inline="javascript"> var websocket = null; var lockReconnect = false; //避免ws重復連接 var listId = [[${listId}]]; //判斷當前瀏覽器是否支持WebSocket, 主要此處要更換為自己的地址 if ('WebSocket' in window) { connectSocket(); } else { alert('Not support websocket') } //連接webSocket function connectSocket(){ try{ websocket = new WebSocket("ws://192.168.0.37:8084/api/rest/ws/chatContent/"+listId); initEvent(); }catch(e){ reconnect(); console.log(e); } } function initEvent(){ //連接發生錯誤的回調方法 websocket.onerror = function(e) { reconnect(); console.log("llws連接錯誤!"); setMessageInnerHTML("llws連接關閉!"+new Date().toLocaleString()); }; //連接成功建立的回調方法 websocket.onopen = function(event) { heartCheck.reset().start(); //心跳檢測重置 setMessageInnerHTML("llws連接成功!"+new Date().toLocaleString()); } //接收到消息的回調方法 websocket.onmessage = function(event) { heartCheck.reset().start(); console.log("llws收到消息啦:" +event.data); setMessageInnerHTML(event.data); } //連接關閉的回調方法 websocket.onclose = function(e) { reconnect(); console.log("llws連接關閉!"+new Date().toLocaleString()); setMessageInnerHTML("llws連接關閉!"+new Date().toLocaleString()); } } //監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。 window.onbeforeunload = function() { websocket.close(); } //將消息顯示在網頁上 function setMessageInnerHTML(innerHTML) { document.getElementById('message').innerHTML += innerHTML + '<br/>'; } //關閉連接 function closeWebSocket() { websocket.close(); } //發送消息 function send(message) { if(!message){ message = document.getElementById('text').value; } websocket.send(message); } //重連 function reconnect() { if(lockReconnect) return; lockReconnect = true; setTimeout(function () { //沒連接上會一直重連，設置延遲避免請求過多 connectSocket(); lockReconnect = false; }, 2000); } //心跳檢測 var heartCheck = { timeout: 5000, //1分鍾發一次心跳 timeoutObj: null, serverTimeoutObj: null, reset: function(){ clearTimeout(this.timeoutObj); clearTimeout(this.serverTimeoutObj); return this; }, start: function(){ var self = this; this.timeoutObj = setTimeout(function(){ //這里發送一個心跳，后端收到后，返回一個心跳消息， //onmessage拿到返回的心跳就說明連接正常 send("ping"); self.serverTimeoutObj = setTimeout(function(){//如果超過一定時間還沒重置，說明后端主動斷開了 websocket.close(); //如果onclose會執行reconnect，我們執行ws.close()就行了.如果直接執行reconnect 會觸發onclose導致重連兩次 }, self.timeout) }, this.timeout) } } </script> </html>