WebSocket在容器化管理平台的应用-JobPlus

介绍

Websocket是一个持久化协议，相对于HTTP这种非持久协议而言。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的,与HTTP一样基于已建立的TCP连接来传输数据。但是与HTTP协议不同的地方就是：WebSocket是一种双向通信协议，在建立连接后，WebSocket服务器端和客户端都能主动向对方发送或接收数据，就像Socket一样;WebSocket需要像TCP一样，先建立连接，连接成功后才能相互通信。

运行机制

传统的HTTP客户端与服务器请求响应模式，一个生命周期里只有一个或多个请求和一个或多个与之对应的响应。如下所示：

而WebSocket模式下客户端与服务器响应模式,一旦WebSocket连接建立，在客户端或者服务端中断连接前，数据都以帧序列传输，不需要重启客户端或者服务端重新发起连接请求。

1.客户端发起请求

1. Request Method:GET

2. Status Code:101 Switching Protocols #101之后的数据传输采用Websocket协议

3. Connection:Upgrade

4. Sec-WebSocket-Extensions:permessage-deflate;

5. Sec-WebSocket-Key:dfQAy9mlQ0EjD5MmvvsZaQ== #验证

6. Sec-WebSocket-Version:13

7. Upgrade:websocket #客户端支持websocket协议，如果服务器也支持就使用WebSocket协议

2.服务器解析，并返回握手信息，建立连接

1. Connection:upgrade

2. sec-websocket-accept:+mKC4huknIfMGJFOzclP9fO058g= #验证

3. upgrade:websocket

3.传输数据(双向)

4.断开连接

应用场景

WebSocket属于Web领域的实时推送技术，目的让用户不刷新浏览器就可以实时更新。其在容器化管理平台里主要有两个应用场景类型，一个是实时消息类，将实时日志、业务监控等相关信息推送给客户端。如：在容器化管理平台里部署了一个应用，那么应用部署的日志、运行日志以及监控信息如何及时推送到前端呢，另外一个就是交互消息类，在Web界面操作容器，节省手动登录服务器进入容器内的时间，提高效率。

实例1:实时消息

就拿云帮而言，需要实时推送的是每个应用的日志信息和业务监控数据。那么我们在处理实时消息时就采用了WebSocket与ZMQ相结合的方式，快速实现将应用日志信息推送到web端。其简化模型如下所示：

客户端与服务器采用WebSocket协议，实时传输相关数据。相关数据方面采用的是ZMQ。云帮主要使用了ZeroMQ消息队列中的Publisher-Subscriber模型,将所有相关信息汇总到一个节点上在推送到其他节点上。即客户端(SUB)向服务器(PUB)订阅消息，然后服务器将消息推送到所有订阅了消息到客户端，类似于广播。之所以采用ZMQ，而不是Socket的原因，前者支持N:M的连接,后者只能1:1的连接。其消息队列模型示意图：

具体的应用场景相关设定参数：

1. #docker-compose.yml

2. mpush:

3. container_name: mpush

4. environment:

5. - ZMQ_SUB_FROM=tcp://ip:9242

6. image: hub.goodrain.com/dc-deploy/mpush

7. log_driver: json-file

8. log_opt:

9. max-size: 50m

10. ports:

11. - 0.0.0.0:6060:6060

12. restart: always

13.

14. #config.py 定义实时消息URL

15. WEBSOCKET_URL = {

16. 'cloudbang': 'ws://ip:6060/websocket',

17. }

18. #dalaran_docker

19. ZMQ_BIND_SUB=tcp://0.0.0.0:9241

20. ZMQ_BIND_PUB=tcp://0.0.0.0:9242

21. ZMQ_BIND_PUB2=tcp://0.0.0.0:9243

22. #setting

23. 'docker_sub': {

24. 'address': [

25. 'tcp://ip:9242'

26. ],

27. 'storage': '/data/docker_logs'

28. },

实例2:交互消息

GoTTY是一个用Go语言开发的工具,可以将操作系统的命令字符终端共享成普通的网页应用展示出来。在mac安装根据情况选择一种

1. #brew

2. brew tap yudai/gotty

3. brew install gotty

4. #go

5. go get github.com/yudai/gotty

使用：

1. gotty -a 0.0.0.0 -p '8080' -w tmux

那么在云帮，我们又是如何解决这个问题的? 云帮web端操作容器就是基于gotty定制开发的WebSocket共享字符终端。创建一个websocket实例,连接服务器进行前后台交互及相关事件处理

1. #前端实现部分代码

