您的位置: 首页  >  文章  >  基于Tomcat7、Java、WebSocket的服务器推送聊天室 .

基于Tomcat7、Java、WebSocket的服务器推送聊天室 .

分类: 文章 • 2023-10-27 13:33:28

前言

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

后台处理

 
        Tomcat实现WebSocket的主要是依靠org.apache.catalina.websocket.MessageInbound这个类，这个类的在{TOMCAT_HOME}/lib/catalina.jar中，所以你开发的时候需要将catalina.jar和tomcat-coyote.jar引入进来，下面这段代码就是暴露给客户端连接地址的Servlet：
 
[java] view plaincopy
 
  1. package com.ibcio;  
  2.   
  3. import javax.servlet.annotation.WebServlet;  
  4. import javax.servlet.http.HttpServletRequest;  
  5.   
  6. import org.apache.catalina.websocket.StreamInbound;  
  7.   
  8. @WebServlet(urlPatterns = { "/message"})  
  9. //如果要接收浏览器的ws://协议的请求就必须实现WebSocketServlet这个类  
  10. public class WebSocketMessageServlet extends org.apache.catalina.websocket.WebSocketServlet {  
  11.   
  12.     private static final long serialVersionUID = 1L;  
  13.       
  14.     public static int ONLINE_USER_COUNT = 1;  
  15.       
  16.     public String getUser(HttpServletRequest request){  
  17.         return (String) request.getSession().getAttribute("user");  
  18.     }  
  19.   
  20.     //跟平常Servlet不同的是，需要实现createWebSocketInbound，在这里初始化自定义的WebSocket连接对象  
  21.     @Override  
  22.     protected StreamInbound createWebSocketInbound(String subProtocol,HttpServletRequest request) {  
  23.         return new WebSocketMessageInbound(this.getUser(request));  
  24.     }  
  25. }  
        这个Servlet跟普通的Servlet有些不同，继承的WebSocketServlet类，并且要重写createWebSocketInbound方法。这个类中Session中的user属性是用户进入index.jsp的时候设置的，记录当前用户的昵称。下面就是自己实现的WebSocket连接对象类WebSocketMessageInbound类的代码：
[java] view plaincopy
 
  1. package com.ibcio;  
  2.   
  3. import java.io.IOException;  
  4. import java.nio.ByteBuffer;  
  5. import java.nio.CharBuffer;  
  6.   
  7. import net.sf.json.JSONObject;  
  8.   
  9. import org.apache.catalina.websocket.MessageInbound;  
  10. import org.apache.catalina.websocket.WsOutbound;  
  11.   
  12. public class WebSocketMessageInbound extends MessageInbound {  
  13.   
  14.     //当前连接的用户名称  
  15.     private final String user;  
  16.   
  17.     public WebSocketMessageInbound(String user) {  
  18.         this.user = user;  
  19.     }  
  20.   
  21.     public String getUser() {  
  22.         return this.user;  
  23.     }  
  24.   
  25.     //建立连接的触发的事件  
  26.     @Override  
  27.     protected void onOpen(WsOutbound outbound) {  
  28.         // 触发连接事件，在连接池中添加连接  
  29.         JSONObject result = new JSONObject();  
  30.         result.element("type", "user_join");  
  31.         result.element("user", this.user);  
  32.         //向所有在线用户推送当前用户上线的消息  
  33.         WebSocketMessageInboundPool.sendMessage(result.toString());  
  34.           
  35.         result = new JSONObject();  
  36.         result.element("type", "get_online_user");  
  37.         result.element("list", WebSocketMessageInboundPool.getOnlineUser());  
  38.         //向连接池添加当前的连接对象  
  39.         WebSocketMessageInboundPool.addMessageInbound(this);  
  40.         //向当前连接发送当前在线用户的列表  
  41.         WebSocketMessageInboundPool.sendMessageToUser(this.user, result.toString());  
  42.     }  
  43.   
  44.     @Override  
  45.     protected void onClose(int status) {  
  46.         // 触发关闭事件，在连接池中移除连接  
  47.         WebSocketMessageInboundPool.removeMessageInbound(this);  
  48.         JSONObject result = new JSONObject();  
  49.         result.element("type", "user_leave");  
  50.         result.element("user", this.user);  
  51.         //向在线用户发送当前用户退出的消息  
  52.         WebSocketMessageInboundPool.sendMessage(result.toString());  
  53.     }  
  54.   
  55.     @Override  
  56.     protected void onBinaryMessage(ByteBuffer message) throws IOException {  
  57.         throw new UnsupportedOperationException("Binary message not supported.");  
  58.     }  
  59.   
  60.     //客户端发送消息到服务器时触发事件  
  61.     @Override  
  62.     protected void onTextMessage(CharBuffer message) throws IOException {  
  63.         //向所有在线用户发送消息  
  64.         WebSocketMessageInboundPool.sendMessage(message.toString());  
  65.     }  
  66. }  

     代码中的主要实现了onOpen、onClose、onTextMessage方法，分别处理用户上线、下线、发送消息。在这个类中有个WebSocketMessageInboundPool连接池类，这个类是用来管理目前在线的用户的连接，下面是这个类的代码：
