前端實現實時通信

什麼是websocket

需求：前端展現相似待辦todo-list每條記錄的數量，初始值ajax獲取接口返回，以後，後臺數據庫裏記錄數量改變，前端可以對其實時渲染

解決方法：1輪詢（缺點： 須要服務器有很快的處理速度和資源） 2websocket

http協議是單工的, 只能由client發請求再由server返回請求結果, 在http協議中server是不能主動發請求到client的.

websocket協議是全雙工的，容許服務器主動發送信息給客戶端，固然也容許client發請求到server。

請求過程

WebSocket複用了HTTP的握手通道。client利用http來創建tcp鏈接，後續的數據交換則遵守WebSocket的協議。

Connection: Upgrade：表示要升級協議Upgrade: websocket：表示要升級到websocket協議

即我不用Http啦，開始遵循其餘協議啦（ws），可是沒有你不行，過河拆橋

html5 api

 1 <script>
 2   var ws = new WebSocket('ws://localhost:8080');
 3   ws.onopen = function () {
 4     console.log('ws onopen');
 5     ws.send('from client: hello');
 6   };
 7   ws.onmessage = function (e) {
 8     console.log('ws onmessage');
 9     console.log('from server: ' + e.data);
10   };
11 </script>

Sock.js(處理兼容性)

支持瀏覽器：html5的協議，因此老瀏覽器不支持

兼容怎麼辦？ 

Sock.js來了

Sock.JS的一大好處在於提供了瀏覽器兼容性。優先使用原生WebSocket，若是在不支持websocket的瀏覽器中，會自動降爲輪詢的方式。

spring也對socketJS提供了支持。

Stomp.js（處理傳輸協議）

websocket鏈接已經創建, 因爲websocket沒有規範payload的格式, 因此應用須要本身去定義payload的格式.

websocket的payload能夠是文本也能夠是二進制. 應用通常會選擇用文本.這個文本是什麼格式websocket協議自己並無規定, 由應用本身來定.

因而Stomp.js來了

stomp是一個用於client之間進行異步消息傳輸的簡單文本協議.

api參考: 點擊打開連接

實現代碼

1 <script src="/sockjs.js"></script>
2 <script src="/stomp.js"></script>

1 socket = new SockJS(wsLocalUrl+'/websocket');
2     var stompClient = Stomp.over(socket);
3  
4     stompClient.connect('','',function(frame){
5         stompClient.subscribe("/topic/taskNum."+currUserId+"."+taskClassParent, function(message) {
6             //alert(JSON.parse(message.body));
7         });
8     });

首先經過sockjs創建一個跨瀏覽器的websocket，採用stomp消息協議，來訂閱、接受服務器的消息

後臺java代碼參考：https://blog.csdn.net/taotoxht/article/details/52005880