WebSocket在tomcat7.0.29上的应用

xxg0

2012-08-17

关注关注

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 onload="startWebSocket();">
<input type="text" id="writeMsg"></input>
<input type="button" value="send" onclick="sendMsg()"></input>
<div id="chatMessage"></div>
</body>
</html>

websocket 和服