适用于终端交互的插件JQuery Terminal

    xiaoxiao2021-04-16  36

    Terminal 插件可以在网站上实现终端交互效果。这可不是FTP或SSH终端,你可以定义交互的命令。 官网地址:http://terminal.jcubic.pl/

    适用 Terminal,首先要先下载相关的文件  ,并引入进去,这里的插件是基于jquery的,所以也要引入jquery.js,这里我就不展示出来了。 以上文件都可以从官网能拿到。 1,引入成功之后,要在页面写入一个节点: 2,我这里用的是WebSocket做的交互 $scope.getTeminal = function () { if(KubernetesData.state){ $scope.prompt = true socket = new WebSocket('ws://' + location.host +'/terminalService'); socket.onopen = function() { socket.send(JSON.stringify({ 'containerName':$scope.options.bucketT, 'url': row.proxyUrl, 'namespace':row.namespace, 'resourceName': row.name, 'command':'', 'flag':false }) ) }; socket.onmessage = function (event) { var obj = JSON.parse(event.data); $scope.socketFlag=obj.flag; }; setTimeout(function(){ $('#kebernet').terminal(function(command, term) { //开始执行 // Web Socket 已连接上,使用 send() 方法发送数据 if(command){ socket.send(JSON.stringify({ 'command':command, 'flag':$scope.socketFlag, }) ) term.disable() } socket.onmessage = function (event) { var obj = JSON.parse(event.data); if(obj.data){ $scope.socketFlag=obj.flag; term.echo(String(obj.data)); term.enable() }else{ term.enable() } }; }, { greetings: "",// height:500, width:'100%', 'font-size':'15px', prompt: '# ', onBlur: function() { // prevent loosing focus return false; } }); },100) }else{ $scope.prompt = false } }
    转载请注明原文地址: https://ju.6miu.com/read-672757.html

    最新回复(0)