基于Tomcat7、Java、WebSocket的服务器推送聊天室 (转)

前言


        HTML5 WebSocket实现了服务器与浏览器的双向通讯，双向通讯使服务器消息推送开发更加简单，最常见的就是即时通讯和对信息实时性要求比较高的应用。以前 的服务器消息推送大部分采用的都是“轮询”和“长连接”技术，这两中技术都会对服务器产生相当大的开销，而且实时性不是特别高。WebSocket技术对 只会产生很小的开销，并且实时性特别高。下面就开始讲解如何利用WebSocket技术开发聊天室。在这个实例中，采用的是Tomcat7服务器，每个服 务器对于WebSocket的实现都是不一样的，所以这个实例只能在Tomcat服务器中运行，不过目前Spring已经推出了WebSocket的 API，能够兼容各个服务器的实现，大家可以查阅相关的资料进行了解，在这里就不介绍了，下图是聊天室的效果图：

        在这里实例中，实现了消息的实时推送，还实现了聊天用户的上下线通知。下面就开始具体讲解如何实现。

后台处理


        Tomcat实现WebSocket的主要是依靠org.apache.catalina.websocket.MessageInbound这个类，这 个类的在{TOMCAT_HOME}/lib/catalina.jar中，所以你开发的时候需要将catalina.jar和tomcat- coyote.jar引入进来，下面这段代码就是暴露给客户端连接地址的Servlet：

[java] view plaincopy
 
  1. package import import import @WebServlet})  
  2. //如果要接收浏览器的ws://协议的请求就必须实现WebSocketServlet这个类 publicclassextends privatestaticfinallong publicstaticint;  
  3. public return);  
  4.   
  5.   
  6. protected returnnewthis }  
        这个Servlet跟普通的Servlet有些不同，继承的WebSocketServlet类，并且要重写 createWebSocketInbound方法。这个类中Session中的user属性是用户进入index.jsp的时候设置的，记录当前用户的 昵称。下面就是自己实现的WebSocket连接对象类WebSocketMessageInbound类的代码：
[java] view plaincopy
 
  1. package import import import import import import publicclassextends   
  2. privatefinal public this public returnthis   
  3.   
  4. protectedvoid   
  5. new , );  
  6. , this   
  7. new , );  
  8. , WebSocketMessageInboundPool.getOnlineUser());  
  9.   
  10. this   
  11. this   
  12. protectedvoidint   
  13. this new , );  
  14. , this   
  15.   
  16. protectedvoidthrows thrownew   
  17.   
  18. protectedvoidthrows   
  19. }  

     代码中的主要实现了onOpen、onClose、onTextMessage方法，分别处理用户上线、下线、发送消息。在这个类中有个 WebSocketMessageInboundPool连接池类，这个类是用来管理目前在线的用户的连接，下面是这个类的代码：
[java] view plaincopy
 
  1. package import import import import import publicclass   
  2. privatestaticfinalnew   
  3. publicstaticvoid   
  4.   
  5. publicstatic return publicstaticvoid   
  6. publicstaticvoid try   
  7. ifnull catch   
  8. publicstaticvoid try for ifnull catch }  

前台展示


    上面的代码就是聊天室后台的代码，主要是由3个对象组成，Servlet、连接对象、连接池，下面就是前台的代码，前台的代码主要是实现与服务器进行连 接，展示用户列表及信息列表，前台的展示使用了Ext框架，不熟悉Ext的同学可以初步的了解下Ext，下面的是index.jsp的代码：
[html] view plaincopy
 
  1. <= = =%> <  = (String)session.getAttribute("user");  
  2.  == null){  
  3.  =  + WebSocketMessageServlet.ONLINE_USER_COUNT;  
  6. > <html> <head> <title></title>   
  7. <link= = => <link= = = /> <link= = = />   
  8. <script= =></script> <script= =></script> <script=>  = ;  
  9. </script> </head> <body> <h1></h1> <p></p> <ul= => <li></li> <li></li> <li></li> <li></li> </ul> <div=></div> </body> </html>  
       页面的展示主要是在websocket.js中进行控制，下面是websocket.jsd的代码：

[javascript] view plaincopy
 
  1. //用于展示用户的聊天信息 'MessageContainer' ,  
  2. true false ,  
  3. ,  
  4. ,  
  5. ,  
  6. ,  
  7.   
  8. ,  
  9. ],  
  10. function varthis , {  
  11. ,  
  12. , , , ]  
  13. , {  
  14. ,  
  15.   
  16. function varthis ] = Ext.Date.format(new]),  
  17. );  
  18. if ;  
  19. else ;  
  20. if });  
      这段代码主要是实现了展示消息的容器，下面就是页面加载完成后开始执行的代码：

[javascript] view plaincopy
 
  1. Ext.onReady(function   
  2. var, {  
  3. ,  
  4. false false false function function iftrue   
  5. var, {  
  6.   
  7. var, {  
  8. ,  
  9. ,  
  10. ,  
  11. var   
  12. function if new));  
  13. function   
  14. );  
  15. function   
  16. );  
  17. function   
  18. );  
  19.   
  20. function var   
  21. if) {  
  22. elseif) {  
  23.   
  24. var function var ,  
  25. true elseif) {  
  26.   
  27. var var var ,  
  28. true elseif) {  
  29.   
  30. var var var,user);  
  31.   
  32. var, {  
  33. ,  
  34. false ,  
  35. false true true true ,  
  36. , {  
  37. ,  
  38. true var + user;  
  39.   
  40. var, {  
  41. ,  
  42. ,  
  43. ,  
  44. ,  
  45. false function   
  46. function var ifnull if new   
  47.   
  48. );  
  49. else , );  
  50.         });  
      上面的代码就是页面完成加载后自动连接服务器，并创建展示界面的代码。

注意


        需要注意的两点，在部署完成之后需要将在tomcat应用目录中的lib目录下的catalina.jar和tomcat-coyote.jar删掉，比 如项目的lib目录在D:\workspace\WebSocket\WebRoot\WEB-INF\lib，而部署的应用lib目录是在D: \tools\apache-tomcat-7.0.32\webapps\WebSocket\WEB-INF\lib，删掉部署目录的lib目录中连 两个jar就可以了，否则会包Could not initialize class com.ibcio.WebSocketMessageServlet错误，切记。
    如果还是无法建立连接，请下载最新的tomcat，忘了是那个版本的tomcatcreateWebSocketInbound是没有request参数的，现在的这个代码是有这个参数了，7.0.3XX版本都是带这个参数的，切记。

总结


       使用WebSocket开发服务器推送非常方便，这个是个简单的应用，其实还可以结合WebRTC实现视频聊天和语音聊天。在我的Leetop项目中已经实现了浏览器端视频聊天的功能，大家可以去看看 www.ibcio.com，在我的另外一篇文章中有详细的介绍：http://blog.csdn.net/leecho571/article/details/8207102，下图就是Leetop项目的效果图：


实例下载


posted @ 2014-07-28 17:58  mr.g.  阅读(1062)  评论(1)  编辑  收藏  举报