WebSocket在容器化管理平臺的應用

weixin_34075268發表於2017-04-24
Web

介紹

Websocket是一個持久化協議，相對於HTTP這種非持久協議而言。它實現了瀏覽器與伺服器全雙工通訊，能更好的節省伺服器資源和頻寬並達到實時通訊的目的,與HTTP一樣基於已建立的TCP連線來傳輸資料。但是與HTTP協議不同的地方就是：WebSocket是一種雙向通訊協議，在建立連線後，WebSocket伺服器端和客戶端都能主動向對方傳送或接收資料，就像Socket一樣；WebSocket需要像TCP一樣，先建立連線，連線成功後才能相互通訊。

執行機制

傳統的HTTP客戶端與伺服器請求響應模式，一個生命週期裡只有一個或多個請求和一個或多個與之對應的響應。
如下所示：


3611024-f357b43f88853bd1.png

而WebSocket模式下客戶端與伺服器響應模式,一旦WebSocket連線建立，在客戶端或者服務端中斷連線前，資料都以幀序列傳輸，不需要重啟客戶端或者服務端重新發起連線請求。

3611024-64103d2340728336.png
  1. 客戶端發起請求
Request Method:GET
Status Code:101 Switching Protocols #101之後的資料傳輸採用Websocket協議
Connection:Upgrade
Sec-WebSocket-Extensions:permessage-deflate;
Sec-WebSocket-Key:dfQAy9mlQ0EjD5MmvvsZaQ== #驗證
Sec-WebSocket-Version:13
Upgrade:websocket #客戶端支援websocket協議，如果伺服器也支援就使用WebSocket協議
  1. 伺服器解析，並返回握手資訊，建立連線
Connection:upgrade
sec-websocket-accept:+mKC4huknIfMGJFOzclP9fO058g= #驗證
upgrade:websocket
  1. 傳輸資料(雙向)
  2. 斷開連線

應用場景

WebSocket屬於Web領域的實時推送技術，目的讓使用者不重新整理瀏覽器就可以實時更新。其在容器化管理平臺裡主要有兩個應用場景型別，一個是實時訊息類，將實時日誌、業務監控等相關資訊推送給客戶端。如：在容器化管理平臺裡部署了一個應用，那麼應用部署的日誌、執行日誌以及監控資訊如何及時推送到前端呢，另外一個就是互動訊息類，在Web介面操作容器，節省手動登入伺服器進入容器內的時間，提高效率。

例項1:實時訊息

就拿雲幫而言，需要實時推送的是每個應用的日誌資訊和業務監控資料。那麼我們在處理實時訊息時就採用了WebSocket與ZMQ相結合的方式，快速實現將應用日誌資訊推送到web端。其簡化模型如下所示：


3611024-eb4a2e0eebff74ee.png

客戶端與伺服器採用WebSocket協議，實時傳輸相關資料。相關資料方面採用的是ZMQ。雲幫主要使用了ZeroMQ訊息佇列中的Publisher-Subscriber模型,將所有相關資訊彙總到一個節點上在推送到其他節點上。即客戶端(SUB)向伺服器(PUB)訂閱訊息，然後伺服器將訊息推送到所有訂閱了訊息到客戶端，類似於廣播。之所以採用ZMQ，而不是Socket的原因，前者支援N:M的連線,後者只能1:1的連線。其訊息佇列模型示意圖：

3611024-56c16f8f18d48032.jpg

具體的應用場景相關設定引數：

#docker-compose.yml
mpush:
  container_name: mpush
  environment:
  - ZMQ_SUB_FROM=tcp://ip:9242
  image: hub.goodrain.com/dc-deploy/mpush
  log_driver: json-file
  log_opt:
    max-size: 50m
  ports:
  - 0.0.0.0:6060:6060
  restart: always

#config.py 定義實時訊息URL
WEBSOCKET_URL = {
    'cloudbang': 'ws://ip:6060/websocket',
}
#dalaran_docker
ZMQ_BIND_SUB=tcp://0.0.0.0:9241
ZMQ_BIND_PUB=tcp://0.0.0.0:9242
ZMQ_BIND_PUB2=tcp://0.0.0.0:9243
#setting
'docker_sub': {
        'address': [
            'tcp://ip:9242'
        ],
        'storage': '/data/docker_logs'
    },

例項2:互動訊息

GoTTY是一個用Go語言開發的工具,可以將作業系統的命令字元終端共享成普通的網頁應用展示出來。
在mac安裝根據情況選擇一種

#brew
brew tap yudai/gotty
brew install gotty
#go
go get github.com/yudai/gotty

使用：

gotty -a 0.0.0.0 -p '8080' -w tmux
3611024-10db9e273f56b6da.png
3611024-deca55f4c4d23baa.png

那麼在雲幫，我們又是如何解決這個問題的？
雲幫web端操作容器就是基於gotty定製開發的WebSocket共享字元終端。
建立一個websocket例項,連線伺服器進行前後臺互動及相關事件處理

#前端實現部分程式碼
var openWs = function() {
        if(is_community == "True"){
            host_name = window.location.hostname+":8188";
        }
        var url = tmp_url.replace("{{DOCKER_WSS_URL}}",host_name)
        console.log(url)
        var ws = new WebSocket(url);
        var term;
        var pingTimer;
        ws.onopen = function(event) {
            ws.send(JSON.stringify({ T_id: t_id, S_id: s_id, C_id: c_id, Md5: md5,}));
            pingTimer = setInterval(sendPing, 30 * 1000, ws);
            hterm.defaultStorage = new lib.Storage.Local();
            hterm.defaultStorage.clear();
            term = new hterm.Terminal();
            term.getPrefs().set("send-encoding", "raw");
            term.onTerminalReady = function() {
                var io = term.io.push();
                io.onVTKeystroke = function(str) {
                    ws.send("0" + str);
                };
                io.sendString = io.onVTKeystroke;
                io.onTerminalResize = function(columns, rows) {
                    ws.send(
                        "2" + JSON.stringify(
                            {
                                columns: columns,
                                rows: rows,
                            }
                        )
                    )
                };
                term.installKeyboard();
            };
            term.decorate(document.getElementById("terminal"));
        };

後端程式基於Gotty開發的。

相關文章