即時通訊架構T-io之WebSocket協定再之HelloWorld

一.t-io是幹嘛的

這個架構已經開源到碼雲上面，介紹比較詳細，連結：https://git.oschina.net/tywo45/t-io，由于官方介紹中的入門程式用戶端和服務端都是用的java寫的，而且是用簡單的自定義TCP協定進行通信的，也有一個websocket協定的列子，感覺有點複雜，不好入門。就想着使用javascript來做用戶端，t-io做服務端，采用websocket協定搞一個helloworld。

二.WebSocket協定咋回事

首先，t-io架構簡單說就是封裝一下些個：

内置心跳檢測
内置心跳發送
各種便捷的綁定API
各種便捷的發送API
一行代碼擁有自動重連功能
各項消息統計等功能，全部一鍵内置搞定，省卻各種煩惱

是以我們收到用戶端發來的websocket協定的包，在服務端就要做對應的解包，那我們還要了解websocket包的結構和通信建立的過程：

①握手階段：

用戶端和伺服器建立TCP連接配接之後，用戶端發送握手請求，随後伺服器發送握手響應即完成握手階段。如下：

用戶端握手請求類似如下：

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

伺服器的握手響應類似如下：

HTTP/1.1  Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

②握手成功後開始發送資料幀

這是Websocket的資料傳輸協定，聊天資訊一般會按照這個協定的規則來傳輸，下圖中的一整個東西稱為一個資料幀，資料幀的成幀和解析是處理這個協定時最麻煩的一部分了。具體這個表怎麼看可以參照

0                   1                   2                   3
  0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
 +-+-+-+-+-------+-+-------------+-------------------------------+
 |F|R|R|R| opcode|M| Payload len |    Extended payload length    |
 |I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
 |N|V|V|V|       |S|             |   (if payload len==126/127)   |
 | |1|2|3|       |K|             |                               |
 +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
 |     Extended payload length continued, if payload len == 127  |
 + - - - - - - - - - - - - - - - +-------------------------------+
 |                               |Masking-key, if MASK set to   |
 +-------------------------------+-------------------------------+
 | Masking-key (continued)       |          Payload Data         |
 +-------------------------------- - - - - - - - - - - - - - - - +
 :                     Payload Data continued ...                :
 + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
 |                     Payload Data continued ...                |
 +---------------------------------------------------------------+

 具體每一bit的意思
FIN      bit 表示資訊的最後一幀
RSV   bit each 以後備用的 預設都為 
Opcode   bit 幀類型，稍後細說
Mask     bit 掩碼，是否加密資料，預設必須置為 （這裡很蛋疼）
Payload  bit 資料的長度
Masking-key       or  bit 掩碼
Payload data     (x + y) bytes 資料
Extension data   x bytes  擴充資料
Application data y bytes  程式資料

三.T-io服務端編寫

整體的編寫和架構自帶的Helloworld程式模式一緻，需要改變的就是encode()編碼方法和decode()解碼方法，因為需要根據websocket協定來。

收到消息後先解碼，再判斷包的類型，交給響應類型的handler。發送消息先編碼。

①握手

decode()解碼方法：

由于用戶端收到的第一個包是握手包，是以：

if (!barrageSessionContext.isHandshaked()) // 如果還沒有握手，則先進行握手操作
{
    if (BarragePacket.HANDSHAKE_BYTE == firstbyte) {
        buffer.position( + initPosition);
        return handshakePacket;
    } else {
        HttpRequestPacket httpRequestPacket = HttpRequestDecoder.decode(buffer);
        if (httpRequestPacket == null) {
            return null;
        }
        //交給握手包的Handler
        httpRequestPacket.setType(Type.COMMAND_HANDSHAKE_REQ);
        barrageSessionContext.setWebsocket(true);
        return httpRequestPacket;
    }
}

//握手成功後在barrageSessionContext中儲存此次連接配接的握手情況.
boolean isWebsocket = barrageSessionContext.isWebsocket();

握手包的Handler，傳回握手響應包，讓用戶端知道握手成功，可以進行資料傳輸了，：

