WebSocket整合SSM(Spring,Struts2,Maven)

時間 2019-11-30

標籤 websocket 整合 ssm spring struts2 struts maven 欄目 Spring 简体版

原文原文鏈接

1、WebSocket與HTTP長輪詢javascript

　　WebSocket 屬於HTML5 規範的一部分，提供的一種在單個 TCP 鏈接上進行全雙工通信的協議。容許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只須要完成一次握手，二者之間就直接能夠建立持久性的鏈接，並進行雙向數據傳輸。（Tomcat 8以上版本支持）html

　　HTTP 協議是一種無狀態的、無鏈接的、單向的應用層協議。它採用了請求/響應模型。通訊請求只能由客戶端發起，服務端對請求作出應答處理。這種通訊模型有一個弊端：HTTP 協議沒法實現服務器主動向客戶端發起消息。java

　　HTTP長輪詢：客戶端向服務器發送(http)Ajax請求，服務器接到請求後hold住鏈接，直到有新消息才返回響應信息並關閉鏈接，客戶端處理完響應信息後再向服務器發送新的請求。jquery

　　WebSocket與HTTP長輪詢的通訊機制以下：web

2、客戶端如何使用WebSocketspring

　　瀏覽器經過 JavaScript 向服務器發出創建 WebSocket 鏈接的請求，鏈接創建之後，客戶端和服務器端就能夠經過 TCP 鏈接直接交換數據。後端

　　當你獲取 Web Socket 鏈接後，你能夠經過 send() 方法來向服務器發送數據，並經過 onmessage 事件來接收服務器返回的數據。api

1. 建立 WebSocket 對象API瀏覽器

　　//第一個參數 url, 指定鏈接的 URL。第二個參數 protocol 是可選的，指定了可接受的子協議。　　安全

　　API：var webSocket = new WebSocket(url, [protocol] );

2. WebSocket 屬性

如下是 WebSocket 對象的屬性。假定咱們使用了以上代碼建立了 Socket 對象：

屬性	描述
Socket.readyState	只讀屬性 readyState 表示鏈接狀態，能夠是如下值： 0 - 表示鏈接還沒有創建。 1 - 表示鏈接已創建，能夠進行通訊。 2 - 表示鏈接正在進行關閉。 3 - 表示鏈接已經關閉或者鏈接不能打開。
Socket.bufferedAmount	只讀屬性 bufferedAmount 已被 send() 放入正在隊列中等待傳輸，可是尚未發出的 UTF-8 文本字節數。

屬性

描述

Socket.readyState

只讀屬性 readyState 表示鏈接狀態，能夠是如下值：

0 - 表示鏈接還沒有創建。
1 - 表示鏈接已創建，能夠進行通訊。
2 - 表示鏈接正在進行關閉。
3 - 表示鏈接已經關閉或者鏈接不能打開。

Socket.bufferedAmount

只讀屬性 bufferedAmount 已被 send() 放入正在隊列中等待傳輸，可是尚未發出的 UTF-8 文本字節數。

3. WebSocket 事件

如下是 WebSocket 對象的相關事件。假定咱們使用了以上代碼建立了 Socket 對象：

事件	事件處理程序	描述
open	Socket.onopen	鏈接創建時觸發
message	Socket.onmessage	客戶端接收服務端數據時觸發
error	Socket.onerror	通訊發生錯誤時觸發
close	Socket.onclose	鏈接關閉時觸發

4. WebSocket 方法

如下是 WebSocket 對象的相關方法。假定咱們使用了以上代碼建立了 Socket 對象：

方法	描述
Socket.send()	使用鏈接發送數據
Socket.close()	關閉鏈接

5. WebSocket 實例

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" src="../js/jquery.min.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Testing WebSocket</title>
</head>
<script type="text/javascript"> var webSocket; $(document).ready(function() { //var IP = window.location.host;
        var url = "ws://your IP/demo/ws/websocket"; //判斷當前瀏覽器是否支持WebSocket
        if ('WebSocket' in window) { //創建客戶端websocket 
            webSocket = new WebSocket(url); } else { console.log("您的瀏覽器不支持WebSocket"); } //封裝內部監聽事件
 function init(){ //鏈接發生錯誤的回調方法
            webSocket.onerror = function(event) { console.log("webSocket鏈接發生錯誤."); }; //鏈接成功創建的回調方法
            webSocket.onopen = function(event) { console.log("webSocket鏈接成功."); //心跳檢測重置
 heartCheck.start(); }; //接收到消息的回調方法
            webSocket.onmessage = function(event) { //拿到任何消息都說明當前鏈接是正常的
                if(event.data=="&"){ console.log("收到心跳回復"+event.data); }else{ console.log("接收到消息="+event.data); onMessage(event); } heartCheck.start(); }; //鏈接關閉的回調方法 // 斷線重連
            webSocket.onclose = function() { console.log("webSocket鏈接斷開"); } //監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket鏈接，防止鏈接還沒斷開就關閉窗口，server端會拋異常。
            window.onbeforeunload = function() { webSocket.close(); console.log("窗口關閉，webSocket斷開鏈接."); } } function onMessage(event) { setMessageInnerHTML(event.data); } function postToServer() { webSocket.send(document.getElementById("msg").value); console.log("向服務器發送消息="+document.getElementById("msg").value); document.getElementById("msg").value = ""; } //將消息顯示在網頁上
 function setMessageInnerHTML(innerHTML) { document.getElementById('message').innerHTML += innerHTML + '<br/>'; } function onClose(){ webSocket.close(); } }); //心跳檢測
    var heartCheck = { timeout: 10000, timeoutObj: null, serverTimeoutObj: null, start: function(){ console.log("start heartCheck"); var self = this; this.timeoutObj && clearTimeout(this.timeoutObj); this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj); this.timeoutObj = setTimeout(function(){ //這裏發送一個心跳，後端收到後，返回一個心跳消息，
          console.log('發送心跳&'); webSocket.send("&"); self.serverTimeoutObj = setTimeout(function() { console.log(webSocket); console.log("服務器心跳回復超時"); webSocket.close(); }, self.timeout); }, this.timeout) } } </script>

