模擬webQQ實現簡單的聊天,基於WebSocket
什麼是WebSocket
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議。
ajax輪詢
輪詢(Polling)是一種CPU決策如何提供周邊裝置服務的方式,又稱“程控輸出入”(Programmed I/O)。輪詢法的概念是,由CPU定時發出詢問,依序詢問每一個周邊裝置是否需要其服務,有即給予服務,服務結束後再問下一個周邊,接著不斷周而復始。
ajax輪詢示例程式碼
$(function() { to_page(); setInterval("isHave();",3000); }); function isHave(){ $.ajax({ url : "localhost/isHave", data : {}, datatype: "json", type : "post", success : function(result) { console.log(result); }, } }); }
WebSocket的優點
1、WebSocket API的優勢在於伺服器和客戶端可以在固定的時間範圍內的任意時刻,相互推送訊息。在建立連線之後,伺服器可以主動傳送資料給客戶端;
2、WebSocket 並不限於以AJAX(或XHR)方式通訊,因為Ajax技術需要客戶端發起請求,而WebSocket伺服器和客戶端可以彼此相互推送資訊。
WebSocket的使用
1、加入Spring+websocket所依賴的Jar包(使用4.1.5之後的版本,因為在WebQQ裡需要呼叫到一個setAllowedOrigins()方法,這個方法只有4.1.5版本後才呼叫的出)
2、註冊SebSocket處理器,名為websocket
3、建立握手攔截器,重寫beforeHandshake方法,這個方法負責攔截HttpSess中的資料,放到WebSocket Session 中
4、處理頁面文字訊息,從WebSocket session中獲取資料,在頁面顯示,並儲存到資料庫。
5、JS頁面
6、執行
WebScoket總結
1.WebSocket協議
是由HTML5提供的、基於TCP的、對傳統HTTP協議(短連線)的升級版
解決的問題:
1.解決了多次握手的問題(長連線),提高效率
2.伺服器可以推送資料給客戶端,不需要客戶端輪詢等low操作
2.客戶端實現方式
JavaScript對WebSocket的支援:
2.1.建立客戶端連線的方式:
websocket = new WebSocket(“ws://localhost:9090/websocket”);
2.2.websocket物件常用事件:
onerror: 連線到服務端錯誤時觸發
onmessage: 收到伺服器推送的訊息時觸發
onclose: 連線關閉時觸發
onopen: 連線到服務端成功後觸發
3.Spring框架封裝的WebSocket用法
4.1.引入spring-websocket.jar
4.2.程式碼步驟
重寫握手攔截器(處理Session)
重寫訊息處理器
編寫一個配置類:
向Spring工廠註冊一個請求路徑和訊息處理器
向Spring工廠註冊一個握手攔截器