有點時間.研究了一下.發現Tomcat7.0.27 和jetty 都有支持.
把這個幾天研究的結果記錄一下
檢索資料:
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,有興趣的測試吧
上源碼: