`
zengshaotao
  • 浏览: 754991 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Tomcat7中WebSocket初探

 
阅读更多

原文地址：http://blog.csdn.net/whucyl/article/details/20153207

HTML5中定义了WebSocket规范，该规范使得能够实现在浏览器端和服务器端通过WebSocket协议进行双向通信。

在Web应用中一个常见的场景是Server端向Client端推送某些消息，要实现这项功能，按照传统的思路可以有以下可选方案:

  • Ajax + 轮询 ：这种方案仅仅是一个模拟实现，本质还是HTTP请求响应的模式，由于无法预期什么时候推送消息，造成很多无效的请求；
  • 通过 Flash等第三方插件 ：这种方式能够实现双向通信，但有一个前提条件就是依赖第三方插件，而在移动端浏览器大多数都不支持Flash.

随着HTML5技术的普及，主流浏览器对HTML5标准的支持越来越好，利用浏览器原生支持WebSocket就可以轻松的实现上面的功能。只需要在浏览器端和服务器端建立一条WebSocket连接，就可以进行双向同时传递数据。相比于传统的方式，使用WebSocket的优点显而易见了：

  • 主动的双向通信模式：相对于使用Ajax的被动的请求响应模式，主动模式下可以节省很多无意义的请求；
  • 浏览器原生支持：简化了编程环境和用户环境，不依赖第三方插件；
  • 高效省流量：以数据帧的方式进行传输，抛弃了HTTP协议中请求头，直接了当.

那么在实际中如何建立WebSocket连接？在浏览器端和服务器端如何针对WebSocket编程？

就此问题，下文描述了建立WebSocket连接的过程，浏览器端WebSocket接口，并以Tomcat 7 为例在服务器端编写WebSocket服务。

1. 建立WebSocket连接过程

关于WebSocket规范和协议参考 http://www.websocket.org/aboutwebsocket.html

设计WebSocket协议的一个重要原则就是能和现有的Web方式和谐共处，建立WebSocket连接是以HTTP请求响应为基础的，这个过程为 WebSocket握手 .

图下所示为一个WebSocket建立连接的请求和响应过程：

此处稍作解释一下：

  1. 浏览器向服务器发送一个 Upgrade 请求头，告诉服务器 “我想从 HTTP 协议 切换到 WebSocket 协议”；
  2. 服务器端收到请求，如果支持 WebSocket ，则返回pUpgrade响应头，表示“我支持WebSocket协议，可以切换”；
  3. 浏览器接收响应头，从原来的HTTP协议切换WebSocket协议，WebSocket连接建立起来.

WebSocket连接建立在原来HTTP所使用的TCP/IP通道和端口之上 ，也就是说原来使用的是8080端口，现在还是使用8080端口，而不是使用新的TCP/IP连接。

数据帧传输支持Text和Binary两种方式：在使用Text方式时，以0x00为起始点，以0xFF结束，数据以UTF-8编码置于中间；对于Binary方式则没有结束标识，而是将数据帧长度置于数据前面。

2. 浏览器端 WebSocket编程接口

在浏览器端使用WebSocket之前，需要检测浏览器是否支持WebSocket，代码如下：

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
 
  1. var socket=null;   
  2. window.WebSocket = window.WebSocket || window.MozWebSocket;  
  3. if (!window.WebSocket) { alert('Error: WebSocket is not supported .'); }  
  4. else{ socket = new WebSocket('ws://...');}  

Websocket接口定义如下：

[javascript] view plaincopyprint?
 
  1. interface WebSocket : EventTarget {  
  2.     readonly attribute DOMString url;  
  3.     // ready state  
  4.     const unsigned short CONNECTING = 0;  
  5.     const unsigned short OPEN = 1;  
  6.     const unsigned short CLOSING = 2;  
  7.     const unsigned short CLOSED = 3;  
  8.     readonly attribute unsigned short readyState;  
  9.     readonly attribute unsigned long bufferedAmount;  
  10.     // networking  
  11.     attribute EventHandler onopen;  
  12.     attribute EventHandler onerror;  
  13.     attribute EventHandler onclose;  
  14.     readonly attribute DOMString extensions;  
  15.     readonly attribute DOMString protocol;  
  16.     void close([Clamp] optional unsigned short code, optional DOMString reason);  
  17.     // messaging  
  18.     attribute EventHandler onmessage;  
  19.     attribute DOMString binaryType;  
  20.     void send(DOMString data);  
  21.     void send(Blob data);  
  22.     void send(ArrayBuffer data);  
  23.     void send(ArrayBufferView data);  
  24. };  

从上面定义中可以很清晰的看出：

  • 通过send（）发向服务器送数据；
  • 通过close（）关闭连接；
  • 通过注册事件函数 onopen，onerror，onmessage，onclose 来处理服响应.

在index.jsp中编写编写代码如下：

[html] view plaincopyprint?
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <title>WebSocket demo</title>  
  5. <style>  
  6. body {padding: 40px;}  
  7. #outputPanel {margin: 10px;padding:10px;background: #eee;border: 1px solid #000;min-height: 300px;}  
  8. </style>  
  9. </head>  
  10. <body>  
  11. <input type="text" id="messagebox" size="60" />  
  12. <input type="button" id="buttonSend" value="Send Message" />  
  13. <input type="button" id="buttonConnect" value="Connect to server" />  
  14. <input type="button" id="buttonClose" value="Disconnect" />  
  15. <br>  
  16. <% out.println("Session ID = " + session.getId()); %>  
  17. <div id="outputPanel"></div>  
  18. </body>  
  19. <script type="text/javascript">  
  20.     var infoPanel = document.getElementById('outputPanel'); // 输出结果面板  
  21.     var textBox = document.getElementById('messagebox');    // 消息输入框  
  22.     var sendButton = document.getElementById('buttonSend'); // 发送消息按钮  
  23.     var connButton = document.getElementById('buttonConnect');// 建立连接按钮  
  24.     var discButton = document.getElementById('buttonClose');// 断开连接按钮  
  25.     // 控制台输出对象  
  26.     var console = {log : function(text) {infoPanel.innerHTML += text + "<br>";}};  
  27.     // WebSocket演示对象  
  28.     var demo = {  
  29.         socket : null,  // WebSocket连接对象  
  30.         host : '',      // WebSocket连接 url  
  31.         connect : function() {  // 连接服务器  
  32.             window.WebSocket = window.WebSocket || window.MozWebSocket;  
  33.             if (!window.WebSocket) {    // 检测浏览器支持  
  34.                 console.log('Error: WebSocket is not supported .');  
  35.                 return;  
  36.             }  
  37.             this.socket = new WebSocket(this.host); // 创建连接并注册响应函数  
  38.             this.socket.onopen = function(){console.log("websocket is opened .");};  
  39.             this.socket.onmessage = function(message) {console.log(message.data);};  
  40.             this.socket.onclose = function(){  
  41.                 console.log("websocket is closed .");  
  42.                 demo.socket = null; // 清理  
  43.             };  
  44.         },  
  45.         send : function(message) {  // 发送消息方法  
  46.             if (this.socket) {  
  47.                 this.socket.send(message);  
  48.                 return true;  
  49.             }  
  50.             console.log('please connect to the server first !!!');  
  51.             return false;  
  52.         }  
  53.     };  
  54.     // 初始化WebSocket连接 url  
  55.     demo.host=(window.location.protocol == 'http:') ? 'ws://' : 'wss://' ;  
  56.     demo.host += window.location.host + '/Hello/websocket/say';  
  57.     // 初始化按钮点击事件函数  
  58.     sendButton.onclick = function() {  
  59.         var message = textBox.value;  
  60.         if (!message) return;  
  61.         if (!demo.send(message)) return;  
  62.         textBox.value = '';  
  63.     };  
  64.     connButton.onclick = function() {  
  65.         if (!demo.socket)   demo.connect();  
  66.         else console.log('websocket already exists .');  
  67.     };  
  68.     discButton.onclick = function() {  
  69.         if (demo.socket) demo.socket.close();  
  70.         else  console.log('websocket is not found .');  
  71.     };  
  72. </script>  
  73. </html>  

3. 服务器端WebSocket编程

Tomcat 7提供了WebSocket支持，这里就以Tomcat 7 为例，探索一下如何在服务器端进行WebSocket编程。需要加载的依赖包为 \lib\catalina.jar、\lib\tomcat-coyote.jar

这里有两个重要的类 ：WebSocketServlet 和 StreamInbound， 前者是一个容器，用来初始化WebSocket环境；后者是用来具体处理WebSocket请求和响应的。

编写一个Servlet类，继承自WebSocket，实现其抽象方法即可，代码如下：

 

[java] view plaincopyprint?
 
  1. package websocket;  
  2.   
  3. import java.util.concurrent.atomic.AtomicInteger;  
  4. import javax.servlet.http.HttpServletRequest;  
  5. import org.apache.catalina.websocket.StreamInbound;  
  6. import org.apache.catalina.websocket.WebSocketServlet;  
  7.   
  8. public class HelloWebSocketServlet extends WebSocketServlet {  
  9.     private static final long serialVersionUID = 1L;  
  10.   
  11.     private final AtomicInteger connectionIds = new AtomicInteger(0);  
  12.     @Override  
  13.     protected StreamInbound createWebSocketInbound(String arg0,  
  14.             HttpServletRequest request) {  
  15.         return new HelloMessageInbound(connectionIds.getAndIncrement(), request  
  16.                 .getSession().getId());  
  17.     }  
  18. }  
[java] view plaincopyprint?
 
  1. package websocket;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.InputStream;  
  5. import java.io.Reader;  
  6. import java.nio.CharBuffer;  
  7. import org.apache.catalina.websocket.StreamInbound;  
  8. import org.apache.catalina.websocket.WsOutbound;  
  9.   
  10. public class HelloMessageInbound extends StreamInbound {  
  11.   
  12.     private String WS_NAME;  
  13.     private final String FORMAT = "%s : %s";  
  14.     private final String PREFIX = "ws_";  
  15.     private String sessionId = "";  
  16.   
  17.     public HelloMessageInbound(int id, String _sessionId) {  
  18.         this.WS_NAME = PREFIX + id;  
  19.         this.sessionId = _sessionId;  
  20.     }  
  21.   
  22.     @Override  
  23.     protected void onTextData(Reader reader) throws IOException {  
  24.         char[] chArr = new char[1024];  
  25.         int len = reader.read(chArr);  
  26.         send(String.copyValueOf(chArr, 0, len));  
  27.     }  
  28.   
  29.     @Override  
  30.     protected void onClose(int status) {  
  31.         System.out.println(String.format(FORMAT, WS_NAME, "closing ......"));  
  32.         super.onClose(status);  
  33.     }  
  34.   
  35.     @Override  
  36.     protected void onOpen(WsOutbound outbound) {  
  37.         super.onOpen(outbound);  
  38.         try {  
  39.             send("hello, my name is " + WS_NAME);  
  40.             send("session id = " + this.sessionId);  
  41.         } catch (IOException e) {  
  42.             e.printStackTrace();  
  43.         }  
  44.     }  
  45.   
  46.     private void send(String message) throws IOException {  
  47.         message = String.format(FORMAT, WS_NAME, message);  
  48.         System.out.println(message);  
  49.         getWsOutbound().writeTextMessage(CharBuffer.wrap(message));  
  50.     }  
  51.   
  52.     @Override  
  53.     protected void onBinaryData(InputStream arg0) throws IOException {  
  54.     }  
  55. }  

在Web.xml中进行Servlet配置：

[html] view plaincopyprint?
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  3.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
  4.     http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">  
  5.     <display-name>websocket demo</display-name>  
  6.     <servlet>  
  7.         <servlet-name>wsHello</servlet-name>  
  8.         <servlet-class>websocket.HelloWebSocketServlet</servlet-class>  
  9.     </servlet>  
  10.     <servlet-mapping>  
  11.         <servlet-name>wsHello</servlet-name>  
  12.         <url-pattern>/websocket/say</url-pattern>  
  13.     </servlet-mapping>  
  14.   
  15.     <welcome-file-list>  
  16.         <welcome-file>index.jsp</welcome-file>  
  17.     </welcome-file-list>  
  18. </web-app>  

4. 结果

这里看到 WebSocket建立的连接所访问的Session和HTTP访问的Session是一致的。

分享到：
| spring启动过程解密
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics