websocket實現QQ聊天一之二(UI js編寫)
阿新 • • 發佈:2019-01-30
今天說明一下 websocket實現QQ聊天js程式碼
說明:根據自己實際情況編寫,但是萬變不離這幾個狀態,建議將它封裝為單獨的js檔案,引入
好了,前後端都已經完結,下一章說明一下後端幾個類的功能function setMessageInnerHTML(data) { $('.newsList').append(data); } var websocket = null; var hostUrl="localhost:8080/Jfinal"; function openSocket() { //判斷當前瀏覽器是否支援WebSocket if ('WebSocket' in window) { websocket = new WebSocket("ws://"+hostUrl+"/webSocketChat.ws");//多人聊天連結簡易版 }else { setErrorMessage('當前瀏覽器 Not support websocket'); } //連線發生錯誤的回撥方法 websocket.onerror = function () { setErrorMessage("WebSocket連線發生錯誤"); }; //連線成功建立的回撥方法 websocket.onopen = function () { setErrorMessage("WebSocket連線成功"); }; //接收到訊息的回撥方法 websocket.onmessage = function (event) { setMessageInnerHTML(event.data); }; //連線關閉的回撥方法 websocket.onclose = function () { setErrorMessage("WebSocket連線關閉"); }; //監聽視窗關閉事件,當視窗關閉時,主動去關閉websocket連線,防止連線還沒斷開就關閉視窗,server端會拋異常。 window.onbeforeunload = function () { closeWebSocket(); }; } //傳送訊息 function send(message) { websocket.send(message); } function setErrorMessage(message) { $('.newsList').append(message); } //關閉WebSocket連線 function closeWebSocket() { websocket.close(); } openSocket();