HTML5 WebSocket的使用及例子

WebSocket protocol 是HTML5一种新的协议(protocol)。它是实现了浏览器与服务器全双工通信(full-duplex)。

现在，很多网站为了实现即时通讯(real-time)，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(time interval)（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request d的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求(request)，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽。

而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信，但依然需要发出请求(reuqest)。

在 WebSocket API，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即使服务带来了两大好处：

1. Header

互相沟通的Header是很小的-大概只有 2 Bytes

2. Server Push

服务器可以主动传送数据给客户端

下面实现一个简单PUSH例子如下：

服务端代码：

public class InitServlet extends HttpServlet {


/**
* 
*/
private static final long serialVersionUID = 1L;
private static List socketList;


public void init(ServletConfig config) throws ServletException {
InitServlet.socketList = new ArrayList();
super.init(config);
System.out.println("Server start============");
}


public static List getSocketList() {
return InitServlet.socketList;
}


}

public class TestWebSocketServlet extends WebSocketServlet{


private static final Logger log = Logger.getLogger(TestWebSocketServlet.class);
/**
* 
*/
private static final long serialVersionUID = 1L;
//存储链接的容器
private  static  List connsList = new ArrayList();
@Override
protected StreamInbound createWebSocketInbound(String subProtocol,HttpServletRequest request) {
// TODO Auto-generated method stub
return new WebSocketMessageInbound();
}
public class WebSocketMessageInbound extends MessageInbound{


@Override  
   protected void onClose(int status) {  
//        InitServlet.getSocketList().remove(this);  
super.onClose(status);  
log.debug("onClose");
InitServlet.getSocketList().remove(this);
   }  
 
   @Override  
   protected void onOpen(WsOutbound outbound) {  
    log.debug("onOpen");
       super.onOpen(outbound);  
       InitServlet.getSocketList().add(this);
   }  
@Override
protected void onBinaryMessage(ByteBuffer message) throws IOException {
// TODO Auto-generated method stub
log.debug("onBinaryMessage");
}


@Override
protected void onTextMessage(CharBuffer message) throws IOException {
// TODO Auto-generated method stub
log.debug("onTextMessage="+message);
// this.getWsOutbound().writeTextMessage(CharBuffer.wrap("===="));
// this.getWsOutbound().writeTextMessage(message);
//发送给所有链接的
for (MessageInbound messageInbound : InitServlet.getSocketList()) {  
           CharBuffer buffer = CharBuffer.wrap(message);  
           WsOutbound outbound = messageInbound.getWsOutbound();  
           outbound.writeTextMessage(buffer);  
           outbound.flush();  
       }  
}

}
}

web.xml配置

initServlet
com.demo.websocket.InitServlet
1


websocket
com.demo.websocket.TestWebSocketServlet


websocket
/websocket

前台代码：

 
     
         
         
     
     
       

 
       
       

       
        Send
     
 

备注：必须把TOMCAT7  lib目录下的两个jar文件catalina.jar、tomcat-coyote.jar添加到项目的lib。