基于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下载地址
页:
[1]