一.WebSocket小介紹
隨着互聯網的發展，傳統的HTTP協議已經很難滿足Web應用日益復雜的需求了。近年來，隨着HTML5的誕生，WebSocket協議被提出，它實現了瀏覽器與服務器的全雙工通信，擴展了瀏覽器與服務端的通信功能，使服務端也能主動向客戶端發送數據。
我們知道，傳統的HTTP協議是無狀態的，每次請求（request）都要由客戶端（如 瀏覽器）主動發起，服務端進行處理后返回response結果，而服務端很難主動向客戶端發送數據；這種客戶端是主動方，服務端是被動方的傳統Web模式 對於信息變化不頻繁的Web應用來說造成的麻煩較小，而對於涉及實時信息的Web應用卻帶來了很大的不便，如帶有即時通信、實時數據、訂閱推送等功能的應 用。在WebSocket規范提出之前，開發人員若要實現這些實時性較強的功能，經常會使用折衷的解決方法：輪詢（polling）和Comet技術。其實后者本質上也是一種輪詢，只不過有所改進。
輪詢是最原始的實現實時Web應用的解決方案。輪詢技術要求客戶端以設定的時間間隔周期性地向服務端發送請求，頻繁地查詢是否有新的數據改動。明顯地，這種方法會導致過多不必要的請求，浪費流量和服務器資源。
Comet技術又可以分為長輪詢和流技術。長輪詢改進了上述的輪詢技術，減小了無用的請求。它會為某些數據設定過期時間，當數據過期后才會向服務端發送請求；這種機制適合數據的改動不是特別頻繁的情況。流技術通常是指客戶端使用一個隱藏的窗口與服務端建立一個HTTP長連接，服務端會不斷更新連接狀態以保持HTTP長連接存活；這樣的話，服務端就可以通過這條長連接主動將數據發送給客戶端；流技術在大並發環境下，可能會考驗到服務端的性能。
這兩種技術都是基於請求-應答模式，都不算是真正意義上的實時技術；它們的每一次請求、應答，都浪費了一定流量在相同的頭部信息上，並且開發復雜度也較大。
伴隨着HTML5推出的WebSocket，真正實現了Web的實時通信，使B/S模式具備了C/S模式的實時通信能力。WebSocket的工作流程是這 樣的：瀏覽器通過JavaScript向服務端發出建立WebSocket連接的請求，在WebSocket連接建立成功后，客戶端和服務端就可以通過 TCP連接傳輸數據。因為WebSocket連接本質上是TCP連接，不需要每次傳輸都帶上重復的頭部數據，所以它的數據傳輸量比輪詢和Comet技術小 了很多。本文不詳細地介紹WebSocket規范，主要介紹下WebSocket在Java Web中的實現。
二.WebSocket兼容性
三.WebSocket應用場景
隨着直播的興起，以及現在社會發展的進步，更為重要的是瀏覽器的更新換代，世界互聯網技術的發展。WebSocket應用會越來越廣泛。下面是我近期寫的一個WebSocket小插件，能夠滿足一般的需求。
現在為大家分享一下，多謝大家指正。
1 //lk-2017-05-04 2 var _websocket ={ 3 option:{ 4 websocket:window.WebSocket || window.MozWebSocket, 5 websockets:'', 6 _websocket_des:'', 7 url:'', 8 }, 9 init:function(url,send,message){ 10 if(this.option.websocket){ 11 window.onbeforeunload=function(){ 12 _websocket.option._websocket_des.close(); 13 } 14 this.option.url=url; 15 if(send && Object.prototype.toString.call(send)=="[object Function]") this.option.send=send; 16 if(message && Object.prototype.toString.call(message)=="[object Function]") this.option.message=message; 17 if(this.option.message && this.option.send){ 18 return this.main(url,send,message); 19 }else if(this.option.message){ 20 return this.main(url,false,message); 21 }else if(this.option.send){ 22 return this.main(url,send,false); 23 }else{ 24 return this.main(url); 25 } 26 27 }else{ 28 return '當前設備不支持' 29 } 30 }, 31 doopen:function(){ 32 console.log('鏈接open') 33 }, 34 doclose:function(){ 35 console.log('鏈接close'); 36 _websocket.option._websocket_des.close(); 37 }, 38 doError:function(){ 39 console.log('鏈接出錯') 40 }, 41 doMessage:function(message){ 42 console.log('收到message='+message); 43 }, 44 doSend:function(message){ 45 if(this.readyState==1) { 46 this.send(JSON.stringify(message)); 47 } else { 48 console.log("您已經掉線，無法與服務器通信!"); 49 } 50 }, 51 Reconnect:function(){ 52 return _websocket.main(_websocket.option.url,_websocket.option.send,_websocket.option.message); 53 }, 54 main:function(wcUrl,send,message){ 55 this.option.websockets = new this.option.websocket(encodeURI(wcUrl)); 56 this.option.websockets.onopen = this.doopen;//打開 57 this.option.websockets.onerror = this.doError;//出錯 58 this.option.websockets.onclose = this.doclose;//關閉 59 this.option.websockets.onmessage = (message || this.doMessage);//接收 60 this.option.websockets.onSend= (send || this.doSend);//發送 61 this.option.websockets.Reconnect = this.Reconnect;//重新連接 62 this.option._websocket_des=this.option.websockets; 63 return this.option.websockets; 64 } 65 66 }
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>websocket-demo</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 7 <style type="text/css"> 8 #msges{ 9 width: 220px; 10 height: 35px; 11 border: 1px solid #ccc; 12 border-radius: 5px; 13 text-indent: 10px; 14 } 15 #btn{ 16 margin-left: 15px; 17 height: 35px; 18 width: 65px; 19 border: none; 20 background-color: rebeccapurple; 21 border-radius: 5px; 22 color: #fff; 23 } 24 #list{ 25 background-color: #D1DBE5; 26 padding: 10px; 27 height: 300px; 28 overflow-y: auto; 29 } 30 p{ 31 font-size: 25px; 32 width: 120px; 33 line-height: 50px; 34 padding: 0; 35 margin: 0; 36 } 37 </style> 38 </head> 39 <body onkeydown="keyLogin();"> 40 <input type="text" id="msges" placeholder="請輸入消息" /><input id="btn" type="button" onclick="webs.onSend()" value="發送" /> 41 <p>消息列表</p> 42 <div id="list"> 43 44 </div> 45 <script type="text/javascript" src="js/websocket.js" ></script> 46 <script> 47 var wurl='ws://192.168.109.53:8080/ssm/websocket'; 48 var webs=_websocket.init(wurl,function(){ 49 50 //console.log('send1') JSON.stringify(sends) 51 52 if(webs.readyState==1) { 53 var sends=document.getElementById("msges").value; 54 webs.send(sends|| '你輸入的是什么？'); 55 document.getElementById("msges").value=''; 56 }else{ 57 console.log('已斷開鏈接'); 58 webs=webs.Reconnect(); 59 } 60 61 },function(msgges){ 62 //console.log('msgges1'); 63 document.getElementById("list").innerHTML+=msgges.data+ '<br/>'; 64 }); 65 66 function keyLogin(){ 67 event.keyCode==13?webs.onSend():''; 68 } 69 </script> 70 </body> 71 </html>
效果如圖：
小伙伴們，這只是前端代碼哦！！需要后端支持提供接口才可以長連接的。
websocket連接個數
Tomcat的WebSocket最大連接數為200。chrome最多連接256個。
總結：
websocket以后肯定是互聯網發展的趨勢，可實時顯示數據，保證數據的准確性與后端的一致性。上邊貼出的js代碼不是最好的，如果一個頁面鏈接一個 websocket足夠您使用，如果一個頁面需要鏈接多個 websocket，你還需要聯系我或者你自己在重新封裝。嘿嘿！