public class HandshakeReqHandler implements BarrageHandlerIntf<HandshakeBody> {

    private BarragePacket handshakeRespPacket = new BarragePacket(Type.COMMAND_HANDSHAKE_RESP);

    @Override
    public Object handler(
            BarragePacket packet,
            String body,
            ChannelContext<BarrageSessionContext, BarragePacket, Object> channelContext)
            throws Exception {
        BarrageSessionContext barrageSessionContext = channelContext.getSessionContext();
        barrageSessionContext.setHandshaked(true);

        boolean isWebsocket = barrageSessionContext.isWebsocket();
        if (isWebsocket)
        {
            HttpRequestPacket httpRequestPacket = (HttpRequestPacket) packet;
            HttpResponsePacket httpResponsePacket = updateWebSocketProtocol(httpRequestPacket);
            if (httpResponsePacket != null)
            {
                //發送握手響應包，交給握手響應的handler
                httpResponsePacket.setType(Type.COMMAND_HANDSHAKE_RESP);
                Aio.send(channelContext, httpResponsePacket);
            } else
            {
                Aio.remove(channelContext, "不是websocket協定");
            }
        } else
        {
            Aio.send(channelContext, handshakeRespPacket);
        }
        return null;
    }

    public HttpResponsePacket updateWebSocketProtocol(HttpRequestPacket httpRequestPacket)
    {
        Map<String, String> headers = httpRequestPacket.getHeaders();

        String Sec_WebSocket_Key = headers.get("Sec-WebSocket-Key");

        if (StringUtils.isNotBlank(Sec_WebSocket_Key))
        {
            String Sec_WebSocket_Key_Magic = Sec_WebSocket_Key + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";
            byte[] key_array = SHA1Util.SHA1(Sec_WebSocket_Key_Magic);
            String acceptKey = BASE64Util.byteArrayToBase64(key_array);
            HttpResponsePacket httpResponsePacket = new HttpResponsePacket();

            HttpResponseStatus httpResponseStatus = HttpResponseStatus.C101;
            httpResponsePacket.setHttpResponseStatus(httpResponseStatus);

            Map<String, String> respHeaders = new HashMap<>();
            respHeaders.put("Connection", "Upgrade");
            respHeaders.put("Upgrade", "WebSocket");
            respHeaders.put("Sec-WebSocket-Accept", acceptKey);
            httpResponsePacket.setHeaders(respHeaders);
            return httpResponsePacket;
        }
        return null;
    }

}

encode()編碼方法:

上面在握手包的handler中，調用了send方法，發送了一個握手響應包，是以要在編碼的時候先判斷是否是握手響應包，對其編碼：

if (packet.getType() == Type.COMMAND_HANDSHAKE_RESP) {
    if (isWebsocket) {
        return HttpResponseEncoder.encode((HttpResponsePacket) packet, groupContext, channelContext);
    } else {
        ByteBuffer buffer = ByteBuffer.allocate();
        buffer.put(BarragePacket.HANDSHAKE_BYTE);
        return buffer;
    }
}

握手響應包的編碼

public static ByteBuffer encode(HttpResponsePacket httpResponsePacket, GroupContext<BarrageSessionContext, BarragePacket, Object> groupContext, ChannelContext<BarrageSessionContext, BarragePacket, Object> channelContext)
    {
        int bodyLength = ;
        byte[] httpResponseBody = httpResponsePacket.getHttpResponseBody();
        if (httpResponseBody != null)
        {
            bodyLength = httpResponseBody.length;
        }

        StringBuilder sb = new StringBuilder();

        HttpResponseStatus httpResponseStatus = httpResponsePacket.getHttpResponseStatus();
        //        httpResponseStatus.get
        sb.append("HTTP/1.1 ").append(httpResponseStatus.getStatus()).append(" ").append(httpResponseStatus.getDescription()).append("\r\n");

        Map<String, String> headers = httpResponsePacket.getHeaders();
        if (headers != null && headers.size() > )
        {
            headers.put("Content-Length", bodyLength + "");
            Set<Entry<String, String>> set = headers.entrySet();
            for (Entry<String, String> entry : set)
            {
                sb.append(entry.getKey()).append(": ").append(entry.getValue()).append("\r\n");
            }
        }
        sb.append("\r\n");

        byte[] headerBytes = null;
        try
        {
            headerBytes = sb.toString().getBytes("utf-8");
        } catch (Exception e)
        {
            throw new RuntimeException(e);
        }

        ByteBuffer buffer = ByteBuffer.allocate(headerBytes.length + bodyLength);
        buffer.put(headerBytes);

        if (bodyLength > )
        {
            buffer.put(httpResponseBody);
        }
        return buffer;
    }

