WebSocket實現站內消息實時推送


關於WebSocket

WebSocket是HTML5 開始提供的一種在單個TCP連接上進行全雙工通訊的協議。什么是全雙工?就是在同一時間可以發送和接收消息,實現雙向通信,比如打電話。WebSocket相比於ajax,其優點在於瀏覽器和服務端只需要完成一次握手,兩者之間就直接可以創建持久性的連接,並進行雙向數據主動傳輸。而ajax則需要瀏覽器不斷地主動向服務器發送請求,服務器才會響應,這種模式相對浪費帶寬和資源。

而且,WebSocket的API也是非常的簡單方便,所以用WebSocket實現消息的實時推送就再好不過了。

進入正題,首先創建一個WebSocketUtil類,在這個類下配置WebSocket,先把整體輪廓展示一下。

然后給每個方法實現具體功能

1、createWebSocket:new一個WebSocket對象webSocketSystem,並建立連接,連接建立時會觸發onopen事件,可以在onopen里面定時給服務端發送心跳消息。

2、這里是重點,當客戶端接收服務端數據時觸發onmessage事件,我們可以給WebSocketUtil類寫一個方法wrapperMessageSystem處理接收到的消息。

WebSocked發來的是一個JSON格式,這里我們用eventBus來傳遞觸發事件:

Message.vue組件內用eventBus監聽WebSocketUtil類傳過來的事件並做處理,最后在組件銷毀前關閉此事件

站內消息的實時推送功能就完成了,是不是很簡單呀


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM