快捷導(dǎo)航

WebSocket整合SSM(Spring,Struts2,Maven)的實(shí)現(xiàn)示例

更新時(shí)間：2019年01月17日 11:20:24 作者：冰湖一角

這篇文章主要介紹了WebSocket整合SSM(Spring,Struts2,Maven)的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、WebSocket與HTTP長(zhǎng)輪詢

WebSocket屬于HTML5 規(guī)范的一部分，提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。允許服務(wù)端主動(dòng)向客戶端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。（Tomcat 8以上版本支持）

HTTP 協(xié)議是一種無(wú)狀態(tài)的、無(wú)連接的、單向的應(yīng)用層協(xié)議。它采用了請(qǐng)求/響應(yīng)模型。通信請(qǐng)求只能由客戶端發(fā)起，服務(wù)端對(duì)請(qǐng)求做出應(yīng)答處理。這種通信模型有一個(gè)弊端：HTTP 協(xié)議無(wú)法實(shí)現(xiàn)服務(wù)器主動(dòng)向客戶端發(fā)起消息。

HTTP長(zhǎng)輪詢：客戶端向服務(wù)器發(fā)送(http)Ajax請(qǐng)求，服務(wù)器接到請(qǐng)求后hold住連接，直到有新消息才返回響應(yīng)信息并關(guān)閉連接，客戶端處理完響應(yīng)信息后再向服務(wù)器發(fā)送新的請(qǐng)求。

WebSocket與HTTP長(zhǎng)輪詢的通信機(jī)制如下：

二、客戶端如何使用WebSocket

瀏覽器通過(guò) JavaScript 向服務(wù)器發(fā)出建立 WebSocket 連接的請(qǐng)求，連接建立以后，客戶端和服務(wù)器端就可以通過(guò) TCP 連接直接交換數(shù)據(jù)。

當(dāng)你獲取 Web Socket 連接后，你可以通過(guò)send()方法來(lái)向服務(wù)器發(fā)送數(shù)據(jù)，并通過(guò)onmessage事件來(lái)接收服務(wù)器返回的數(shù)據(jù)。

1. 創(chuàng)建 WebSocket 對(duì)象API

//第一個(gè)參數(shù) url, 指定連接的 URL。第二個(gè)參數(shù) protocol 是可選的，指定了可接受的子協(xié)議。　　

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

2. WebSocket 屬性

以下是 WebSocket 對(duì)象的屬性。假定我們使用了以上代碼創(chuàng)建了 Socket 對(duì)象：

屬性	描述
Socket.readyState	只讀屬性 readyState 表示連接狀態(tài)，可以是以下值： 0 - 表示連接尚未建立。 1 - 表示連接已建立，可以進(jìn)行通信。 2 - 表示連接正在進(jìn)行關(guān)閉。 3 - 表示連接已經(jīng)關(guān)閉或者連接不能打開(kāi)。
Socket.bufferedAmount	只讀屬性 bufferedAmount 已被 send() 放入正在隊(duì)列中等待傳輸，但是還沒(méi)有發(fā)出的 UTF-8 文本字節(jié)數(shù)。

屬性

描述

Socket.readyState

只讀屬性 readyState 表示連接狀態(tài)，可以是以下值：

0 - 表示連接尚未建立。
1 - 表示連接已建立，可以進(jìn)行通信。
2 - 表示連接正在進(jìn)行關(guān)閉。
3 - 表示連接已經(jīng)關(guān)閉或者連接不能打開(kāi)。

Socket.bufferedAmount

只讀屬性 bufferedAmount 已被 send() 放入正在隊(duì)列中等待傳輸，但是還沒(méi)有發(fā)出的 UTF-8 文本字節(jié)數(shù)。

3. WebSocket 事件

以下是 WebSocket 對(duì)象的相關(guān)事件。假定我們使用了以上代碼創(chuàng)建了 Socket 對(duì)象：

