xterm.js 基于websocket 链接容器 命令行工具
<template>
<div>
<el-dialog title="命令" :visible.sync="dialogTableVisible" v-loading="loading">
<el-row class="box-row" style="width:780px; ">
<el-card class="box-card" style="width:580px; background:#F5F5F5;height:400px;overflow-x:scroll;overflow-y:scroll; font-size:12px" >
<div id="terminal"></div>
</el-card>
</el-row>
</el-dialog>
</div>
</template>
<script>
import { exec_socket } from '@/api/paasApi'
import "xterm/dist/xterm.css"
import { Terminal } from 'xterm';
//import {terminal}from 'terminal-kit'
export default {
name: 'terminal',
data() {
return {
dialogTableVisible: false,
dialogFormVisible: false,
formLabelWidth: '120px',
serviceid:null,
loading:false,
loginfo:'',
};
},
methods:{
terminal(id){
exec_socket(id).then(response=>{
let linkpath=response.url+'?token='+response.token
this.socket(linkpath)
console.log('linkpath',linkpath)
},function(err){
})
},
socket(linkpath){
let ws = new WebSocket(linkpath);
var that=this
var xterm = new Terminal({
cols: 100,
rows: 20,
cursorBlink: 5,
scrollback: 30,
tabStopWidth: 4
}); // Instantiate the terminal
xterm.open(document.getElementById('terminal'));
// xterm.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
//xterm.attach(ws);
//xterm.fit();
ws.onerror = function () { showErrorMessage('connect error.') };
ws.onmessage = function(event) {
console.log('on message:',that.decodeBase64Content(event.data))
xterm.write(that.decodeBase64Content(event.data));
};
ws.onopen = function () {
console.log('ws onopen ')
}
console.log(xterm.element.classList);
// Log the keyCode of every keyDown event
xterm.textarea.onkeydown = function (e) {
console.log('User pressed key with keyCode: ', e.keyCode);
//console.log('编码',)
//ws.send(that.encodeBase64Content(e.keyCode.toString()));
//ws.send('bHM=');
}
xterm.attachCustomKeyEventHandler(function (e) {
if (e.keyCode == 13) {
console.log('enter')
ws.send('DQ==')
return false;
}
});
xterm.on('data',function(data){
console.log('data xterm=>',data)
//xterm.write(data);
ws.send(that.encodeBase64Content(data.toString()))
})
xterm.on('output', arrayBuffer => {
console.log('output===',arrayBuffer)
xterm.write(arrayBuffer);
});
xterm.on('blur', arrayBuffer => {
console.log('blur===',arrayBuffer)
xterm.write(arrayBuffer);
});
xterm.on('focus', arrayBuffer => {
console.log('focus===',arrayBuffer)
xterm.write(arrayBuffer);
});
/* xterm.on('key', arrayBuffer => {
console.log('key===',arrayBuffer)
xterm.write(arrayBuffer);
});*/
xterm.on('keydown', arrayBuffer => {
console.log('keydown===',arrayBuffer)
xterm.write(arrayBuffer);
});
xterm.on('lineFeed', arrayBuffer => {
console.log('lineFeed===',arrayBuffer)
xterm.write(arrayBuffer);
});
xterm.on('resize', size => {
ws.send('resize', [size.cols, size.rows]);
console.log('resize', [size.cols, size.rows]);
})
//xterm.on('data', data => socket.emit('input', data));
},
decodeBase64Content(base64Content) {
// base64 解码
let commonContent = base64Content.replace(/\s/g, '+');
commonContent = Buffer.from(commonContent, 'base64').toString();
return commonContent;
},
encodeBase64Content(commonContent) {
// base64 编码
let base64Content = Buffer.from(commonContent).toString('base64');
return base64Content;
},
},
created(){
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.marin{
margin: 4px;
}
.padding-left10{
padding-left: 10px;
}
</style>
xterm.js 基于websocket 链接容器 命令行工具的更多相关文章
- 让你如绅士般基于描述编写 Python 命令行工具的开源项目:docopt
作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...
- 用 shell 脚本做命令行工具扩展
问题的提出 公司开发机与远程服务器之间有严格的隔离策略,不能直接使用 ssh 登录,而必需通过跳板机.这样一来,本地与服务器之间的一些文件传输变得非常不便.经过咨询,运维教了我一招: $ nc -l ...
- Nodejs 如何制作命令行工具
# 全局安装,安装报错是需要前面加上sudo $ sudo npm install -g xxxb # 输出帮助 $ xxxb -h Usage: xxxb 这里是我私人玩耍的命令哦![options ...
- 微软开放技术发布针对 Mac 和 Linux 的更新版 Azure Node.JS SDK 和命令行工具
发布于 2013-12-04 作者 Eduard Koller 这次为我们使用Linux 的朋友带来了更多关于部署云上虚拟机的消息.今天,微软开放技术有限公司 (MS Open Tech),想与大家分 ...
- react.js 之 create-react-app 命令行工具系统讲解
react.js 教程之 create-react-app 命令行工具系统讲解 快速开始 npm install -g create-react-app create-react-app my-app ...
- Node.js躬行记(3)——命令行工具
一.自定义 创建一个空目录,然后通过npm init命令初始化package.json文件,并按提示输入相关信息或直接回车使用默认信息,生成的内容如下所示. { "name": & ...
- 基于node和npm的命令行工具——tive-cli
前端开发过程中经常会用到各种各样的脚手架工具.npm全局工具包等命令行工具,如:Vue脚手架@vue/cli.React脚手架create-react-app.node进程守卫工具pm2.本地静态服务 ...
- GitBook是一个命令行工具(Node.js库),我们可以借用该工具使用Github/Git和Markdown来制作精美的图书,但它并不是一本关于Git的教程哟。
GitBook是一个命令行工具(Node.js库),我们可以借用该工具使用Github/Git和Markdown来制作精美的图书,但它并不是一本关于Git的教程哟. 支持输出多种格式 GitBook支 ...
- Node.js 命令行工具的编写
日常开发中,编写 Node.js 命令行工具来完成一些小任务是很常见的操作.其编写也不难,和日常编写 Node.js 代码并无二致. package.json 中的 bin 字段 一个 npm 模块, ...
随机推荐
- 《百词斩·象形9000》第一册(下) 符号Symbol 1
001-version n.版本:译文 This is the first version of the software #这是软件开发的第一个版本: 002-element n.成分:要素:元素: ...
- 缓存淘汰算法之LFU
1. LFU类 1.1. LFU 1.1.1. 原理 LFU(Least Frequently Used)算法根据数据的历史访问频率来淘汰数据,其核心思想是“如果数据过去被访问多次,那么将来被访问的频 ...
- iOS学习笔记26-视频播放
一.视频 在iOS中播放视频可以使用两个框架来实现: MediaPlayer框架的MPMoviePlayerController和MPMoviePlayerViewController AVFound ...
- UVa——400Unix ls(字典序文本处理输出iomanip)
Unix ls Time Limit: 3000MS ...
- d3 根据数据绘制svg
, , , , ]; var circles = svg.selectAll("circle") .data(dataset) .enter() .append("cir ...
- zoj 2974 Just Pour the Water矩阵快速幂
Just Pour the Water Time Limit: 2 Seconds Memory Limit: 65536 KB Shirly is a very clever girl. ...
- Distinct Substrings(spoj 694)
题意:要求不同子串的个数 /* 先求出height数组,不难看出height之和就是重复的字符串个数,用总的减去它就行了. */ #include<cstdio> #include< ...
- 【HDOJ5974】A Simple Math Problem(构造,解方程)
题意:给定A与B,要求构造出一组X,Y,使得X+Y=A,lcm(X,Y)=B A<=2e4,B<=1e9 思路:A的范围较小,考虑以A为突破口 枚举A的约数k,复杂度O(sqrt(A)) ...
- Android Tools update proxy
Android Tools Android SDK在线更新镜像服务器 中国科学院开源协会镜像站地址: IPV4/IPV6: http://mirrors.opencas.cn 端口:80 IPV4/I ...
- TinyXML2使用教程(转)
原文转自 http://blog.csdn.net/K346K346/article/details/48750417 1.TinyXML2概述 TinyXML2是simple.small.effic ...