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

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