介紹

Web Sockets的目標是在一個單獨的持久連線上提供全雙工、雙向通訊。在JavaScript中建立了Web Socket之後，會有一個HTTP請求傳送到瀏覽器以發起連線。在取得伺服器響應後，建立的連線會使用HTTP升級從HTTP協議交換為Web Socket協議。也就是說，使用標準的HTTP伺服器無法實現Web Sockets，只有支援這種協議的專門伺服器才能正常工作。

由於Web Sockets使用了自定義的協議，所以URL模式也略有不同。未加密的連線不再是http://，而是ws://；加密的連線也不是https://，而是wss://。在使用Web Socket URL時，必須帶著這個模式，因為將來還有可能支援其他模式。

使用自定義協議而非HTTP協議的好處是，能夠在客戶端和伺服器之間傳送非常少量的資料，而不必擔心HTTP那樣位元組級的開銷。由於傳送的資料包很小，因此Web Sockets非常適合移動應用。畢竟對移動應用而言，頻寬和網路延遲都是關鍵問題。使用自定義協議的缺點在於，指定協議的時間比制定JavaScript API的時間還要長。

示例教程

學習WebSocket最好的資料就是官方給的demo，比如tomcat容器給的examples。無論你的tomcat中有沒有examples示例檔案，啟動tomcat伺服器後，開啟localhost：8080都能看到這樣的部分：

圈紅的部分就是tomcat給出的該容器支援的API的示例。點開連線，可能會看到

說明在你的tomcat中沒有examples示例專案。也就是在tomcat安裝目錄下的webapps資料夾中沒有examples資料夾，到官網上下載一份對應版本的tomcat，解壓後複製examples資料夾到TOMCAT_HOME（安裝目錄）下的webapps中，重啟伺服器，再次訪問localhost:8080，點選Examples連線，可以看到在頁面中有這樣的幾個示例專案：

第三個就是學習WebSocket要用到的示例專案，可以到資料夾中檢視java原始碼，位置：TOMCAT_HOME/webapps/examples/WEB-INFO/classes/websocket，xhtml程式碼：TOMCAT_HOME/webapps/examples/websocket。

沒有下載examples檔案可以線上檢視tomcat示例：http://www.4371.cn/

視訊學習下載（尚學堂-高明鑫-websocket-01-08）

視訊：百度雲網盤連結：http://pan.baidu.com/s/1bp9imsv 密碼：rokz

示例專案下載

自己也將tomcat examples中的兩個示例專案匯入了eclipse中，環境：JDK1.7，tomcat7.maven+eclipse

已經打包，下載解壓後將websocket\target下的websocket.war包直接放到tomcat下的webapps中，啟動伺服器後訪問http://localhost:8080/websocket/websocket/echo/echo.html

和http://localhost:8080/websocket/websocket/chat/chat.html即可，分別是tomcat的echo和chat示例。環境已經搭建好可以直接執行。

使用講解

使用websocket完成的目標是在客戶和伺服器之間建立一個雙向可通的通道。既然是雙向的，那麼就要求要對伺服器和客戶端兩部分進行程式設計。

伺服器

伺服器中的程式碼websocket部分也分為兩部分，一個是配置，另一個是服務。

配置的話比較簡單，就是在專案啟動時檢測websocket服務類。在tomcat的示例中有介面式的websocket也有註解式的websocket兩種示例。在上面自己整理的專案中只有註解式的，感覺註解比較簡潔。

註解式的實現配置檔案只需實現javax.websocket.server.ServerApplicationConfig介面即可，是websocket的核心配置類，該介面也只有兩個需要實現的方法，程式碼：

public class WSCoreConfig implements ServerApplicationConfig{
 
    public Set<ServerEndpointConfig> getEndpointConfigs(
            Set<Class<? extends Endpoint>> scanned) {
        return null;
    }
 
    //註解的方式
    public Set<Class<?>>getAnnotatedEndpointClasses(Set<Class<?>> scanned) {
        System.err.println("===== START CONFIG=====\nscannedsize:" + scanned.size());
        return scanned;
    }
}

1.  開啟連線

2.  伺服器端接收資料

3.  伺服器端給客戶端傳送資料

4.  處理異常

主要需要用到的註解：@OnOpen、@OnClose、@OnMessage、@OnError

分別對應通道開啟、通道關閉、收發資訊、異常。

簡單的示例程式碼也是比較簡單的：

@ServerEndpoint(value="/ws/echo/echoServer/chat")
public class ChatAnnotation {
 
 
    private static final String GUEST_PREFIX = "Guest";
    private static final AtomicInteger connectionIds = new AtomicInteger(0);
    private static final Set<ChatAnnotation> connections =
            new CopyOnWriteArraySet<ChatAnnotation>();
 
    private final String nickname;
    private Session session;
 
    public ChatAnnotation() {
        nickname = GUEST_PREFIX + connectionIds.getAndIncrement();
    }
 
 
    @OnOpen
    public void start(Session session) {
        this.session = session;
        connections.add(this);
        String message = String.format("* %s %s", nickname, "has joined.");
        broadcast(message);
    }
 
 
    @OnClose
    public void end() {
        connections.remove(this);
        String message = String.format("* %s %s",
                nickname, "has disconnected.");
        broadcast(message);
    }
 
 
    @OnMessage
    public void incoming(String message) {
        broadcast(nickname + " : " + message);
    }
 
 
 
 
    @OnError
    public void onError(Throwable t) throwsThrowable {
   
    }
 
 
    private static void broadcast(String msg) {
        for (ChatAnnotation client : connections) {
            try {
                synchronized (client) {
                    client.session.getBasicRemote().sendText(msg);
                }
            } catch (IOException e) {
                connections.remove(client);
                try {
                    client.session.close();
                } catch (IOException e1) {
                    // Ignore
                }
                String message = String.format("* %s %s",
                        client.nickname, "has been disconnected.");
                broadcast(message);
            }
        }
    }
}

