WebSocket小插件

時間 2019-11-24

標籤 websocket 插件简体版

原文原文鏈接

一.WebSocket小介紹

隨着互聯網的發展，傳統的HTTP協議已經很難知足Web應用日益複雜的需求了。近年來，隨着HTML5的誕生，WebSocket協議被提出，它實現了瀏覽器與服務器的全雙工通訊，擴展了瀏覽器與服務端的通訊功能，使服務端也能主動向客戶端發送數據。javascript

　　咱們知道，傳統的HTTP協議是無狀態的，每次請求（request）都要由客戶端（如瀏覽器）主動發起，服務端進行處理後返回response結果，而服務端很難主動向客戶端發送數據；這種客戶端是主動方，服務端是被動方的傳統Web模式對於信息變化不頻繁的Web應用來講形成的麻煩較小，而對於涉及實時信息的Web應用卻帶來了很大的不便，如帶有即時通訊、實時數據、訂閱推送等功能的應用。在WebSocket規範提出以前，開發人員若要實現這些實時性較強的功能，常常會使用折衷的解決方法：輪詢（polling）和Comet技術。其實後者本質上也是一種輪詢，只不過有所改進。css

　　輪詢是最原始的實現實時Web應用的解決方案。輪詢技術要求客戶端以設定的時間間隔週期性地向服務端發送請求，頻繁地查詢是否有新的數據改動。明顯地，這種方法會致使過多沒必要要的請求，浪費流量和服務器資源。html

　　Comet技術又能夠分爲長輪詢和流技術。長輪詢改進了上述的輪詢技術，減少了無用的請求。它會爲某些數據設定過時時間，當數據過時後纔會向服務端發送請求；這種機制適合數據的改動不是特別頻繁的狀況。流技術一般是指客戶端使用一個隱藏的窗口與服務端創建一個HTTP長鏈接，服務端會不斷更新鏈接狀態以保持HTTP長鏈接存活；這樣的話，服務端就能夠經過這條長鏈接主動將數據發送給客戶端；流技術在大併發環境下，可能會考驗到服務端的性能。前端

　　這兩種技術都是基於請求-應答模式，都不算是真正意義上的實時技術；它們的每一次請求、應答，都浪費了必定流量在相同的頭部信息上，而且開發複雜度也較大。java

　　伴隨着HTML5推出的WebSocket，真正實現了Web的實時通訊，使B/S模式具有了C/S模式的實時通訊能力。WebSocket的工做流程是這樣的：瀏覽器經過JavaScript向服務端發出創建WebSocket鏈接的請求，在WebSocket鏈接創建成功後，客戶端和服務端就能夠經過 TCP鏈接傳輸數據。由於WebSocket鏈接本質上是TCP鏈接，不須要每次傳輸都帶上重複的頭部數據，因此它的數據傳輸量比輪詢和Comet技術小了不少。本文不詳細地介紹WebSocket規範，主要介紹下WebSocket在Java Web中的實現。web

二.WebSocket兼容性

三.WebSocket應用場景

隨着直播的興起，以及如今社會發展的進步，更爲重要的是瀏覽器的更新換代，世界互聯網技術的發展。WebSocket應用會愈來愈普遍。下面是我近期寫的一個WebSocket小插件，可以知足通常的需求。chrome

如今爲你們分享一下，多謝你們指正。後端

 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 }

View Code

 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>