碼上快樂

相關內容    簡體    繁體

【轉】HTML5的WebSocket

本文轉載自   查看原文   2012-07-01 02:21   4282    html5/ javascript/ WebSocket
Introduction:
准備實踐一些HTML5的新技術來強化項目的工具。設計后台交互部分選擇了HTML5的WebSocket，研究了一下基本的用法，想寫點對於WebSocket實踐的感受。
 
個人覺得WebSocket的出現是對於Web應用交互性設計的一次革新。WebSocket提出之前，為了解決后台推送消息到前台的需求，提出了一些解決方案，這些方案使用已有的技術（如ajax，iframe，flashplayer，java applet ...），通過一些變通的處理來實現。基本思路都是通過輪詢的方式不斷的由Client Browser向Server請求任何數據和頁面的變化，亦或通過長連接的方式借助第三方插件來達到即時的收到Server的數據。
 
而WebSocket允許后台隨時向前端發送文本或者二進制消息，WebSocket是一種全新的協議，不屬於http無狀態協議，協議名為"ws"，這意味着一個websocket連接地址會是這樣的寫法：ws://localhost:8080/webSocketServer。ws不是http，所以傳統的web服務器不一定支持，需要服務器與瀏覽器同時支持， WebSocket才能正常運行，目前的支持還不普遍，需要特別的web服務器和現代的瀏覽器。一下是瀏覽器對WebSocket支持情況：

 
接下來看看基於WebSocket設計的Application常見的架構方式：它的特點是可以支持更多並發連接，並且由於它原理上的雙向性，客戶端的連接可以Net穿透到有防火牆和Proxy的后台Server上。由於WebSocket的通信協議也非HTML，在新的ws通信協議設計中，大大減少的傳輸消息的Size，去掉了傳統HTML Packet許多冗余的信息。瘦身之后的消息也可以大大提高Web應用的響應性能。

 
Demonstration:
目前對WebSocket支持的Web Server也逐漸多了起來，筆者在實踐的時候選擇的是Jetty 8.1.4
在Jetty的lib中包含一個jetty-websocket的JRA包實現了W3C發布的WebSocket接口規范，並且在jetty-util中也包含的基於JSON格式的通信消息轉換類。方便開發者快速的開發WebSocket應用。在后台代碼中主要部分是：
1. 繼承並實現WebSocketServlet中的doWebSocketConnection方法
2. 實現WebSocket接口中的onOpen, onClose, onMessage等方法
 
[java] view plain copy print ?
  1. public class AutoAdminServlet extends WebSocketServlet{  
  2.     //private static final long serialVersionUID = 1874288265454885922L;   
  3.     private final Set<AutoAdminSocket> clients;  
  4.     static Logger LOG = Logger.getLogger(AutoAdminServlet.class);  
  5.       
  6.     public AutoAdminServlet(){  
  7.         clients = new HashSet<AutoAdminSocket>();  
  8.     }  
  9.       
  10.     @Override  
  11.     public WebSocket doWebSocketConnect(HttpServletRequest req, String message) {  
  12.         LOG.info("Set up a web socket connection: "+message);  
  13.         return new AutoAdminSocket();  
  14.     }  
  15.       
  16.     class AutoAdminSocket implements WebSocket.OnTextMessage{  
  17.         WebSocket.Connection connection;  
  18.           
  19.         @Override  
  20.         public void onMessage(String message) {  
  21.             /* 
  22.             Object json = JSON.parse(message); 
  23.             if(!(json instanceof Map)) 
  24.                 return; 
  25.              
  26.             @SuppressWarnings("unchecked") 
  27.             Map<String, String> map = (Map<String, String>)json; 
  28.             //TODO 
  29.             */  
  30.               
  31.             sendMessage(this, null, "Thanks, I received: "+message);  
  32.         }  
  33.   
  34.         @Override  
  35.         public void onClose(int code, String message) {  
  36.             LOG.info("Closed and removed a client socket connection.");  
  37.             clients.remove(this);  
  38.         }  
  39.   
  40.         @Override  
  41.         public void onOpen(Connection conn) {  
  42.             LOG.info("Received a client socket connection.");  
  43.             this.connection = conn;  
  44.             clients.add(this);  
  45.             sendMessage(this, "open", "sample data");  
  46.         }  
  47.     }  
  48.   
  49.     void sendMessage(AutoAdminSocket client, String action, String message){  
  50.         try{  
  51.             if(message == null || message.isEmpty())  
  52.                 message = "n/a";  
  53.               
  54.             if(action != null)  
  55.                 message = "action: "+action+", data: "+message;  
  56.               
  57.             client.connection.sendMessage(message);  
  58.         }catch(IOException ex){  
  59.             ex.printStackTrace();  
  60.         }  
  61.     }  
  62. }  
