<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 链接容器 命令行工具
原文地址：https://www.cnblogs.com/freefei/p/8976802.html