web终端界面模块开发

希里安 2023-05-10

1855

关注“希里安”，get更多有用干货

昨天研究了日志模块，今天来看看模拟终端界面，一般是使用现成的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

下载官网：

可以从

https://hyper.is

下载，支持跨平台使用。

但是这个是桌面应用，我们目的是在web页面中嵌入，有没有相关项目呢：

开源项目地址：

https://github.com/tzfun/vue-web-terminal

官网地址：

https://tzfun.github.io/vue-web-terminal/

快速上手：

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>