什么是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