前台頁面代碼部分，主要做好以下幾點：
1. 在Javascript中判斷瀏覽器是否支持WebSocket，並提供一些友好提示或者備案方案
2. 創建WebSocket這個Javascript對象，並謹慎管理它: 忌諱濫用不斷與Server的建立WebSocket，一般一個Browser終端維護一個連接即可，邏輯的多樣性可以通過Command模式來豐富
3. 當Browser需要主動與Server通信時，調用WebSocket API中的send方法
4. 當Server主動推送數據到Browser時，在onMessage方法中dispatch多樣的business
 
[javascript] view plain copy print ?
  1. var log = function(s) {    
  2.                 if (document.readyState !== "complete") {    
  3.                     log.buffer.push(s);    
  4.                 } else {    
  5.                     document.getElementById("output").innerHTML += (s + "\n");    
  6.                 }    
  7.             }  
  8.               
  9.             log.buffer = [];    
  10.           
  11.             var socket = null;  
  12.             function init(){  
  13.                 window.WebSocket = window.WebSocket || window.MozWebSocket;  
  14.                 if(!window.WebSocket){  
  15.                     log("WebSocket not supported by this browser");  
  16.                     return;  
  17.                 }  
  18.                   
  19.                 var webSocket = new WebSocket("ws://127.0.0.1:8080/pulsenet/auto");  
  20.                 webSocket.onopen = onopen;  
  21.                 webSocket.onclose = onclose;  
  22.                 webSocket.onmessage = onmessage;  
  23.                   
  24.                 socket = webSocket;  
  25.             }  
  26.               
  27.             function onopen(){  
  28.                 log("Open a web socket.");  
  29.             }  
  30.               
  31.             function onclose(){  
  32.                 log("Close a web socket.");  
  33.             }  
  34.               
  35.             function onmessage(evt){  
  36.                 var data = evt.data;  
  37.                 if(!data)   return;  
  38.                   
  39.                 log(data);  
  40.                   
  41.                 data = JSON.parse(data);  
  42.                 if(!data)   return;  
  43.             }  
  44.               
  45.             function send(){  
  46.                 socket.send("Hello web socket server!");  
  47.             }  

End
在筆者大概體驗了一下WebSocket之后，總結了一些想法：
1. WebSocket的后台代碼需要設計健壯而清晰的算法來判斷哪些消息是需要推送給哪些客戶端，單個或者多個，或者類似廣播的全部推送，對客戶端的socket connection管理需要考慮線程安全和唯一性等問題。
2. WebCoekt的前台代碼需要根據business設計簡潔的協議或者命令，還有數據格式，把輪詢的責任轉移到Server端，而在Browser端只專注做好主動請求的邏輯。在接收Server推送和Client主動請求二者操作到頁面共同的部分時，也要謹慎設計頁面數據展示的邏輯和同步問題。
 
Reference:
 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 HTML5之WebSocket（轉自知乎） HTML5 WebSocket HTML5 WebSocket之HelloWorld HTML5 WebSocket HTML5中的WebSocket HTML5之webSocket使用 （轉）使用 HTML5 WebSocket 構建實時 Web 應用 HTML5 WebSocket 應用示例 突襲HTML5之WebSocket入門1 - WebSocket協議 HTML5 WebSocket 技術介紹
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM