關於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類傳過來的事件並做處理,最后在組件銷毀前關閉此事件

