HTML5WebSocket实时推送信息测试demo

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

HTML5WebSocket实时推送信息测试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
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="/xml/ns/j2ee"
xmlns:xsi="/2001/XMLSchema-instance"
xsi:schemaLocation="/xml/ns/j2ee
/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">

</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>
⼀个效果图：多个不同的浏览器发信息，实现同步推送。