websocket實戰（1） 入門

1.WebSocket介紹

1.1 概念

WebSocket是HTML5中一系列新的API,或者說新規范，新技術。支持頁面上使用Web Socket協議與遠程主機進行全雙工的通信。它引入了WebSocket接口并且定義了一個全雙工的通信通道，通過一個單一的套接字在Web上進行操作。

1.2 websocket vs HTTP

首先，web技術發展經歷了以下階段。

• 靜態頁面(html)

• 動態頁面(cgi,j2ee,php...)

• Ajax技術

• comet技術（輪詢）

1.2.1 實現方案對比

舉個簡單的例子，以51cto的消息推送為例。

下面，就用提到的技術實現這個小小的功能，分析下利弊。

1. 靜態頁面就不說了，它一般應用在頁面緩存級別，但消息條目明顯有一定時效的，不適用該場景。
   

2. 動態頁面，為了更新消息數目，刷新整個頁面，下面所有的頁面重新渲染，效率也不加。

3. ajax技術，可以實現局部頁面刷新，通過HTTP輪詢，獲取消息條目。即使沒有新消息，也必須發送請求，產生無意義的請求。請求間隔太長，實時性存在問題；間隔太端，浪費服務器資源和占用帶寬。

4. comet技術，基于HTTP長連接，是反向Ajax（Reverse Ajax）一種實現，能夠從服務器端向客戶端發送數據，實現了連接的復用。 兩種實現方式各有利弊。（1）基于Ajax的長輪詢（long-polling）方式；（2）基于 Iframe 及 htmlfile 的流（http streaming）方式。

websocket實現方案

與http協議不同的請求/響應模式不同，HTML5 Web Sockets以最小的開銷高效地提供了Web連接 ，極大的減少了不必要的網絡流量與延遲。一個Web客戶端通過websocket連接到一個遠程端點,進行全雙工的通信，提高了實時性，不存在浪費服務資源問題。

1.2.2 websocket 與http關系

兩者都是應用層的開發規范，websocket是基于http的，Websocket其實是一個新協議，跟HTTP協議基本沒有關系，只是為了兼容現有瀏覽器的握手規范而已。

http支持長連接；但websocket是持久連接。

1.3 websocket場景

1.社交訂閱

2.多玩家游戲

3.協同編輯/編程

4.點擊流數據

5.股票基金報價

6.體育實況更新
7.多媒體聊天
8.基于位置的應用

9.在線教育

2. 我的websocket 項目

項目還在不斷完善之中。里面包含了若干個websocket例子。例子，包括游戲類，聊天類，畫板類....

本人，比較喜歡學一門技術的原則“無論如何先跑起來”，搜集這些例子，花費了個人近3天時間。

希望對大家有用。

項目地址:https://github.com/janecms/websocket_example

3. 聲明服務端websocket服務（Endpoint）的兩種方式

最主要的內容就是聲明EndPoint。

創建服務端步驟

1. Create an endpoint class.

2. Implement the lifecycle methods of the endpoint.

3. Add your business logic to the endpoint.

4. Deploy the endpoint inside a web application.

3.1編程式

Endpoint中的onOpen,onClose,onError對應websocket的生命周期。

1.創建Endpoint

public class EchoEndpoint extends Endpoint {
   @Override
   public void onOpen(final Session session, EndpointConfig config) {
      session.addMessageHandler(new MessageHandler.Whole<String>() {
         @Override
         public void onMessage(String msg) {
            try {
               session.getBasicRemote().sendText(msg);
            } catch (IOException e) { ... }
         }
      });
   }
}

2.部署endpoint

ServerEndpointConfig.Builder.create(EchoEndpoint.class, "/echo").build();

具體參見：

https://github.com/janecms/websocket_example中的<websocket.echo.EchoEndpoint>.

3.2 注解聲明式

更簡單。

@ServerEndpoint("/echo")
public class EchoEndpoint {
   @OnMessage
   public void onMessage(Session session, String msg) {
      try {
         session.getBasicRemote().sendText(msg);
      } catch (IOException e) { ... }
   }
}

具體參見

https://github.com/janecms/websocket_example中的<websocket.echo.EchoAnnotation>.

相關annotation說明

Each websocket endpoint may only have one message handling method for each of the native websocket
message formats: text, binary and pong

一個endpoint只能有一個被@OnMessage修飾的處理文本，二進制，pone信息的的方法。這個限制，不同的環境，會有所區別。

4.html5 websocket 實現客戶端

客戶端，也對應生命周期。onOpen,onClose,onMessage,onError。

var wsocket;
function connect() {
   wsocket = new WebSocket("ws://localhost:8080/dukeetf2/dukeetf");
   wsocket.onmessage = onMessage;//定義回調
    websocket.onerror = function(evt) {
        onError(evt)
    };   
}
function onMessage(evt) {
   var arraypv = evt.data.split("/");
   document.getElementById("price").innerHTML = arraypv[0];
   document.getElementById("volume").innerHTML = arraypv[1];
}
...
window.addEventListener("load", connect, false);

5. websocket協議交互數據

和標準HTTP，存在很大不同。

5.1 請求數據

GET /path/to/websocket/endpoint HTTP/1.1
Host: localhost
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: xqBt3ImNzJbYqRINxEFlkg==
Origin: http://localhost
Sec-WebSocket-Version: 13

5.2 響應數據

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: K7DJLdLooIwIG/MOpvWFB3y3FE8=

5.3 websocket的請求URL，也不是標準http schema。

普通：ws://host:port/path?query
加密：wss://host:port/path?query

參考資源

https://www.oschina.net/translate/9-killer-uses-for-websockets

http://www.tuicool.com/articles/FBbaai

https://docs.oracle.com/javaee/7/tutorial/websocket.htm

https://github.com/janecms/websocket_example

結論

主要講了websocket與http的異同，以及websoket的優勢和使用場景。簡單探討了2中聲明websocket方式。最后分享了自己的展示項目。 接下來，通過案例實戰，演練編碼解碼，錯誤處理在websocket的使用。