學習WebSocket(一):Spring WebSocket的簡單使用

1、什么是websocket？

　　WebSocket協議定義了一種web應用的新功能，它實現了服務器端和客戶端的全雙工通信。全雙工通信即通信的雙方可以同時發送和接收信息 的信息交互方式。它是繼Java applets, XMLHttpRequest, Adobe Flash, ActiveXObject等使web應用更具交互性的新技術。

　　在實現連線過程中，瀏覽器和服務器通過TCP三次握手建立連接。 如果和服務器連接成功后，瀏覽器通過HTTP發送握手請求，如果服務器同意握手連接，客戶端和服務端之后就能互相之間發送信息。HTTP只用於開始的握手，一旦成功建立握手連接，HTTP不會參與數據傳輸，使用TCP連接來傳輸數據。

2、以往和服務器交互的幾種方式

　　輪詢

　　長輪詢就是客戶端按照一個固定的時間定期向服務器發送請求，通常這個時間間隔的長度受到服務端的更新頻率和客戶端處理更新數據時間的影響。這種方式缺點很明顯，就是瀏覽器要不斷發請求到服務器以獲取最新信息，造成服務器壓力過大，占用寬帶資源。

　   使用streaming AJAX

　　streaming ajax是一種通過ajax實現的長連接維持機制。主要目的就是在數據傳輸過程中對返回的數據進行讀取，並且不會關閉連接。

　　iframe方式

　　iframe可以在頁面中嵌套一個子頁面，通過將iframe的src指向一個長連接的請求地址，服務端就能不斷往客戶端傳輸數據。

3、什么時候用websocket?

　　最適合websocket的web應用的就是那些客戶端和服務器端需要高頻繁、低延遲交換信息的應用。

4、如何使用websocket？

　　Spring提供了一個是適應於各種websocket引擎的websocket api，例如是Tomcat (7.0.47+)和GlassFish (4.0+)，也適應於支持原生websocket的Jetty (9.0+)。而不同的瀏覽器對websocket的支持程度也有所不同，如果瀏覽器websocket不支持，那么可以用SocketJs代替websocket。

　　創建和配置WebSocketHandler

　　WebSocketHandler用於處理websocket的消息。

public class MyHandler extends TextWebSocketHandler {

    @Override
    public void handleTextMessage(WebSocketSession session, TextMessage message) {
　　　　session.sendMessage(message);
    }

}

創建和配置HandshakeInterceptor

HandshakeInterceptor用於處理握手前后的預處理工作。

public class HandshakeInterceptor extends HttpSessionHandshakeInterceptor {

    @Override
    public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception ex) {
        System.out.println("After Handshake");
        super.afterHandshake(request, response, wsHandler, ex);
    }

    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler,Map<String, Object> attributes) throws Exception {
        System.out.println("Before Handshake");
　　　　 return super.beforeHandshake(request, response, wsHandler, attributes);
    }
}

同時配置spring-websocket.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:websocket="http://www.springframework.org/schema/websocket"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/websocket
        http://www.springframework.org/schema/websocket/spring-websocket.xsd">
                
    <websocket:handlers>
        <websocket:mapping handler="myHandler" path="/myHandler"/>
        <websocket:handshake-interceptors>
            <bean class="org.springframework.samples.HandshakeInterceptor"></bean>
        </websocket:handshake-interceptors>
    </websocket:handlers> 
    <!--兼容低版本瀏覽器-->    
    <websocket:handlers>    
        <websocket:mapping handler="myHandler" path="/js/myHandler"/>    
        <websocket:handshake-interceptors>
            <bean class="org.springframework.samples.HandshakeInterceptor"></bean>
        </websocket:handshake-interceptors>
        <websocket:sockjs />
    </websocket:handlers>
    
    <bean id="myHandler" class="org.springframework.samples.MyHandler"></bean>
           
</beans>

在頁面上添加JavaScript

<script type="text/javascript" src="js/sockjs.min.js"></script>
<script type="text/javascript">
　　//websocket-demo是project name
    var sock=null;
    if (window['WebSocket']) {
        sock= new WebSocket('ws://' + window.location.host+'/websocket-demo/myHandler');
    }
    else
        sock= new SockJS('/websocket-demo/js/myHandler');//兼容低版本瀏覽器
    sock.onopen = function() {
        console.log('Opening');
        sayHello();
    };
    sock.onmessage = function(e) {
        alert('Received message: '+ e.data);
    };
    sock.onclose = function() {
        console.log('Closing');
    };
    function sayHello() {
        console.log('Sending Hello!');
        sock.send("Hello!");
    }
</script>

如果要兼容低版本瀏覽器，還要在web.xml添加

<async-supported>true</async-supported>

需要注意的地方：

1、應用服務器的版本，如果版本過低是不支持websocket的

2、JavaScript的websocket的url應該和spring-websocket.xml的<websocket:mapping path="">一致

3、要兼容低版本瀏覽器，要使用web3.0，還有必須在一個請求涉及的所有Servlet及Filter中都聲明asyncSupported=true。

下載：websocket-demo