事件	事件處理程序	描述
open	Socket.onopen	連接建立時(shí)觸發(fā)
message	Socket.onmessage	客戶端接收服務(wù)端數(shù)據(jù)時(shí)觸發(fā)
error	Socket.onerror	通信發(fā)生錯(cuò)誤時(shí)觸發(fā)
close	Socket.onclose	連接關(guān)閉時(shí)觸發(fā)

4. WebSocket 方法

以下是 WebSocket 對(duì)象的相關(guān)方法。假定我們使用了以上代碼創(chuàng)建了 Socket 對(duì)象：

方法	描述
Socket.send()	使用連接發(fā)送數(shù)據(jù)
Socket.close()	關(guān)閉連接

5. WebSocket 實(shí)例

<%@ 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";
    //判斷當(dāng)前瀏覽器是否支持WebSocket
    if ('WebSocket' in window) {
      //建立客戶端websocket  
      webSocket = new WebSocket(url);
    } else {
      console.log("您的瀏覽器不支持WebSocket");
    }
    
    //封裝內(nèi)部監(jiān)聽(tīng)事件
    function init(){
      //連接發(fā)生錯(cuò)誤的回調(diào)方法
      webSocket.onerror = function(event) {
        console.log("webSocket連接發(fā)生錯(cuò)誤.");
      };

      //連接成功建立的回調(diào)方法
      webSocket.onopen = function(event) {
        console.log("webSocket連接成功.");
         //心跳檢測(cè)重置
        heartCheck.start();
      };

      //接收到消息的回調(diào)方法
      webSocket.onmessage = function(event) {
        //拿到任何消息都說(shuō)明當(dāng)前連接是正常的
        if(event.data=="&"){
          console.log("收到心跳回復(fù)"+event.data);
        }else{
          console.log("接收到消息="+event.data);
          onMessage(event);
        }
        heartCheck.start();
      };

      //連接關(guān)閉的回調(diào)方法
      // 斷線重連
      webSocket.onclose = function() {
        console.log("webSocket連接斷開(kāi)");
      }

      //監(jiān)聽(tīng)窗口關(guān)閉事件，當(dāng)窗口關(guān)閉時(shí)，主動(dòng)去關(guān)閉websocket連接，防止連接還沒(méi)斷開(kāi)就關(guān)閉窗口，server端會(huì)拋異常。
      window.onbeforeunload = function() {
        webSocket.close();
        console.log("窗口關(guān)閉，webSocket斷開(kāi)連接.");
      }

    }
    
    function onMessage(event) {  
      setMessageInnerHTML(event.data);
    }   
    
    function postToServer() {       
      webSocket.send(document.getElementById("msg").value);  
      console.log("向服務(wù)器發(fā)送消息="+document.getElementById("msg").value);
      document.getElementById("msg").value = "";     
    } 
    
    //將消息顯示在網(wǎng)頁(yè)上
    function setMessageInnerHTML(innerHTML) {
      document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
    
    function onClose(){
      webSocket.close();
    }
  });  
  
  //心跳檢測(cè)
  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(){
     //這里發(fā)送一個(gè)心跳，后端收到后，返回一個(gè)心跳消息，
     console.log('發(fā)送心跳&');
     webSocket.send("&");
     self.serverTimeoutObj = setTimeout(function() {
      console.log(webSocket);
      console.log("服務(wù)器心跳回復(fù)超時(shí)");
      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>

三、服務(wù)器端如何使用WebSocket

1. pom.xml文件引入對(duì)應(yīng)的依賴包：

<!-- webSocket 開(kāi)始-->
    <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 結(jié)束-->

2. spring配置文件配置websocket服務(wù)類

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

3. struts2配置文件過(guò)濾websocket請(qǐng)求

<!-- 過(guò)濾掉ws請(qǐng)求 -->
<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;
  
  //靜態(tài)變量，用來(lái)記錄當(dāng)前在線連接數(shù)。應(yīng)該把它設(shè)計(jì)成線程安全的
  public static int onlineCount = 0;

  //與某個(gè)客戶端的連接會(huì)話，需要通過(guò)它來(lái)給客戶端發(fā)送數(shù)據(jù)
  public Session session;

  /**
   * 連接建立成功調(diào)用的方法
   * @param session 可選的參數(shù)。session為與某個(gè)客戶端的連接會(huì)話，需要通過(guò)它來(lái)給客戶端發(fā)送數(shù)據(jù)
   */
  @OnOpen
  public void onOpen(Session session){
    this.session = session;
    WebSocketMapUtil.put(session.getId(),this);//存入map
    addOnlineCount();      //在線數(shù)加1
    messageHandler.onConnect(session.getId());
    System.out.println("有新連接加入！當(dāng)前在線人數(shù)為" + getOnlineCount());
    logger.info("有新連接加入！當(dāng)前在線人數(shù)為" + getOnlineCount());
  }

  /**
   * 連接關(guān)閉調(diào)用的方法
   */
  @OnClose
  public void onClose(){
    WebSocketMapUtil.remove(session.getId()); //從map中刪除
    subOnlineCount();      //在線數(shù)減1
    messageHandler.onDisconnect(session.getId());
    try {
      if(session != null){
        session.close();
      }
    } catch (IOException e) {
      e.printStackTrace();
    }
    System.out.println("有一連接關(guān)閉！當(dāng)前在線人數(shù)為" + getOnlineCount());
    logger.info("有一連接關(guān)閉！當(dāng)前在線人數(shù)為" + getOnlineCount());
  }

  /**
   * 收到客戶端消息后調(diào)用的方法
   * @param message 客戶端發(fā)送過(guò)來(lái)的消息
   * @param session 可選的參數(shù)
   */
  @OnMessage
  public String onMessage(String message, Session session) {
    System.out.println("來(lái)自客戶端的消息:" + message);
    logger.info("來(lái)自客戶端的消息:" + message);
    if (message.equals("&")){
      return "&";
    }else{
       messageHandler.onMessage(session.getId(),message);
      return "Got your message ("+ message +")";
    }
  }

  /**
   * 發(fā)生錯(cuò)誤時(shí)調(diào)用
   * @param session
   * @param error
   */
  @OnError
  public void onError(Session session, Throwable error){
    System.out.println("發(fā)生錯(cuò)誤");
    logger.info("發(fā)生錯(cuò)誤:" + error);
    error.printStackTrace();
  }
  
  //單發(fā)消息
  public void sendMessage(String message) throws IOException{
    //阻塞式（同步）
    //this.session.getBasicRemote().sendText(message);
    //非阻塞式（異步）
    this.session.getAsyncRemote().sendText(message);
  }
  
  //群發(fā)消息
  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實(shí)現(xiàn)類里實(shí)現(xiàn)服務(wù)器推送消息的方法

@Override
  public boolean sendMessage(String message) {
    logger.info("發(fā)送給客戶端的websocket消息message=="+message);
    if (messageHandler == null) {
      logger.info("上層調(diào)用者沒(méi)有給messageHandler賦值，websocket消息無(wú)法發(fā)送到客戶端");
      return false;
    }
    if (message == null || "".equals(message)) {
      logger.info("發(fā)送給客戶端的消息message為空");
      return false;
    }
    try {
      for(WebSocket webSocket : WebSocketMapUtil.getValues()){
        webSocket.sendMessage(message);
        logger.info("給sessionId為" + webSocket.session.getId() + "的客戶端發(fā)送消息:"+message+"=成功");
      }      
      return true;
    } catch (IOException e) {
      logger.info("向所有客戶端發(fā)送消息："+message+"=失?。? + e);
      e.printStackTrace();
    }
    return false;
  }

其實(shí)，使用Tomcat8開(kāi)發(fā)WebSocket服務(wù)端非常簡(jiǎn)單，主要有如下兩種方式：

1. 使用注解方式開(kāi)發(fā)（上述示例代碼），被@ServerEndpoint修飾的Java類即可作為WebSocket服務(wù)端。

2. 繼承Endpint基類實(shí)現(xiàn)WebSocket服務(wù)端。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: