web console實現

一、效果圖

 

二、實現

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格式，進出都需要編碼、解碼。

核心指令代碼太長，就不貼了，有需要可以聯系我。