web console實現

1、效果圖

 

2、實現

web console是基於websocket實現的。

以上作的效果嵌入項目中，由於項目自己是angular1的項目，因此console總體封裝成一個angualr  module。

在這個獨立module上掛上封裝的指令，指令內部來實現上圖所示的全部操做、交互。

js 應用部分：

 ①       
.config(['kubernetesContainerSocketProvider',function(kubernetesContainerSocketProvider) {
         kubernetesContainerSocketProvider.WebSocketFactory = "CustomWebSockets";
 }])

 ②
 //定義factory，初始化  web console

.factory("CustomWebSockets", CustomWebSockets);      

 ③
CustomWebSockets.$inject = ['$location'];

function CustomWebSockets($location){
 return function CustomWebSocket(url) {
 url = 'ws://'+$location.host()+':'+$location.port()+'/websocket';
 return new WebSocket(url);
 };
}

html 片斷：

 <!--console-->
                        <md-tab id="terminal">
                            <md-tab-label>控制檯</md-tab-label>
                            <md-tab-body>
                                <kubernetes-container-terminal pod="wsParam" container="containerName" prevent="preventSocket" rows="rows" cols="cols" sendParam = "wsParam"  screen-keys="true" autofocus="true">
                                </kubernetes-container-terminal>
                            </md-tab-body>
                        </md-tab>

注意點：

數據交互形式爲  base64格式，進出都須要編碼、解碼。

核心指令代碼太長，就不貼了，有須要能夠聯繫我。