`
zzc1684
  • 浏览: 1190447 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

基于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下载地址

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics