测试一下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
1 package com.websocket; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 import javax.servlet.ServletConfig; 7 import javax.servlet.ServletException; 8 import javax.servlet.http.HttpServlet; 9 10 import org.apache.catalina.websocket.MessageInbound; 11 12 public class SocketService extends HttpServlet { 13 14 private static List<MessageInbound> socketList; 15 16 public void init(ServletConfig config) throws ServletException { 17 // TODO Auto-generated method stub 18 SocketService.socketList = new ArrayList<MessageInbound>(); 19 super.init(config); 20 } 21 22 public static List<MessageInbound> getMessageInbound() { 23 return SocketService.socketList; 24 25 } 26 }
再创建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>
一个效果图：多个不同的浏览器发信息，实现同步推送