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>
        

 

 配置成功后界面如下