1、什么是WebSocket
WebSocket是HTML5开始提供的一种浏览器和服务器间进行全双工通讯的网络技术。
在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
2、开发环境
eclipse-jee-indigo-SR2-win32
apache-tomcat-7.0.29
tomcat从7.0.27开始支持WebSocket,目前最新版(截至2012.8.17)是7.0.29,相对7.0.27有改进
3、开发步骤
3.1 创建 Dynamic Web Project,Target runtime 选择 apache-tomcat-7.0.29
3.2 创建一个servlet来响应WebSocket的请求
package websocket;
import javax.servlet.http.HttpServletRequest;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
/**
*
* @author allan_he
*这个Servlet继承自WebSocketServlet,实现createWebSocketInbound方法
*/
public class MyWebSocketServlet extends WebSocketServlet {
private static final long serialVersionUID = 7648892814938958971L;
/**
* 这是tomcat7.0.27的写法
@Override
protected StreamInbound createWebSocketInbound(String arg0) {
System.out.println("#########################################");
return new MyMessageInbound();
}
*/
/**
* 这是tomcat7.0.29的写法, 与7.0.27不同的,Tomcat改变了createWebSocketInbound方法的定义,
* 增加了一个HttpServletRequest参数, 这样我们也可以从request参数中获取更多请求方的信息
* 返回一个自定义的MyMessageInbound,它继承自MessageInbound
* MessageInbound是StreamInbound的子类
* */
@Override
protected StreamInbound createWebSocketInbound(String arg0,
HttpServletRequest arg1) {
System.out.println("#########################################");
return new MyMessageInbound();
}
}
3.3 创建MessageInbound的子类,用于处理每一次WebSocket任务
package websocket;
import init.InitServlet;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.WsOutbound;
/**
* @author allan_he
*用于处理每一次WebSocket任务
*需要实现四个事件处理函数,其中onOpen和onClose有默认实现
*/
public class MyMessageInbound extends MessageInbound {
/**
* 有二进制消息数据到达,暂时没研究出这个函数什么情况下触发,
* js的WebSocket按理说应该只能send文本信息才对
*/
@Override
protected void onBinaryMessage(ByteBuffer arg0) throws IOException {
// TODO Auto-generated method stub
}
// 有文本消息数据到达
@Override
protected void onTextMessage(CharBuffer msg) throws IOException {
for (MessageInbound messageInbound : InitServlet.getSocketList()) {
CharBuffer buffer = CharBuffer.wrap(msg);
// getWsOutbound可以返回当前的WsOutbound,通过他向客户端回传数据,这里采用的是nio的CharBuffer
WsOutbound outbound = messageInbound.getWsOutbound();
outbound.writeTextMessage(buffer);
outbound.flush();
}
}
/**
* WebSocket关闭事件,参数status应该来自org.apache.catalina.websocket.Constants中定义的几个常量,
* 可以参考文档或者核对一下Tomcat的源码
*/
@Override
protected void onClose(int status) {
InitServlet.getSocketList().remove(this);
super.onClose(status);
}
// WebSocket握手完成,创建完毕,WsOutbound用于向客户端发送数据
@Override
protected void onOpen(WsOutbound outbound) {
super.onOpen(outbound);
InitServlet.getSocketList().add(this);
}
}
3.4 创建用于初始化的servlet
package init;
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 InitServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 5218126862760826639L;
private static List<MessageInbound> socketList;
public void init(ServletConfig config) throws ServletException {
InitServlet.socketList = new ArrayList<MessageInbound>();
super.init(config);
System.out.println("Server start============");
}
public static synchronized List<MessageInbound> getSocketList() {
return InitServlet.socketList;
}
}
3.5配置web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>wsoc</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>mywebsocket</servlet-name>
<servlet-class>websocket.MyWebSocketServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>mywebsocket</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>initServlet</servlet-name>
<servlet-class>init.InitServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
</web-app>
3.6 创建测试页面,注意路径要正确,否则连接不上
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Index</title>
<script type="text/javascript">
var ws = null;
function startWebSocket() {
if ('WebSocket' in window){
ws = new WebSocket("ws://localhost:8080/html5WebSocket/mywebsocket.do");
}
else if ('MozWebSocket' in window)
ws = new MozWebSocket("ws://localhost:8080/html5WebSocket/mywebsocket.do");
else
alert("not support");
ws.onmessage = function(evt) {
//alert(evt.data);
document.getElementById('chatMessage').innerHTML=evt.data;
};
ws.onclose = function(evt) {
alert("close");
};
ws.onopen = function(evt) {
alert("open");
};
}
function sendMsg() {
ws.send(document.getElementById('writeMsg').value);
}
</script>
</head>
<body οnlοad="startWebSocket();">
<input type="text" id="writeMsg"></input>
<input type="button" value="send" οnclick="sendMsg()"></input>
<div id="chatMessage"></div>
</body>
</html>