②資料包

decode()解碼方法：

上面握手成功的時候會在BarrageSessionContext中儲存握手的情況。

if (isWebsocket) // 走的websocket協定
{
    WebsocketPacket websocketPacket = WebsocketDecoder.decode(buffer, channelContext);
    if (websocketPacket == null) {
        return null;
    }
    Opcode opcode = websocketPacket.getWsOpcode();
    if (opcode == Opcode.BINARY) {
        byte[] wsBody = websocketPacket.getWsBody();
        if (wsBody == null || wsBody.length == ) {
            throw new AioDecodeException("錯誤的websocket包，body為空");
        }

        BarragePacket barragePacket = new BarragePacket(Type.COMMAND_HANDSHAKE_RESP);

        if (wsBody.length > ) {
            byte[] dst = new byte[wsBody.length - ];
            System.arraycopy(wsBody, , dst, , dst.length);
            barragePacket.setBody(dst);
        }
        return barragePacket;
    } else if (opcode == Opcode.PING || opcode == Opcode.PONG) {
        return heartbeatPacket;
    } else if (opcode == Opcode.CLOSE) {
        BarragePacket barragePacket = new BarragePacket(Type.COMMAND_CLOSE_REQ);
        return barragePacket;
    } else if (opcode == Opcode.TEXT) {
        byte[] wsBody = websocketPacket.getWsBody();
        if (wsBody == null || wsBody.length == ) {
            throw new AioDecodeException("錯誤的websocket包，body為空");
        }
        BarragePacket barragePacket = new BarragePacket(Type.P2P_REQ);
        if (wsBody.length > ) {
            barragePacket.setBody(wsBody);
        }
        return barragePacket;
    } else {
        throw new AioDecodeException("錯誤的websocket包，錯誤的Opcode");
    }

} else {
    if (BarragePacket.HEARTBEAT_BYTE == firstbyte) {
        buffer.position( + initPosition);
        return heartbeatPacket;
    }
}

資料包的handler：

public class P2PReqHandler implements BarrageHandlerIntf<P2PReqBody>{

    @Override
    public Object handler( BarragePacket packet, String jsonStr, ChannelContext<BarrageSessionContext, BarragePacket, Object> channelContext) throws Exception {
        System.out.println(jsonStr);
        BarragePacket barragePacket = new BarragePacket(Type.P2P_REQ);
        barragePacket.setBody(("收到了你的消息，你的消息是:" + jsonStr).getBytes(BarragePacket.CHARSET));
        Aio.send(channelContext, barragePacket);
        return null;
    }
}

這個收到消息後的處理是，發送收到的消息到用戶端。

encode()編碼方法:

如果不是握手響應包，走websocket包的編碼
if (isWebsocket) {
    return WebsocketEncoder.encode(packet, groupContext, channelContext);
}

public static ByteBuffer encode(BarragePacket barragePacket, GroupContext<BarrageSessionContext, BarragePacket, Object> groupContext, ChannelContext<BarrageSessionContext, BarragePacket, Object> channelContext)
{
    byte[] websocketHeader;
    byte[] imBody = barragePacket.getBody();
    int wsBodyLength = ; //固定有一個指令碼，占一位
    if (imBody != null)
    {
        wsBodyLength += imBody.length;
    }

    byte header0 = (byte) ( & (Opcode.BINARY.getCode() | ));

    if (wsBodyLength < )
    {
        websocketHeader = new byte[];
        websocketHeader[] = header0;
        websocketHeader[] = (byte) wsBodyLength;
    } else if (wsBodyLength < (( << ) - 1))
    {
        websocketHeader = new byte[];
        websocketHeader[] = header0;
        websocketHeader[] = ;
        websocketHeader[] = (byte) (wsBodyLength & );
        websocketHeader[] = (byte) ((wsBodyLength >> ) & );
    } else
    {
        websocketHeader = new byte[];
        websocketHeader[] = header0;
        websocketHeader[] = ;
        int2Byte(websocketHeader, wsBodyLength, );
    }
    ByteBuffer buf = ByteBuffer.allocate(websocketHeader.length + wsBodyLength);
    buf.put(websocketHeader);

    buf.put(barragePacket.getType());

    if (imBody != null)
    {
        buf.put(imBody);
    }

    return buf;
}

