一次web模拟终端的简单实现

此文的背景是因为我以前恰好有一个项目配合运维作一个页面模拟终端可以ssh远程链接到指定服务器，相似devops的那一种吧，虽然也不是什么高大上的东西，咱们常常会在一些云服务器后台上面看到而且使用过，可是以前也没有亲自实现过，因此用此文记录一下过程。

技术选型

此文不是造轮子....

此文不是造轮子....

此文不是造轮子....

此文不是造轮子....

...

其实如今前端业界已经覆盖了不少角度都有相对成熟的轮子了，因此咱们确定秉承拿来即用的最高原则。通过一番搜索，也很快的定位了xterm：www.npmjs.com/package/xte…, 听说这个vscode的终端也是用这个，这里我也没深究。

xterm

这里也就简单介绍一下，xterm.js是一个功能强大的浏览器端模拟终端的前端组件，支持typescript（敲黑板）。

而后它支持大部分的CLI应用(shell), 好比bash, vim等等。。。丰富的unicode支持，较多的扩展功能。总体来讲仍是蛮强大的。

vue

这个就不介绍了，我接手的时候运维本身用vue-cli建的项目。

代码撸起来

teamplate & style

首先是vue的template块和style块，超级简单的 页面标题，副标题（显示目标服务器名称）, 还有一个终端容器。

script

重点来了（其实也敲级简单- -||）

首先简单的建立一个简单xterm示例并挂载到页面上.

而后这个时候你会发现只看到一个光标在上面闪可是不能输入任何东西。由于毕竟它不是一个真正的CLI程序，因此咱们要启动一个真正的CLI程序并将交互呈如今这个模拟器上面，而后用websocket做为通讯的桥梁。

这里咱们将会引入两个xterm的扩展，分别是fit和attach，更多的官方扩展参考github.com/xtermjs/xte….

• fit， 使终端填充满容器.
• attach, 经过websocket链接上一个正在运行进程的服务器。

代码以下：

经过applyAddon加载扩展, 而后在适当的时期显式调用xterm.fit()和xterm.attach()。

而后在组件的mounted生命周期里面创建websocket链接：

最后结合下面server块创建的服务，就能看到如下效果：

能够看到动图里面能够自由的输入命令跟操做本机终端是同样的效果！

最后把完整的组件代码放出来：

server

在使用扩展链接服务器以前，咱们这里先准备一个demo服务，新建一个websocket的demo项目，安装node-pty模块和ws模块， 代码以下：

结语

这只是简单的实现了一个终端的投射，实际项目中还会有更细致和复杂的需求，能够深度挖掘xterm，或者本身写自定义扩展等等，由于只是demo代码，上面代码出现的一些不怎么好的写法还请各位看官勿喷， 感谢阅读。