[java] view plaincopy
 
  1. package com.ibcio;  
  2.   
  3. import java.io.IOException;  
  4. import java.nio.CharBuffer;  
  5. import java.util.HashMap;  
  6. import java.util.Map;  
  7. import java.util.Set;  
  8.   
  9. public class WebSocketMessageInboundPool {  
  10.   
  11.     //保存连接的MAP容器  
  12.     private static final Map<String,WebSocketMessageInbound > connections = new HashMap<String,WebSocketMessageInbound>();  
  13.       
  14.     //向连接池中添加连接  
  15.     public static void addMessageInbound(WebSocketMessageInbound inbound){  
  16.         //添加连接  
  17.         System.out.println("user : " + inbound.getUser() + " join..");  
  18.         connections.put(inbound.getUser(), inbound);  
  19.     }  
  20.       
  21.     //获取所有的在线用户  
  22.     public static Set<String> getOnlineUser(){  
  23.         return connections.keySet();  
  24.     }  
  25.       
  26.     public static void removeMessageInbound(WebSocketMessageInbound inbound){  
  27.         //移除连接  
  28.         System.out.println("user : " + inbound.getUser() + " exit..");  
  29.         connections.remove(inbound.getUser());  
  30.     }  
  31.       
  32.     public static void sendMessageToUser(String user,String message){  
  33.         try {  
  34.             //向特定的用户发送数据  
  35.             System.out.println("send message to user : " + user + " ,message content : " + message);  
  36.             WebSocketMessageInbound inbound = connections.get(user);  
  37.             if(inbound != null){  
  38.                 inbound.getWsOutbound().writeTextMessage(CharBuffer.wrap(message));  
  39.             }  
  40.         } catch (IOException e) {  
  41.             e.printStackTrace();  
  42.         }  
  43.     }  
  44.       
  45.     //向所有的用户发送消息  
  46.     public static void sendMessage(String message){  
  47.         try {  
  48.             Set<String> keySet = connections.keySet();  
  49.             for (String key : keySet) {  
  50.                 WebSocketMessageInbound inbound = connections.get(key);  
  51.                 if(inbound != null){  
  52.                     System.out.println("send message to user : " + key + " ,message content : " + message);  
  53.                     inbound.getWsOutbound().writeTextMessage(CharBuffer.wrap(message));  
  54.                 }  
  55.             }  
  56.         } catch (IOException e) {  
  57.             e.printStackTrace();  
  58.         }  
  59.     }  
  60. }  
 

前台展示

 
    上面的代码就是聊天室后台的代码，主要是由3个对象组成，Servlet、连接对象、连接池，下面就是前台的代码，前台的代码主要是实现与服务器进行连接，展示用户列表及信息列表，前台的展示使用了Ext框架，不熟悉Ext的同学可以初步的了解下Ext，下面的是index.jsp的代码：
[html] view plaincopy
 
  1. <%@ page language="java" pageEncoding="UTF-8" import="com.ibcio.WebSocketMessageServlet"%>  
  2. <%  
  3.     String user = (String)session.getAttribute("user");  
  4.     if(user == null){  
  5.         //为用户生成昵称  
  6.         user = "游客" + WebSocketMessageServlet.ONLINE_USER_COUNT;  
  7.         WebSocketMessageServlet.ONLINE_USER_COUNT ++;  
  8.         session.setAttribute("user", user);  
  9.     }  
  10.     pageContext.setAttribute("user", user);  
  11. %>  
  12. <html>  
  13. <head>  
  14.     <title>WebSocket 聊天室</title>  
  15.     <!-- 引入CSS文件 -->  
  16.     <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css">  
  17.     <link rel="stylesheet" type="text/css" href="ext4/shared/example.css" />  
  18.     <link rel="stylesheet" type="text/css" href="css/websocket.css" />  
  19.       
  20.     <!-- 映入Ext的JS开发包，及自己实现的webscoket. -->  
  21.     <script type="text/javascript" src="ext4/ext-all-debug.js"></script>  
  22.     <script type="text/javascript" src="websocket.js"></script>  
  23.     <script type="text/javascript">  
  24.         var user = "${user}";  
  25.     </script>  
  26. </head>  
  27.   
  28. <body>  
  29.     <h1>WebSocket聊天室</h1>  
  30.     <p>通过HTML5标准提供的API与Ext富客户端框架相结合起来，实现聊天室，有以下特点：</p>  
  31.     <ul class="feature-list" style="padding-left: 10px;">  
  32.         <li>实时获取数据，由服务器推送，实现即时通讯</li>  
  33.         <li>利用WebSocket完成数据通讯，区别于轮询，长连接等技术，节省服务器资源</li>  
  34.         <li>结合Ext进行页面展示</li>  
  35.         <li>用户上线下线通知</li>  
  36.     </ul>  
  37.     <div id="websocket_button"></div>  
  38. </body>  
  39. </html>  
      页面的展示主要是在websocket.js中进行控制，下面是websocket.jsd的代码：
 
 

相关推荐