172 lines
4.4 KiB
Vue
172 lines
4.4 KiB
Vue
<template>
|
||
<div>
|
||
<div id="xterm"></div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import request from '@/utils/request2';
|
||
import {Terminal} from '../../utils/xterm/lib/xterm.js' //注意路径
|
||
|
||
var _this;
|
||
var commandKey = [];
|
||
var term;
|
||
var socket;
|
||
var sit;
|
||
export default {
|
||
name: "xterm",
|
||
data() {
|
||
return {
|
||
id: ''
|
||
}
|
||
},
|
||
// created() {
|
||
// let arr = ['../../utils/xterm/lib/xterm.js',
|
||
// '../../utils/xterm-addon/lib/xterm-addon-attach.js'];
|
||
// arr.map((item) => {
|
||
// let script = document.createElement('script');
|
||
// script.type = 'text/javascript';
|
||
// script.src = item;
|
||
// document.getElementsByTagName('body')[0].appendChild(script);
|
||
// });
|
||
// },
|
||
mounted() {
|
||
_this = this;
|
||
// _this.init();
|
||
},
|
||
methods: {
|
||
close() {
|
||
if(sit) {
|
||
clearInterval(sit);
|
||
}
|
||
if(socket) {
|
||
socket.close();
|
||
}
|
||
},
|
||
init(id) {
|
||
_this.id = id;
|
||
console.log(`当前节点ID为${id}`);
|
||
socket = new WebSocket(`ws://47.103.128.32:10050/socket/ssh?id=${id}&nodeId=${id}&type=ssh`);
|
||
//连接打开事件
|
||
socket.onopen = function () {
|
||
console.log("Socket 已打开");
|
||
};
|
||
//收到消息事件
|
||
socket.onmessage = function (msg) {
|
||
term.write(msg.data);//把接收的数据写到这个插件的屏幕上
|
||
if (msg.data.indexOf('连接成功，sessionId=') != -1) {
|
||
var sessionId = msg.data.slice(15);
|
||
console.log(sessionId)
|
||
} else {
|
||
console.log("常规数据：" + msg.data);
|
||
}
|
||
};
|
||
//连接关闭事件
|
||
socket.onclose = function () {
|
||
console.log("Socket已关闭");
|
||
};
|
||
//发生了错误事件
|
||
socket.onerror = function () {
|
||
alert("Socket发生了错误");
|
||
}
|
||
term = new Terminal({
|
||
rendererType: "canvas", //渲染类型
|
||
rows: parseInt(24), //行数
|
||
cols: parseInt(100), // 不指定行数，自动回车后光标从下一行开始
|
||
convertEol: true, //启用时，光标将设置为下一行的开头
|
||
scrollback: 10, //终端中的回滚量
|
||
disableStdin: false, //是否应禁用输入
|
||
cursorStyle: "underline", //光标样式
|
||
cursorBlink: true, //光标闪烁
|
||
theme: {
|
||
foreground: "yellow", //字体
|
||
background: "#060101", //背景色
|
||
cursor: "help" //设置光标
|
||
}
|
||
});
|
||
// const attachAddon = new AttachAddon(socket);
|
||
// term.loadAddon(attachAddon);
|
||
term.open(document.getElementById("xterm"));
|
||
// 支持输入与粘贴方法
|
||
term.onData(function (key) {
|
||
// console.log("|"+key+"|");
|
||
// commandKey.push(key);
|
||
// console.log(commandKey);
|
||
// term.write(key);
|
||
socket.send(key); //转换为字符串
|
||
});
|
||
|
||
term.onLineFeed(function () {
|
||
console.log("执行换行" + JSON.stringify(commandKey))
|
||
});
|
||
|
||
term.onTitleChange(function (key) {
|
||
console.log("onTitleChange:" + key);
|
||
});
|
||
|
||
//创建心跳，防止掉线
|
||
sit = setInterval(() => {
|
||
let op = {
|
||
data: "heart",
|
||
};
|
||
sendJson(op);
|
||
}, 5000);
|
||
|
||
runFakeTerminal();
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
function sendJson(data) {
|
||
// 0 CONNECTING 连接尚未建立
|
||
// 1 OPEN WebSocket的链接已经建立
|
||
// 2 CLOSING 连接正在关闭
|
||
// 3 CLOSED 连接已经关闭或不可用
|
||
if(socket.readyState == 2 || socket.readyState == 3) {
|
||
clearInterval(sit);
|
||
sit = null;
|
||
} else {
|
||
socket.send(JSON.stringify(data));
|
||
}
|
||
}
|
||
|
||
|
||
|
||
function runFakeTerminal() {
|
||
if (term._initialized) {
|
||
return;
|
||
}
|
||
term._initialized = true;
|
||
term.prompt = () => {
|
||
term.write('\r\n~$ ');
|
||
};
|
||
term.writeln('Welcome to xterm.js');
|
||
prompt(term);
|
||
term.onKey(e => {
|
||
const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey;
|
||
if (e.domEvent.keyCode === 13) {
|
||
prompt(term);
|
||
} else if (e.domEvent.keyCode === 8) {
|
||
// Do not delete the prompt
|
||
if (term._core.buffer.x > 2) {
|
||
// term.write('\b \b')
|
||
}
|
||
} else if (printable) {
|
||
// term.write(e.key);
|
||
}
|
||
console.log(commandKey);
|
||
console.log("key::" + e.domEvent.keyCode);
|
||
});
|
||
}
|
||
|
||
function prompt(term) {
|
||
// term.write('\r\n~$ ');
|
||
// term.focus();
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '../../utils/xterm/css/xterm.css';
|
||
</style>
|