websocket實(shí)戰(zhàn)（1） 入門

1.WebSocket介紹

1.1 概念

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

1.2 websocket vs HTTP

首先，web技術(shù)發(fā)展經(jīng)歷了以下階段。

• 靜態(tài)頁面(html)

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

• Ajax技術(shù)

• comet技術(shù)（輪詢）

1.2.1 實(shí)現(xiàn)方案對比

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

下面，就用提到的技術(shù)實(shí)現(xiàn)這個小小的功能，分析下利弊。

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

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

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

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

websocket實(shí)現(xiàn)方案

與http協(xié)議不同的請求/響應(yīng)模式不同，HTML5 Web Sockets以最小的開銷高效地提供了Web連接 ，極大的減少了不必要的網(wǎng)絡(luò)流量與延遲。一個Web客戶端通過websocket連接到一個遠(yuǎn)程端點(diǎn),進(jìn)行全雙工的通信，提高了實(shí)時性，不存在浪費(fèi)服務(wù)資源問題。

1.2.2 websocket 與http關(guān)系

兩者都是應(yīng)用層的開發(fā)規(guī)范，websocket是基于http的，Websocket其實(shí)是一個新協(xié)議，跟HTTP協(xié)議基本沒有關(guān)系，只是為了兼容現(xiàn)有瀏覽器的握手規(guī)范而已。

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

1.3 websocket場景

1.社交訂閱

2.多玩家游戲

3.協(xié)同編輯/編程

4.點(diǎn)擊流數(shù)據(jù)

5.股票基金報價

6.體育實(shí)況更新
7.多媒體聊天
8.基于位置的應(yīng)用

9.在線教育

2. 我的websocket 項(xiàng)目

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

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

希望對大家有用。

項(xiàng)目地址:https://github.com/janecms/websocket_example

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

最主要的內(nèi)容就是聲明EndPoint。

創(chuàng)建服務(wù)端步驟

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對應(yīng)websocket的生命周期。

1.創(chuàng)建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>.

相關(guān)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修飾的處理文本，二進(jìn)制，pone信息的的方法。這個限制，不同的環(huán)境，會有所區(qū)別。

4.html5 websocket 實(shí)現(xiàn)客戶端

客戶端，也對應(yīng)生命周期。onOpen,onClose,onMessage,onError。

var wsocket;
function connect() {
   wsocket = new WebSocket("ws://localhost:8080/dukeetf2/dukeetf");
   wsocket.onmessage = onMessage;//定義回調(diào)
    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協(xié)議交互數(shù)據(jù)

和標(biāo)準(zhǔn)HTTP，存在很大不同。

5.1 請求數(shù)據(jù)

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 響應(yīng)數(shù)據(jù)

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

5.3 websocket的請求URL，也不是標(biāo)準(zhǔn)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

結(jié)論

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