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格式，进出都需要编码、解码。

核心指令代码太长，就不贴了，有需要可以联系我。