SSH 项目中 使用websocket 实现网页聊天功能

参考文章  :java使用websocket，并且获取HttpSession，源码分析    http://www.cnblogs.com/zhuxiaojie/p/6238826.html

1.在项目中引入依赖

websocket遵循了javaee规范，所以需要引入javaee的包

      <dependency>
         <groupId>javax.websocket</groupId>
         <artifactId>javax.websocket-api</artifactId>
         <version>1.1</version>
         <scope>provided</scope>
     </dependency>
     <dependency>
         <groupId>javax</groupId>
         <artifactId>javaee-api</artifactId>
         <version>7.0</version>
     </dependency>

2.编写一个处理websocket请求的类

 import java.io.IOException;
 import java.util.Set;
 import java.util.concurrent.CopyOnWriteArraySet;
 import java.util.concurrent.atomic.AtomicInteger;

 import javax.servlet.http.HttpSession;
 import javax.websocket.EndpointConfig;
 import javax.websocket.OnClose;
 import javax.websocket.OnError;
 import javax.websocket.OnMessage;
 import javax.websocket.OnOpen;
 import javax.websocket.Session;
 import javax.websocket.server.ServerEndpoint;

 import org.apache.commons.logging.Log;
 import org.apache.commons.logging.LogFactory;

 import com.itheima.bos.domain.User;
 import com.itheima.bos.utils.HTMLFilter;  

 // 进行配置  websocket 通过下面的地址链接服务器
 @ServerEndpoint(value = "/ws/chat" ,configurator = HttpSessionConfigurator.class)
 public class ChatAnnotation {  

   private static final Log log = LogFactory.getLog(ChatAnnotation.class);  

   private static final String GUEST_PREFIX = "用户";
   private static final AtomicInteger connectionIds = new AtomicInteger(0);    //统计及在线人数
   private static final Set<ChatAnnotation> connections =   new CopyOnWriteArraySet<ChatAnnotation>();  

   private final String nickname;
   private Session session;
   private HttpSession httpSession;//httpsession  手动添加进来的值
   private User user = null;

   public Session getSession() {
     return session;
 }

 public void setSession(Session session) {
     this.session = session;
 }

 public HttpSession getHttpSession() {
     return httpSession;
 }

 public void setHttpSession(HttpSession httpSession) {
     this.httpSession = httpSession;
 }

 public User getUser() {
     return user;
 }

 public void setUser(User user) {
     this.user = user;
 }

 public ChatAnnotation() {
       nickname = GUEST_PREFIX + connectionIds.getAndIncrement();
   }  

   /*当websocket的客户端连接到服务器时候，这个方法就会执行，并且传递一个session会话对象来
    我们拿到这话session，就是可以给客户端发送消息*/
   @OnOpen
   public void start(Session session,EndpointConfig config) {
        HttpSession httpSession= (HttpSession) config.getUserProperties().get(HttpSession.class.getName());
       user = (User)httpSession.getAttribute("user");   //如果已经登录,在别的action中已经将一个user对象存入session中,此处直接取出
        if(user != null){
            //TODO  判断登录的用户是否已经存在于连接中
            this.session = session;
            this.httpSession = httpSession;
            connections.add(this);
            String message = String.format(" 用户  %s  %s , 当前在线人数 %s", user.getUsername(), "加入聊天.",connectionIds);
            broadcast(message);  

        }else{
            //用户未登陆
            try {
                session.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
   }  

   public static Set<ChatAnnotation> getConnections() {
     return connections;
 }

   /*客户端被关闭时候，就会自动会调用这个方法*/
   @OnClose
   public void end() {
       connections.remove(this);
       String message = String.format("- %s %s %s", user.getUsername(), "已经下线,当前用户数量是 ",connectionIds.decrementAndGet());
       broadcast(message);
   }  

   /*客户端给服务器发送消息，这个方法会自动调用，并且可以拿到发送过来的数据*/
   @OnMessage
   public void incoming(String message) {
       // Never trust the client
       String filteredMessage = String.format("%s: %s",
               user.getUsername(), HTMLFilter.filter(message.toString()));
       broadcast(filteredMessage);
   }  

   /*发生了异常自动执行*/
   @OnError
   public void onError(Throwable t) throws Throwable {
       log.error("Chat Error: " + t.toString(), t);
   }  

   /*广播：遍历客户端集，发送消息，注意发送要用的session，用session.getBasicRemote().sendText(msg)发送消息*/
   private static void broadcast(String msg) {
       for (ChatAnnotation client : connections) {//遍历所有
           try {//如果这个client已经在线
               synchronized (client) {
                   client.session.getBasicRemote().sendText(msg);//发送消息
               }
           } catch (IOException e) {//如果这个client不在线
               log.debug("Chat Error: 向用户"+client.getUser().getUsername()+"发送消息失败", e);
               connections.remove(client);
               try {
                   client.session.close();
               } catch (IOException e1) {
                   // Ignore
               }
               String message = String.format("-- %s %s", client.user.getUsername(), "已经下线.");
               broadcast(message);
           }
       }
   }

     @Override
     public int hashCode() {
         final int prime = 31;
         int result = 1;
         result = prime * result + ((user == null) ? 0 : user.hashCode());
         return result;
     }

     @Override
     public boolean equals(Object obj) {
         if (this == obj)
             return true;
         if (obj == null)
             return false;
         if (getClass() != obj.getClass())
             return false;
         ChatAnnotation other = (ChatAnnotation) obj;
         if (user == null) {
             if (other.user != null)
                 return false;
         } else if (!user.equals(other.user))
             return false;
         return true;
     }  

 }  

3.编写获取httpsesion的类,和配置这些类

由于HTTP协议与websocket协议的不同，导致没法直接从websocket中获取协议，我们必须手动添加,具体细节可参考   获取httpsession 源码分析

 import javax.servlet.http.HttpSession;
 import javax.websocket.HandshakeResponse;
 import javax.websocket.server.HandshakeRequest;
 import javax.websocket.server.ServerEndpointConfig;
 import javax.websocket.server.ServerEndpointConfig.Configurator;

 /**
  * 从websocket中获取用户session
  * 由于HTTP协议与websocket协议的不同，导致没法直接从websocket中获取协议，
  * 下面的类中写了获取HttpSession的代码，但是如果真的放出去执行，那么会报空指值异常，因为这个HttpSession并没有设置进去。
     需要我们自己来来设置HttpSession。这时候我们需要写一个监听器  下面有监听器的代码。
  *
  */
 public class HttpSessionConfigurator extends Configurator {

     @Override
     public void modifyHandshake(ServerEndpointConfig sec, HandshakeRequest request, HandshakeResponse response) {

           HttpSession httpSession = (HttpSession) request.getHttpSession();
           // ServerEndpointConfig 继承->EndpointConfig  中一个方法
           //  Map<String,Object> getUserProperties();  对这个map进行赋值
           sec.getUserProperties().put(HttpSession.class.getName(), httpSession);
     }
 }

监听器

 import javax.servlet.ServletRequestEvent;
 import javax.servlet.ServletRequestListener;
 import javax.servlet.http.HttpServletRequest;

 public class RequestListener implements ServletRequestListener {

     public void requestInitialized(ServletRequestEvent sre)  {
         //将所有request请求都携带上httpSession
         ((HttpServletRequest) sre.getServletRequest()).getSession();
     }
     public RequestListener() {
     }

     public void requestDestroyed(ServletRequestEvent arg0)  {
     }
 }

有了监听器我们需要在web.xml中配置它

 <listener>
       <listener-class>com.xwer.bos.web.websocket.RequestListener</listener-class>
   </listener>

4. 前台页面

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
     <title>即时通讯</title>
     <style type="text/css">
         input#chat {
             width: 410px
         }

         #console-container {
             width: 400px;
         }

         #console {
             border: 1px solid #CCCCCC;
             border-right-color: #999999;
             border-bottom-color: #999999;
             height: 170px;
             overflow-y: scroll;
             padding: 5px;
             width: 100%;
         }

         #console p {
             padding: 0;
             margin: 0;
         }
     </style>
     <script type="text/javascript">
         var Chat = {};

         Chat.socket = null;

         Chat.connect = (function(host) {
             if ('WebSocket' in window) {
                 Chat.socket = new WebSocket(host);
             } else if ('MozWebSocket' in window) {
                 Chat.socket = new MozWebSocket(host);
             } else {
                 Console.log('Error: WebSocket is not supported by this browser.');
                 return;
             }

             Chat.socket.onopen = function () {
                 Console.log('Info: 登录成功');
                 document.getElementById('chat').onkeydown = function(event) {
                     if (event.keyCode == 13) {
                         Chat.sendMessage();
                     }
                 };
             };

             Chat.socket.onclose = function () {
                 document.getElementById('chat').onkeydown = null;
                 Console.log('Info: 已经下线.');
             };

             Chat.socket.onmessage = function (message) {
                 Console.log(message.data);
             };
         });

         Chat.initialize = function() {
             var urls=window.location.href;
             url = urls.substring(0,urls.lastIndexOf("/")).replace("http:","");

             if (window.location.protocol == 'http:') {
                 Chat.connect('ws://' + url + '/ws/chat');
             } else {
                 Chat.connect('wss://' + url + '/ws/chat');
             }
         };

         Chat.sendMessage = (function() {
             var message = document.getElementById('chat').value;
             if (message != '') {
                 Chat.socket.send(message);
                 document.getElementById('chat').value = '';
             }
         });

         var Console = {};

         Console.log = (function(message) {
             var console = document.getElementById('console');
             var p = document.createElement('p');
             p.style.wordWrap = 'break-word';
             p.innerHTML = message;
             console.appendChild(p);
             while (console.childNodes.length > 25) {
                 console.removeChild(console.firstChild);
             }
             console.scrollTop = console.scrollHeight;
         });

         //关闭WebSocket连接
          function closeWebSocket() {
              Chat.socket.close();
          }

         //发送消息
         function sendMessage(){
             Chat.sendMessage();
         }
         Chat.initialize();

     </script>
 </head>
 <body>
 <noscript><h2 style="color: #ff0000">浏览器不支持websocket</h2></noscript>
 <div>
     <p>
         <input type="text" placeholder="按下 enter键开始聊天 " id="chat">
         <button onclick="sendMessage()">发送消息</button>
     </p>
     <div id="console-container">
         <div id="console"></div>
     </div>

        <hr/>
     <button onclick="closeWebSocket()">关闭连接</button>
   <hr/>
 </div>
 </body>
 </html>

5. 由于使用了Struts框架,在Struts配置文件中配置,不过滤WS请求

     <!--不拦截ws请求 -->
     <constant name="struts.action.excludePattern" value="/ws/chat"></constant>
         

配置成功后界面如下