最近接到一個業(yè)務(wù)需求,需要做一個聊天信息的實時展示的界面,這就需要和服務(wù)器端建立webSocket連接,從而實現(xiàn)數(shù)據(jù)的實時獲取和視圖的實時刷新.在此將我的實現(xiàn)記錄下來,希望可以給有同樣需求的人一些幫助.廢話少說,下面我就來講一下我的實現(xiàn)過程:

socksjs

•客戶端和服務(wù)器端api盡可能簡潔，盡量靠近websocket api
•支持服務(wù)端擴(kuò)展和負(fù)載均衡技術(shù)
•傳輸層應(yīng)該全面支持跨域通信
•如果受到代理服務(wù)器的限制，傳輸層能優(yōu)雅地從一種方式回退到另一種方式
•盡可能快地建立連接
•客戶端只是純粹的JavaScript，不需要flash
•客戶端JavaScript必須經(jīng)過嚴(yán)格的測試
•服務(wù)器端代碼盡可能簡單，降低用另一種語言重寫server的代價

前提

要進(jìn)行文章中的代碼的測試,需要服務(wù)端端開發(fā)人員配合你,提供相關(guān)的通信接口.來完成客戶端和服務(wù)端的通信.實現(xiàn)通信,我們需要用到另個模塊 sockjs-client 模塊和 stomjs 模塊,接下來我會先對這兩個模塊做一個簡單的介紹.

關(guān)于實時通信

實現(xiàn)實時通信,我們通常有三種方法:

ajax輪詢 ajax輪詢的原理非常簡單,讓瀏覽器每隔幾秒就像服務(wù)器發(fā)送一個請求,詢問服務(wù)器是否有新的信息.

http 長輪詢 長輪詢的機(jī)制和ajax輪詢差不多,都是采用輪詢的方式,不過才去的是阻塞模型(一直打電話,沒收到就不掛電話),也就是說,客戶端發(fā)起鏈接后,如果沒有消息,就一直不返回response給客戶端.知道有新的消息才返回,返回完之后,客戶端再此建立連接,周而復(fù)始.

WebSocket WebSocket是HTML5開始提供的一種在單個TCP連接上進(jìn)行全雙工通訊的協(xié)議.在WebSocket API中，瀏覽器和服務(wù)器只需要做一個握手的動作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送,不需要繁瑣的詢問和等待. 從上面的介紹很容易看出來,ajax輪詢和長輪詢都是非常耗費(fèi)資源的,ajax輪詢需要服務(wù)器有很快的處理速度和資源,http長輪詢需要有很高的并發(fā),也就是同時接待客戶的能力.而WebSocket,只需要經(jīng)過一次HTTP請求,就可以與服務(wù)端進(jìn)行源源不斷的消息收發(fā)了.

sockjs-client

sockjs-client 是從SockJS中分離出來的用于客戶端使用的通信模塊.所以我們就直接來看看SockJS. SockJS是一個瀏覽器的JavaScript庫,它提供了一個類似于網(wǎng)絡(luò)的對象,SockJS提供了一個連貫的,跨瀏覽器的JavaScriptAPI,它在瀏覽器和Web服務(wù)器之間創(chuàng)建了一個低延遲,全雙工,跨域通信通道. 你可能會問,我為什么不直接用原生的WebSocket而要使用SockJS呢?這得益于SockJS的一大特性,一些瀏覽器中缺少對WebSocket的支持,因此，回退選項是必要的，而Spring框架提供了基于SockJS協(xié)議的透明的回退選項。SockJS提供了瀏覽器兼容性,優(yōu)先使用原生的WebSocket,如果某個瀏覽器不支持WebSocket,SockJS會自動降級為輪詢.