<template>
<div id="xterm" class="xterm" style="width:100%; height: 100%;" />
<!-- <div class="page-content" id="bi-div-shell" style="height: 100%">
</div>-->
</template>
<script>
import 'xterm/css/xterm.css'
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'
import { AttachAddon } from 'xterm-addon-attach'
import {getShellUrl,getShellSessionId,fetchBusiPodList,getShellInfo} from '@/api/iresource/workplatform'
import { getToken,get } from '@/utils/auth'
export default {
name: 'Xterm',
props: {
taskId:String,
taskName:String
},
data () {
return {
serverId:"",
listQuery: {
busiId: this.taskId,
busiType: "WorkPlatform",
oneself: 1,
pageNum: 1,
pageSize: 50
},
list: null,
total: null,
totalPage: null,
pageSize: null,
}
},
created() {
console.log("-----shell created-------");
// this.getUrl()
this.getList(); //取参数,请求shell
},
// mounted() {
// console.log("-----shell mounted-------");
// // this.getShellUrlShow();
//
//
// },
beforeDestroy() {
this.socket.close()
this.term.dispose()
},
methods: {
async getList() {
// this.listLoading = true;
console.log(this.listQuery)
fetchBusiPodList(this.listQuery).then(response => {
this.listLoading = false;
console.log("response.data111");
console.log(response.data);
this.list = response.data.items;
// this.list = response.data;
this.total = response.data.total;
this.totalPage = response.data.totalPages;
this.pageSize = response.data.pageSize;
this.showContent();
});
},
async showContent(){
console.log("showContent");
console.log(this.list);
let item = this.list[0]
console.log(item);
console.log("item.busiID");
console.log(item.busiID);
getShellInfo(item.busiID).then(response => {
console.log("getShellInfo");
console.log(response.data);
let item = response.data[0];
this.serverId = response.data.id;
// this.initWebSocket();
//测试2
// let url = "ws://192.168.3.32:32103/iresource/terminal/ws/"+item.namespace+"/"+item.podName+"/"+item.container+"/webshell"
let url = "wss://"+document.location.host+"/shell/iresource/terminal/ws/"+item.namespace+"/"+item.podName+"/"+item.container+"/webshell"
console.log(url);
//测试3,ok
// let url ="ws://127.0.0.1:4001"
this.initSocket(url);
});
},
initSocket(url) {
const term = new Terminal({
fontSize: 14,
cursorBlink: true,
width:'100%',
height:'100%',
});
console.log("term");
console.log(term);
// const attachAddon = new AttachAddon(conn);
const fitAddon = new FitAddon();
// term.loadAddon(attachAddon);
term.loadAddon(fitAddon);
term.open(document.getElementById('xterm'));
// let podName ="cdida9f1ilrqc9buiesg-0";
// term.write("connecting to pod "+ podName + "...")
fitAddon.fit();
term.onData( function (data) {
// term.onData('data', function (data) {
console.log("onData");
console.log(data);
let msg = {operation: "stdin", data: data}
conn.send(JSON.stringify(msg))
});
term.onResize( function (size) {
// term.onData('resize', function (size) {
console.log("resize: " + size)
let msg = {operation: "resize", cols: size.cols, rows: rows}
conn.send(JSON.stringify(msg))
});
// term.focus();
// this.term = term
let conn = new WebSocket(url);
conn.onopen = function(e) {
term.write("\r");
let msg = {operation: "stdin", data: "export TERM=xterm && clear \r"}
conn.send(JSON.stringify(msg))
// term.clear()
};
conn.onmessage = function(event) {
let msg = JSON.parse(event.data)
if (msg.operation === "stdout") {
term.write(msg.data)
} else {
console.log("invalid msg operation: "+msg)
}
};
conn.onclose = function(event) {
if (event.wasClean) {
console.log(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
} else {
console.log('[close] Connection died');
term.writeln("")
}
term.write('Connection Reset By Peer! Try Refresh.');
};
conn.onerror = function(error) {
console.log('[error] Connection error');
term.write("error: "+error.message);
term.destroy();
};
},
}
}
</script>
服务端做了发布:http或https的端口,然后在请求头上增加安全token,接着再转中请求;
全屏满屏处理:
xterm 3.x:
term.toggleFullScreen(); //全屏 (未测试)
xterm 4.x:
setTimeout(() => { //延时满屏
this.fitAddon.fit()
}, 60) // 而且不能是0 ,xterm 生成时间在2ms左右
错误:Vue中 xterm4.x报Uncaught TypeError: r[i].call is not a function
是没有增加term.onData方法;
term.onData( function (data) { // term.onData('data', function (data) { console.log("onData"); console.log(data); let msg = {operation: "stdin", data: data} conn.send(JSON.stringify(msg)) });
参考:
xterm.js + vue + websocket实现终端功能(xterm 3.x+xterm 4.x)_仙女爱吃鱼的博客-CSDN博客_xterm.js xterm.js + vue + websocket实现终端功能(xterm 3.x+xterm 4.x)
xterm.js 基于websocket 链接容器 命令行工具
通过浏览器连接docker容器_普通网友的博客-CSDN博客_浏览器连接docker 通过浏览器连接docker容器
vue xterm.js命令行使用及问题解决_潇蓝诺依的博客-CSDN博客_xtermjs vue xterm.js命令行使用及问题解决
https://blog.csdn.net/wbdisb/article/details/124278817
Vue父组件调用子组件的方法
https://blog.csdn.net/qq_31126175/article/details/121608015
xterm.js 使用及问题【新】