昨天研究了日志模块，今天来看看模拟终端界面，一般是使用现成的xterm.js，直接引入页面，使用websocket连接后端。今天我们就来研究研究：
Xtermjs的使用文档还是比较少，遇到问题还是不好解决，更适用于和后端服务器交互的场景，这里的话用于连接开发机器。开源的利用xtermjs的终端完整的项目还是比较少，这边我们看看能不能找到已有的轮子，不行咱就花时间做个简单的用作学习，后期慢慢完善。主要这块的功能的话为什么开源项目少，是有以下几个原因的：
1. xterm.js比较难以使用,需要处理跨域,WebSocket连接等较复杂的问题,学习曲线较陡。这会给开发者带来一定难度,减少其使用意愿。
2. xterm.js需要后端支持,至少需要一个WebSocket服务器。这增加了项目的复杂度和配置难度,并非所有前端开发者都熟悉后端技术,这也是阻碍其使用的原因之一。
3. xterm.js的视觉效果和交互体验难以满足用户需求,需要进一步定制化。但定制过程也比较复杂,需要编辑样式,更改选项等,门槛较高。这也在一定程度上影响了其开源项目的使用量。
4. 目前大多数项目的需求并不真的需要一个web终端,xterm.js的实际应用场景相对较少。因此,开发者考虑到项目复杂度,很少会选择引入xterm.js。
5. xterm.js的功能相比原生终端仍有一定差距,在支持度和稳定性上需要进一步提高。这也使一些开发者倾向直接使用系统终端,而非xterm.js。
xterm.js作为一个web终端模拟器,虽然功能强大,但使用还是比较负载,有后端依赖,功能和体验的差距,实际应用场景和开源项目使用量相对较少。除非是出于特定需求,一般开发还是更倾向选择简单可靠的方案。
顺道这里介绍下终端模拟器桌面版hyper
下载官网：
可以从
代码语言：javascript复制https://hyper.is下载，支持跨平台使用。
但是这个是桌面应用，我们目的是在web页面中嵌入，有没有相关项目呢：
开源项目地址：
代码语言：javascript复制https://github.com/tzfun/vue-web-terminal官网地址：
代码语言：javascript复制https://tzfun.github.io/vue-web-terminal/快速上手：
代码语言：javascript复制npm安装vue-web-terminal，2.x.x版本对应vue2，3.x.x版本对应vue3，建议下载对应大版本的最新版。
#install for vue2
npm install vue-web-terminal@2.xx --save
#install for vue3
npm install vue-web-terminal@3.xx –save
main.js中载入 Terminal插件
import Terminal from 'vue-web-terminal'
// for vue2
Vue.use(Terminal)
// for vue3
const app = createApp(App).use(Terminal)
使用示例
<template>
<div id="app">
<terminal name="my-terminal"
@exec-cmd="onExecCmd"></terminal>
</div>
</template>
<script>
import Terminal from
"vue-web-terminal"
export default {
name: 'App',
components: {Terminal},
methods: {
onExecCmd(key, command, success, failed) {
if (key === 'fail') {
failed('Something wrong!!!')
} else {
let allClass = ['success', 'error', 'system', 'info', 'warning'];
let clazz = allClass[Math.floor(Math.random() * allClass.length)];
success({
type: 'normal',
class: clazz,
tag: '成功',
content: command
})
}
}
}
}
</script>
<style>
body, html, #app {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
可以看出这是直接嵌入web页面中
作者一句话描述：
它并不具备执行某个具体命令的能力，这个能力需要开发者自己去实现，它负责的事情是在网页上以终端界面的形式从用户那拿到想要执行的命令，然后交给开发者去实现，执行完之后再交给它展示给用户。
所以如果想和后端交互，还需要自己拿来二次开发，嗯，容我再想想，反正先加到自己页面上，后面再开发一下。
按照作者说明改吧改吧标题内容啥的，后续如果需要和后端交互，估计用这个一时半会还弄不出来，看看后面用别人封装好的xtermjs插件：
至于终端这块，要是论专业，还是得用成熟的三方工具，这边就是简单的开发玩玩，后面就还是开发一个连接测试环境的终端页面，生产还是不建议。
好了，今天的分享就到这了，感兴趣的朋友点赞关注呀！
