HTML5 WebSocket 实时推送信息测试demo

测试一下HTML5的websocket功能，实现了客户端→服务器实时推送信息到客户端，包括推送图片：

websocket实现MessageInbound类 onTextMessage()/onBinaryMessage()方法负责信息的推送，canvas负责绘画，看代码自己研究比较好，源码在后面

demo的服务器：tomcat 7.0.47，

浏览器为支持websocket version 13版本，

注意：引入jar包在tomcat的lib目录下：catalina.jar tomcat-coyote.jar，发布项目后需要删掉，否则包冲突！每个浏览器的websocket版本不同 需要不断测试 慎用！！！

先创建一个服务初始化类 SocketService ，一个servlet

package com.websocket;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;

import org.apache.catalina.websocket.MessageInbound;

public class SocketService extends HttpServlet {

    private static List<MessageInbound> socketList;

    public void init(ServletConfig config) throws ServletException {
        // TODO Auto-generated method stub
        SocketService.socketList = new ArrayList<MessageInbound>();
        super.init(config);
    }

    public static List<MessageInbound> getMessageInbound() {
        return  SocketService.socketList;

    }
}

再创建WebSocketImp，实现WebSocketServlet类

package com.websocket;

import javax.servlet.http.HttpServletRequest;

import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;

public class WebSocketImp extends WebSocketServlet{

    protected StreamInbound createWebSocketInbound(String arg0,
            HttpServletRequest arg1) {
        // TODO Auto-generated method stub
        return new WebSocketInboundImp();
    }
}

然后是MessageInbound 的实现类

package com.websocket;

import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;

import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.WsOutbound;

public class WebSocketInboundImp extends MessageInbound {

    /**
     * 打开
     */
    protected void onOpen(WsOutbound outbound) {
        // TODO Auto-generated method stub
        SocketService.getMessageInbound().add(this);
        super.onOpen(outbound);
    }

    /**
     * 关闭
     */
    protected void onClose(int status) {
        // TODO Auto-generated method stub
        SocketService.getMessageInbound().remove(this);
        super.onClose(status);
    }


    /**
     * 流处理
     */
    protected void onBinaryMessage(ByteBuffer arg0) throws IOException {
        // TODO Auto-generated method stub
        for (MessageInbound bmsg : SocketService.getMessageInbound()) {
            ByteBuffer bb = ByteBuffer.wrap(arg0.array());
            WsOutbound wb = bmsg.getWsOutbound();
            wb.writeBinaryMessage(bb);
            wb.flush();
        }
    }

    /**
     * 字符处理
     */
    protected void onTextMessage(CharBuffer arg0) throws IOException {
        // TODO Auto-generated method stub
        for (MessageInbound msgib : SocketService.getMessageInbound()) {
            CharBuffer cb = CharBuffer.wrap(arg0);
            WsOutbound wb = msgib.getWsOutbound();
            wb.writeTextMessage(cb);
            wb.flush();
        }
    }

}

接着看web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
    xmlns="http://java.sun.com/xml/ns/j2ee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">


  <servlet>
      <servlet-name>SocketService</servlet-name>
      <servlet-class>com.websocket.WebSocketImp</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>SocketService</servlet-name>
      <url-pattern>/web</url-pattern>
  </servlet-mapping>

  <servlet>
      <servlet-name>sload</servlet-name>
      <servlet-class>com.websocket.SocketService</servlet-class>
      <load-on-startup>1</load-on-startup>
  </servlet>        
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

最后是界面，比较丑，

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
  </head>
  <script type="text/javascript">
      var ws;
      function web(){
          if('WebSocket' in window){
              ws = new WebSocket("ws://localhost:8080/websocket/web");
          }else{
              alert("不支持 websocket");
          }
          ws.onopen = function(evt){
              //alert("op");
          }
          ws.onclose =function(evt){
              alert("close");
          }
          ws.onmessage = function(evt){
              var msg = evt.data;
              if("[object Blob]" != msg){
                  var msgdiv = document.getElementById("msgtext");
                  var span = document.createElement("span");
                  span.innerHTML = msg+"<br />";
                  msgdiv.appendChild(span);
              }else{
                  var msgdiv = document.getElementById("msgtext");
                  var span = document.createElement("span");
                  var br = document.createElement("br");
                  var can = document.createElement("canvas");
                  var context = can.getContext("2d"); 
                  var image = new Image();  
                    image.onload = function () {  
                //image.height  
                context.clearRect(0, 0, can.width, can.height);  
                context.drawImage(image, 0, 0, can.width, can.height);  
            }  
            image.src = URL.createObjectURL(msg);
            span.appendChild(can);
            span.appendChild(br);
            msgdiv.appendChild(span);
              }
          }
          ws.onerror = function(evt){
              alert("error");
          }
              }
          function sendmsg(){
              ws.send("游客 ("+new Date().toLocaleTimeString()+")<br />"+document.getElementById("msg").value);
          }
          function sendbmsg(){
        var inputElement = document.getElementById("bmsg");
        var fileList = inputElement.files;

        for ( var i = 0; i < fileList.length; i++) {
            //发送
            ws.send("游客 ("+new Date().toLocaleTimeString()+")");
            //读取文件　　
　　　　　        var reader = new FileReader();
            reader.readAsArrayBuffer(fileList[i]);
            //文件读取完毕后该函数响应
            reader.onload = function loaded(evt) {
                var binaryString = evt.target.result;
                ws.send(binaryString);
            }
        }
        return false;
          }

  </script>
  <body onload="web();">
      <div>
          <h3>testing...</h3>
          <div id="msgtext">

          </div>
          <div>
              <input type="text" name="msg" id="msg" />
              <button onclick="sendmsg();">发送</button><br />
              <input type="file" name="bmsg" id="bmsg" />
              <button onclick="sendbmsg();">发送</button>
          </div>
      </div>

  </body>
</html>

一个效果图：多个不同的浏览器发信息，实现同步推送