開始的@ServerEndpoint(value="/ws/echo/echoServer/chat")表示該服務類的URI。在前臺連線該服務時用到的url為：ws://localhost:8080 /websocket/ws/echo/echoServer/chat。該類中定義了一個靜態方法broadcast()，為廣播客戶端傳送來的資訊。client.session.getBasicRemote().sendText(msg);該程式碼行為傳送資訊的主要程式碼，向客戶端傳送訊息。

該類中的其它幾個方法的宣告上可以看到@onXXX，表示該方法在何時得到呼叫。

客戶端

客戶端的程式碼主要是websocket物件。要建立WebSocket，先例項一個WebSocket物件並傳入要連線的URL：

var socket = newWebSocket(“ws://localhost:8080 /websocket/ws/echo/echoServer/chat”);

注意，必須給WebSocket建構函式傳入絕對URL。同源策略對WebSockets不適用，因此可以通過它開啟到任何站點的連線。至於是否會與某個域中的頁面通訊，則完全取決於度武器。（通過握手資訊就可以知道請求來自何方。）

例項化了WebSocket物件後，瀏覽器就會馬上嘗試建立連線。WebSocket有一個表示當前狀態的readState屬性，如下所示：

WebSocket.OPENING(0)：正在建立連線。

WebSocket.OPEN(1)：已經建立鍵連線。

WebSocket.CLOSING(2)：正在關閉連線。

WebSocket.CLOSE(3)：已經關閉連線。

WebSocket沒有readystatechange事件；不過，它有其他事件，對應著不同的狀態。readyState的值永遠從0開始。

要關閉Web Socket連線，可以在任何時候呼叫close()方法。

socket.close();

傳送和接收資料

Web Socket開啟之後，就可以通過連線傳送和接收資料。要向伺服器傳送資料，使用send()方法並傳入任意字串，例如：

var socket = newWebSocket(“ws://localhost:8080 /websocket/ws/echo/echoServer/chat”);

socket.send(“HelloWorld”);

因為Web Socket只能通過連線傳送純文字資料，所以對於複雜的資料結構，在通過連線傳送之前，必須進行序列化。

當服務端發來訊息時，WebSocket物件就會觸發message事件。這個事件與其他傳遞訊息的協議類似，也是把返回的資料儲存在event.data屬性中。

其他事件

WebSocket物件還有其他三個事件，在連續生命週期的不同階段觸發。

open：在成功建立連線時觸發。

error：在發生錯誤時觸發，連線不能持續。

close：在連線關閉時觸發。

客戶端JS程式碼：

var ws = null;

function setConnected(connected) {
    document.getElementById('connect').disabled = connected;
    document.getElementById('disconnect').disabled = !connected;
    document.getElementById('echo').disabled = !connected;
}

function connect() {
    var target = document.getElementById('target').value;
    if (target == '') {
        alert('Please select server side connection implementation.');
        return;
    }
    if ('WebSocket' in window) {
        ws = new WebSocket(target);
    } else if ('MozWebSocket' in window) {
        ws = new MozWebSocket(target);
    } else {
        alert('WebSocket is not supported by this browser.');
        return;
    }
    ws.onopen = function () {
        setConnected(true);
        log('Info: WebSocket connection opened.');
    };
    ws.onmessage = function (event) {
        log('Received: ' + event.data);
    };
    ws.onclose = function (event) {
        setConnected(false);
        log('Info: WebSocket connection closed, Code: ' + event.code + (event.reason == "" ? "" : ", Reason: " + event.reason));
    };
}

function disconnect() {
    if (ws != null) {
        ws.close();
        ws = null;
    }
    setConnected(false);
}

function echo() {
    if (ws != null) {
        var message = document.getElementById('message').value;
        log('Sent: ' + message);
        ws.send(message);
    } else {
        alert('WebSocket connection not established, please connect.');
    }
}

function updateTarget(target) {
    if (window.location.protocol == 'http:') {
        document.getElementById('target').value = 'ws://' + window.location.host + target;
    } else {
        document.getElementById('target').value = 'wss://' + window.location.host + target;
    }
}

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


document.addEventListener("DOMContentLoaded", function() {
    // Remove elements with "noscript" class - <noscript> is not allowed in XHTML
    var noscripts = document.getElementsByClassName("noscript");
    for (var i = 0; i < noscripts.length; i++) {
        noscripts[i].parentNode.removeChild(noscripts[i]);
    }
}, false);

首先定義了一個名為ws的全域性變數，建立WebSocket例項時傳入了URL引數：

ws = new WebSocket(target);

方法connect()為關鍵方法，例項WebSocket物件，並指定了open、message、error、close事件的處理程式。在該方法中做了瀏覽器相容處理：

    if ('WebSocket' in window) {
        ws = new WebSocket(target);
    } else if ('MozWebSocket' in window) {
        ws = new MozWebSocket(target);
    } else {
        alert('WebSocket is not supported by thisbrowser.');
        return;
}

setConnected()設定頁面按鈕的狀態（已經連線時，連線按鈕禁用、啟用斷開連線按鈕和訊息按鈕……）

disconnect()斷開連線：ws.close();

echo()列印訊息到頁面。

關於介面式的websocket可參考tomcat官方示例，若在學習或專案搭建過程中有什麼問題可評論或郵件我的CSDN，以共同進步。