public static void int2Byte(byte[] bytes, int value, int offset)
{
    checkLength(bytes, , offset);

    bytes[offset + ] = (byte) ((value & ));
    bytes[offset + ] = (byte) ((value >>  * ) & );
    bytes[offset + ] = (byte) ((value >>  * ) & );
    bytes[offset + ] = (byte) ((value >>  * ));
}

private static void checkLength(byte[] bytes, int length, int offset)
{
    if (bytes == null)
    {
        throw new IllegalArgumentException("null");
    }

    if (offset < )
    {
        throw new IllegalArgumentException("invalidate offset " + offset);
    }

    if (bytes.length - offset < length)
    {
        throw new IllegalArgumentException("invalidate length " + bytes.length);
    }
}

websocket協定的伺服器的處理流程大緻是上面這個流程，但是代碼我隻貼了關鍵部分，完整的代碼可以去我的碼雲上下載下傳。

四.javascript用戶端編寫

<!DOCTYPE html>
<html>
<head>
<title>Testing websockets</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
  <div>
    <input type="submit" value="Start" onclick="start()" />
  </div>
  <div id="messages"></div>
  <script type="text/javascript">
    var webSocket = 
      new WebSocket('ws://localhost:5678');

    webSocket.onerror = function(event) {
      onError(event)
    };

    webSocket.onopen = function(event) {
      onOpen(event)
    };

    webSocket.onmessage = function(event) {
      onMessage(event)
    };

    function onMessage(event) {
        var blob = event.data;
        var reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = function (e) {
            document.getElementById('messages').innerHTML 
            += '<br />' + reader.result;
        }
    }

    function onOpen(event) {
      document.getElementById('messages').innerHTML 
        = 'Connection established';
    }

    function onError(event) {
      alert(event.data);
    }

    function start() {
      webSocket.send('hellohellohellohellohellohellohellohellohe');
    }
  </script>
</body>
</html>

最好是下載下傳程式下來，打上斷點，debug去跟一下，每一步包做了那些處理，變成了什麼樣子，傳輸的二進制資料轉換成字元串是甚麼樣子等等。

即時通訊架構T-io之WebSocket協定再之HelloWorld

一.t-io是幹嘛的

二.WebSocket協定咋回事

三.T-io服務端編寫

四.javascript用戶端編寫

繼續閱讀

.NET CF C# 位圖的任意角度旋轉

在核心模式驅動程式中調用 DLL

ASSERT與VERIFY宏的差別

WebBrowser獨立IE使用代理

java基礎知識問答集

Havok Physics 翻譯資料（1）Chapter 1.介紹

Facebook官方文檔學習 - 調用接口篇

python websocket 有多快啟動服務socket伺服器 sample_server.py前端頁面 index.html效果圖連結挺可靠，10分鐘沒斷過平均每秒 10000 QOS 吞吐django http 不做優化好像 1000 不到

用Windows Live Writer寫CSDN博

[轉] 擷取實時股票資料與股票資料接口API

RFC SDK 指南用戶端程式的編寫

Java8新的時間API擷取時間內插補點Java8新的時間API擷取時間內插補點與以前的java.util.Date擷取時間內插補點對比

手機軟體抓包工具及其使用方法

推薦一些VB的學習交流網站

GNU科學函數庫[參考手冊][v0.1 Build 090129 Beta][GNU Scientific Library]

與專家面對面：Android開發入門問與答