<body>

    <textarea id="message" readonly></textarea>    <br />    
    <input id="msg" type="text" />    
    <button type="submit" id="sendButton" onClick="postToServer()">Send!</button>    
    <button type="submit" id="sendButton" onClick="onClose()">End</button>

<script type="text/javascript" src="../js/webSocket.js"></script>
</body>
</html>

3、服務器端如何使用WebSocket

1. pom.xml文件引入對應的依賴包：

       <!-- webSocket 開始-->
        <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>
            <scope>provided</scope>
        </dependency>
        <!-- webSocket 結束-->

2. spring配置文件配置websocket服務類

    <!-- websocket -->
     <bean id="webSocketService" class="minyuantec.tvwall.service.impl.WebSocketServiceImpl" scope="singleton">
     </bean>

3. struts2配置文件過濾websocket請求

<!-- 過濾掉ws請求 -->
<constant name="struts.action.excludePattern" value="/ws/.*,ws://.*"></constant>

4. 定義Websocket.java類

@ServerEndpoint("/ws/websocket") public class WebSocket { private static Logger logger = Logger.getLogger(WebSocket.class); @SuppressWarnings("static-access") private MessageHandler messageHandler = getWebSocketService().messageHandler; //靜態變量，用來記錄當前在線鏈接數。應該把它設計成線程安全的
    public static int onlineCount = 0; //與某個客戶端的鏈接會話，須要經過它來給客戶端發送數據
    public Session session; /** * 鏈接創建成功調用的方法 * @param session 可選的參數。session爲與某個客戶端的鏈接會話，須要經過它來給客戶端發送數據 */ @OnOpen public void onOpen(Session session){ this.session = session; WebSocketMapUtil.put(session.getId(),this);//存入map
        addOnlineCount();           //在線數加1
 messageHandler.onConnect(session.getId()); System.out.println("有新鏈接加入！當前在線人數爲" + getOnlineCount()); logger.info("有新鏈接加入！當前在線人數爲" + getOnlineCount()); } /** * 鏈接關閉調用的方法 */ @OnClose public void onClose(){ WebSocketMapUtil.remove(session.getId()); //從map中刪除
        subOnlineCount();           //在線數減1
 messageHandler.onDisconnect(session.getId()); try { if(session != null){ session.close(); } } catch (IOException e) { e.printStackTrace(); } System.out.println("有一鏈接關閉！當前在線人數爲" + getOnlineCount()); logger.info("有一鏈接關閉！當前在線人數爲" + getOnlineCount()); } /** * 收到客戶端消息後調用的方法 * @param message 客戶端發送過來的消息 * @param session 可選的參數 */ @OnMessage public String onMessage(String message, Session session) { System.out.println("來自客戶端的消息:" + message); logger.info("來自客戶端的消息:" + message); if (message.equals("&")){ return "&"; }else{ messageHandler.onMessage(session.getId(),message); return "Got your message ("+ message +")"; } } /** * 發生錯誤時調用 * @param session * @param error */ @OnError public void onError(Session session, Throwable error){ System.out.println("發生錯誤"); logger.info("發生錯誤:" + error); error.printStackTrace(); } //單發消息
    public void sendMessage(String message) throws IOException{ //阻塞式（同步） //this.session.getBasicRemote().sendText(message); //非阻塞式（異步）
        this.session.getAsyncRemote().sendText(message); } //羣發消息
    public void sendMessageAll(String message) throws IOException{ for(WebSocket webSocket : WebSocketMapUtil.getValues()){ webSocket.sendMessage(message); } } public static synchronized int getOnlineCount() { return onlineCount; } public static synchronized void addOnlineCount() { WebSocket.onlineCount++; } public static synchronized void subOnlineCount() { WebSocket.onlineCount--; } public WebSocketServiceImpl getWebSocketService(){ ClassPathXmlApplicationContext classPathXmlApplicationContext = new ClassPathXmlApplicationContext("classpath*:applicationContext.xml"); return (WebSocketServiceImpl) classPathXmlApplicationContext.getBean("webSocketService"); } }

5. 在WebSocketServiceImpl實現類裏實現服務器推送消息的方法

@Override public boolean sendMessage(String message) { logger.info("發送給客戶端的websocket消息message=="+message); if (messageHandler == null) { logger.info("上層調用者沒有給messageHandler賦值，websocket消息沒法發送到客戶端"); return false; } if (message == null || "".equals(message)) { logger.info("發送給客戶端的消息message爲空"); return false; } try { for(WebSocket webSocket : WebSocketMapUtil.getValues()){ webSocket.sendMessage(message); logger.info("給sessionId爲" + webSocket.session.getId() + "的客戶端發送消息:"+message+"=成功"); } return true; } catch (IOException e) { logger.info("向全部客戶端發送消息："+message+"=失敗：" + e); e.printStackTrace(); } return false; }