2. var openWs = function() {

3. if(is_community == "True"){

4. host_name = window.location.hostname+":8188";

5. }

6. var url = tmp_url.replace("{{DOCKER_WSS_URL}}",host_name)

7. console.log(url)

8. var ws = new WebSocket(url);

9. var term;

10. var pingTimer;

11. ws.onopen = function(event) {

12. ws.send(JSON.stringify({ T_id: t_id, S_id: s_id, C_id: c_id, Md5: md5,}));

13. pingTimer = setInterval(sendPing, 30 * 1000, ws);

14. hterm.defaultStorage = new lib.Storage.Local();

15. hterm.defaultStorage.clear();

16. term = new hterm.Terminal();

17. term.getPrefs().set("send-encoding", "raw");

18. term.onTerminalReady = function() {

19. var io = term.io.push();

20. io.onVTKeystroke = function(str) {

21. ws.send("0" + str);

22. };

23. io.sendString = io.onVTKeystroke;

24. io.onTerminalResize = function(columns, rows) {

25. ws.send(

26. "2" + JSON.stringify(

27. {

28. columns: columns,

29. rows: rows,

30. }

31. )

32. )

33. };

34. term.installKeyboard();

35. };

36. term.decorate(document.getElementById("terminal"));

37. };

后端程序基于Gotty开发的。

介绍 Websocket是一个持久化协议，相对于HTTP这种非持久协议而言。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的,与HTTP一样基于已建立的TCP连接来传输数据。但是与HTTP协议不同的地方就是：WebSocket是一种双向通信协议，在建立连接后，WebSocket服务器端和客户端都能主动向对方发送或接收数据，就像Socket一样;WebSocket需要像TCP一样，先建立连接，连接成功后才能相互通信。<a href="http://#" onclick="return false;"><img src="https://file.jobplus.com.cn/2017/07/21/efa8de8c761f48b0848a02bc1c052796.png" _src="https://file.jobplus.com.cn/2017/07/21/efa8de8c761f48b0848a02bc1c052796.png"/></a>运行机制传统的HTTP客户端与服务器请求响应模式，一个生命周期里只有一个或多个请求和一个或多个与之对应的响应。 如下所示：<a href="http://#" onclick="return false;"><img src="https://file.jobplus.com.cn/2017/07/21/2022fb5c9f7d4456b2e841b1366b4130.png" _src="https://file.jobplus.com.cn/2017/07/21/2022fb5c9f7d4456b2e841b1366b4130.png"/></a>而WebSocket模式下客户端与服务器响应模式,一旦WebSocket连接建立，在客户端或者服务端中断连接前，数据都以帧序列传输，不需要重启客户端或者服务端重新发起连接请求。<a href="http://#" onclick="return false;"><img src="https://file.jobplus.com.cn/2017/07/21/499886387f8841689b57cb5067030255.png" _src="https://file.jobplus.com.cn/2017/07/21/499886387f8841689b57cb5067030255.png"/></a>1.客户端发起请求1. Request Method:GET 2. Status Code:101 Switching Protocols #101之后的数据传输采用Websocket协议 3. Connection:Upgrade 4. Sec-WebSocket-Extensions:permessage-deflate; 5. Sec-WebSocket-Key:dfQAy9mlQ0EjD5MmvvsZaQ== #验证 6. Sec-WebSocket-Version:13 7. Upgrade:websocket #客户端支持websocket协议，如果服务器也支持就使用WebSocket协议 2.服务器解析，并返回握手信息，建立连接1. Connection:upgrade 2. sec-websocket-accept:+mKC4huknIfMGJFOzclP9fO058g= #验证 3. upgrade:websocket 3.传输数据(双向)4.断开连接应用场景WebSocket属于Web领域的实时推送技术，目的让用户不刷新浏览器就可以实时更新。其在容器化管理平台里主要有两个应用场景类型，一个是实时消息类，将实时日志、业务监控等相关信息推送给客户端。如：在容器化管理平台里部署了一个应用，那么应用部署的日志、运行日志以及监控信息如何及时推送到前端呢，另外一个就是交互消息类，在Web界面操作容器，节省手动登录服务器进入容器内的时间，提高效率。实例1:实时消息就拿云帮而言，需要实时推送的是每个应用的日志信息和业务监控数据。那么我们在处理实时消息时就采用了WebSocket与ZMQ相结合的方式，快速实现将应用日志信息推送到web端。其简化模型如下所示：<a href="http://#" onclick="return false;"><img src="https://file.jobplus.com.cn/2017/07/21/7bcfbceb2c334be4b7a630a5acb30de7.png" _src="https://file.jobplus.com.cn/2017/07/21/7bcfbceb2c334be4b7a630a5acb30de7.png"/></a>客户端与服务器采用WebSocket协议，实时传输相关数据。相关数据方面采用的是ZMQ。云帮主要使用了ZeroMQ消息队列中的Publisher-Subscriber模型,将所有相关信息汇总到一个节点上在推送到其他节点上。即客户端(SUB)向服务器(PUB)订阅消息，然后服务器将消息推送到所有订阅了消息到客户端，类似于广播。之所以采用ZMQ，而不是Socket的原因，前者支持N:M的连接,后者只能1:1的连接。其消息队列模型示意图：<a href="http://#" onclick="return false;"><img src="https://file.jobplus.com.cn/2017/07/21/e80415a1aac343a8b0d75990967e6142.png" _src="https://file.jobplus.com.cn/2017/07/21/e80415a1aac343a8b0d75990967e6142.png"/></a>具体的应用场景相关设定参数：1. #docker-compose.yml 2. mpush: 3.   container_name: mpush 4.   environment: 5.   - ZMQ_SUB_FROM=tcp://ip:9242 6.   image: hub.goodrain.com/dc-deploy/mpush 7.   log_driver: json-file 8.   log_opt: 9.     max-size: 50m 10.   ports: 11.   - 0.0.0.0:6060:6060 12.   restart: always 13.  14. #config.py 定义实时消息URL 15. WEBSOCKET_URL = { 16.     'cloudbang': 'ws://ip:6060/websocket', 17. } 18. #dalaran_docker 19. ZMQ_BIND_SUB=tcp://0.0.0.0:9241 20. ZMQ_BIND_PUB=tcp://0.0.0.0:9242 21. ZMQ_BIND_PUB2=tcp://0.0.0.0:9243 22. #setting 23. 'docker_sub': { 24.         'address': [ 25.             'tcp://ip:9242' 26.         ], 27.         'storage': '/data/docker_logs' 28.     }, 实例2:交互消息GoTTY是一个用Go语言开发的工具,可以将操作系统的命令字符终端共享成普通的网页应用展示出来。 在mac安装根据情况选择一种1. #brew 2. brew tap yudai/gotty 3. brew install gotty 4. #go 5. go get github.com/yudai/gotty 使用：1. gotty -a 0.0.0.0 -p '8080' -w tmux <a href="http://#" onclick="return false;"><img src="https://file.jobplus.com.cn/2017/07/21/0be5d885cf2a4a6dacf8e7c25c9ed991.png" _src="https://file.jobplus.com.cn/2017/07/21/0be5d885cf2a4a6dacf8e7c25c9ed991.png"/></a><a href="http://#" onclick="return false;"><img src="https://file.jobplus.com.cn/2017/07/21/0ee79b4663314894af4a693a56aa374d.png" _src="https://file.jobplus.com.cn/2017/07/21/0ee79b4663314894af4a693a56aa374d.png"/></a>那么在云帮，我们又是如何解决这个问题的? 云帮web端操作容器就是基于gotty定制开发的WebSocket共享字符终端。 创建一个websocket实例,连接服务器进行前后台交互及相关事件处理1. #前端实现部分代码 2. var openWs = function() { 3.         if(is_community == "True"){ 4.             host_name = window.location.hostname+":8188"; 5.         } 6.         var url = tmp_url.replace("{{DOCKER_WSS_URL}}",host_name) 7.         console.log(url) 8.         var ws = new WebSocket(url); 9.         var term; 10.         var pingTimer; 11.         ws.onopen = function(event) { 12.             ws.send(JSON.stringify({ T_id: t_id, S_id: s_id, C_id: c_id, Md5: md5,})); 13.             pingTimer = setInterval(sendPing, 30 * 1000, ws); 14.             hterm.defaultStorage = new lib.Storage.Local(); 15.             hterm.defaultStorage.clear(); 16.             term = new hterm.Terminal(); 17.             term.getPrefs().set("send-encoding", "raw"); 18.             term.onTerminalReady = function() { 19.                 var io = term.io.push(); 20.                 io.onVTKeystroke = function(str) { 21.                     ws.send("0" + str); 22.                 }; 23.                 io.sendString = io.onVTKeystroke; 24.                 io.onTerminalResize = function(columns, rows) { 25.                     ws.send( 26.                         "2" + JSON.stringify( 27.                             { 28.                                 columns: columns, 29.                                 rows: rows, 30.                             } 31.                         ) 32.                     ) 33.                 }; 34.                 term.installKeyboard(); 35.             }; 36.             term.decorate(document.getElementById("terminal")); 37.         }; 后端程序基于Gotty开发的。

关于我们

法律声明

帮助中心

商务合作

相关文章

关于我们

法律声明

帮助中心

商务合作