基于Tomcat7的WebSocket.兼容IE(客户端需Flash10)

有点时间.研究了一下.发现Tomcat7.0.27 和jetty 都有支持.

把这个几天研究的结果记录一下

检索资料:

基于Tomcat的WebSocket(5月8日更新)

jquery websocket 插件

Flash Socket通信的安全策略问题 843端口

C++与Flex之间socket通信policy-file-request解决方案

https://github.com/gimite/web-socket-js 这插件用来做兼容性的

服务端程序直接拿 Tomcat示例源码. 代码位置见Tomcat_HOME\webapps\examples\WEB-INF\classes\websocket\chat\*

有几个问题备注:

1. Tomcat 7.0.27 版本 20秒如果不发送消息,就会掉线. 基于Tomcat的WebSocket(5月8日更新) 这里 19楼 yaolifei 童鞋的回答.我的做法就是每隔10秒发送一个字符到服务器. 好在下一版会解决.

2. 当前的7.0.27版本 ,WebScoket中 request.getSession() 获取不到任何东西.经过测试观察.还会把整个当前站点的session销毁. 所以在网上也看到直接在websocketServlet中获取session.十分的不解.(设置会话属性在其他普通servlet中)

3. flash的安全机制问题.需要服务器另开一个843端口的socket连接.用来处理策略文件.和flex在http交互中的crossdomain类似.

4. 目前我处理不能获取session,是通过连接websocket时传递参数来实现的.不知道有没有其他方式

5. 测试过程中发现 opera , IE9 , qq浏览器(包括360这样的) 都不支持websocket . 但是遨游支持了.

代码片段:

　　web.xml

     <listener>  //这里用于启动和关闭843端口的socket<listener-class>cn.vs9.chat.listener.ServletContextListener</listener-class></listener> <servlet>  //这个直接抄Tomcat示例<servlet-name>chat</servlet-name><servlet-class>cn.vs9.chat.servlet.websocket.ChatWebSocketServlet</servlet-class></servlet><servlet-mapping><servlet-name>chat</servlet-name><url-pattern>/chat/chat.htm</url-pattern></servlet-mapping>

聊天页面: web-socket-js 判断当前浏览器是否原声支持websocket,如果不支持,就使用flash

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title></title>
<style>
</style>
<script type="text/javascript" src="scripts/swfobject.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/web_socket.js"></script>
<script type="text/javascript" src="scripts/jquery.WebSocket.js"></script><script>
var ws;
var WEB_SOCKET_SWF_LOCATION = 'media/WebSocketMain.swf';
var WEB_SOCKET_DEBUG = true;$(function() {$("#sendBtn").on("click",send);connection();});function connection(){ws = $.websocket({  domain:"127.0.0.1", protocol:"WebSocketDemo/chat/chat.htm" , onOpen:function(event){  showMessage("已成功登录");  },  onError:function(event){alert("error:"+ event)},  onMessage:function(result){  receiveMessage(result);},onClose:function(event){ws = null;}});  }function send(){if(!ws){alert("已经断开聊天室");return;}var msg=$.trim($("#messageInput").val());if(msg==""){return;}ws.send(msg);  $("#messageInput").val("").focus();;}function receiveMessage(result){showMessage(result);}function showMessage(msg){$("#public").append("<div>"+msg+"</div>");}</script>
</head>
<body><div id="public" style="height:500px;border:1px solid;"></div><div class="input"><input type="text" id="messageInput" onKeyDown="if (event.keyCode==13)$('#sendBtn').click()" maxlength="100" size="40" tabindex="1" /> <input type="button"  id="sendBtn" value="提交" > </div></body>
</html>

效果: 据说是IE8 也能,我的是IE9,有兴趣的测试吧

上源码:

WebScoket Demo下载地址