UDN-企业互联网技术人气社区

板块导航

浏览  : 2092
回复  : 3

[HTML5] HTML5之WebSocket

[复制链接]
genie1003的头像 楼主
发表于 2015-7-23 08:35:15 | 显示全部楼层 |阅读模式
  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支持情况:
20120702011743715.png

  接下来看看基于WebSocket设计的Application常见的架构方式:它的特点是可以支持更多并发连接,并且由于它原理上的双向性,客户端的连接可以Net穿透到有防火墙和Proxy的后台Server上。由于WebSocket的通信协议也非HTML,在新的ws通信协议设计中,大大减少的传输消息的Size,去掉了传统HTML Packet许多冗余的信息。瘦身之后的消息也可以大大提高Web应用的响应性能。
20120702011743216.jpg

  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等方法
  1. [java]
  2. public class AutoAdminServlet extends WebSocketServlet{
  3.     //private static final long serialVersionUID = 1874288265454885922L;
  4.     private final Set<AutoAdminSocket> clients;
  5.     static Logger LOG = Logger.getLogger(AutoAdminServlet.class);
  6.      
  7.     public AutoAdminServlet(){
  8.         clients = new HashSet<AutoAdminSocket>();
  9.     }
  10.      
  11.     @Override
  12.     public WebSocket doWebSocketConnect(HttpServletRequest req, String message) {
  13.         LOG.info("Set up a web socket connection: "+message);
  14.         return new AutoAdminSocket();
  15.     }
  16.      
  17.     class AutoAdminSocket implements WebSocket.OnTextMessage{
  18.         WebSocket.Connection connection;
  19.          
  20.         @Override
  21.         public void onMessage(String message) {
  22.             /*
  23.             Object json = JSON.parse(message);
  24.             if(!(json instanceof Map))
  25.                 return;
  26.             
  27.             @SuppressWarnings("unchecked")
  28.             Map<String, String> map = (Map<String, String>)json;
  29.             //TODO
  30.             */
  31.             
  32.             sendMessage(this, null, "Thanks, I received: "+message);
  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.         @Override
  40.         public void onOpen(Connection conn) {
  41.             LOG.info("Received a client socket connection.");
  42.             this.connection = conn;
  43.             clients.add(this);
  44.             sendMessage(this, "open", "sample data");
  45.         }
  46.     }

  47.     void sendMessage(AutoAdminSocket client, String action, String message){
  48.         try{
  49.             if(message == null || message.isEmpty())
  50.                 message = "n/a";
  51.             
  52.             if(action != null)
  53.                 message = "action: "+action+", data: "+message;
  54.             
  55.             client.connection.sendMessage(message);
  56.         }catch(IOException ex){
  57.             ex.printStackTrace();
  58.         }
  59.     }
  60. }
复制代码

  前台页面代码部分,主要做好以下几点:

  1. 在Javascript中判断浏览器是否支持WebSocket,并提供一些友好提示或者备案方案

  2. 创建WebSocket这个Javascript对象,并谨慎管理它: 忌讳滥用不断与Server的建立WebSocket,一般一个Browser终端维护一个连接即可,逻辑的多样性可以通过Command模式来丰富

  3. 当Browser需要主动与Server通信时,调用WebSocket API中的send方法

  4. 当Server主动推送数据到Browser时,在onMessage方法中dispatch多样的business

  1. [javascript]
  2. var log = function(s) {   
  3.                 if (document.readyState !== "complete") {   
  4.                     log.buffer.push(s);   
  5.                 } else {   
  6.                     document.getElementById("output").innerHTML += (s + "\n");   
  7.                 }   
  8.             }
  9.             
  10.             log.buffer = [];   
  11.          
  12.             var socket = null;
  13.             function init(){
  14.                 window.WebSocket = window.WebSocket || window.MozWebSocket;
  15.                 if(!window.WebSocket){
  16.                     log("WebSocket not supported by this browser");
  17.                     return;
  18.                 }
  19.                  
  20.                 var webSocket = new WebSocket("ws://127.0.0.1:8080/pulsenet/auto");
  21.                 webSocket.onopen = onopen;
  22.                 webSocket.onclose = onclose;
  23.                 webSocket.onmessage = onmessage;
  24.                  
  25.                 socket = webSocket;
  26.             }
  27.             
  28.             function onopen(){
  29.                 log("Open a web socket.");
  30.             }
  31.             
  32.             function onclose(){
  33.                 log("Close a web socket.");
  34.             }
  35.             
  36.             function onmessage(evt){
  37.                 var data = evt.data;
  38.                 if(!data)   return;
  39.                  
  40.                 log(data);
  41.                  
  42.                 data = JSON.parse(data);
  43.                 if(!data)   return;
  44.             }
  45.             
  46.             function send(){
  47.                 socket.send("Hello web socket server!");
  48.             }
复制代码

相关帖子

发表于 2015-8-10 16:41:56 | 显示全部楼层
个人认为html5作为下一代的标准语言,有很大的意义
使用道具 举报

回复

发表于 2015-8-17 15:02:20 | 显示全部楼层
占坑编辑ing
使用道具 举报

回复

发表于 2015-8-17 20:14:36 | 显示全部楼层
实用教程, 感谢撸主
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部