山地人

idev365在线终端解密

山地人
山地人
2021-05-02

Online Terminal

这是站点对外开放的第二天,有小伙伴已经发现了idev365里的彩蛋——在线终端。

站点上线时,我把这个在线终端放在了Linux专栏里。

如果你还没有体验过,可以点这里,去尝试体验。

当然,为了避免你分心,我在下面放置了一个在线终端,你现在就可以点开下面的启动按钮,花几分钟时间体验这个在线终端。

怎么做到的?

接着,作为开发者的你,天然的好奇心就此产生,这究竟是怎么做到的?既然你这么想知道原理,那我就来满足一下你的好奇心。

先说下简单的原理: 你在站点上看到的这个终端实际是一个虚拟窗口,通过WebSocket连接到服务器。

当你点开启动按钮的那一刻,WebSocket就会努力为你建立一个浏览器页面和服务器的通道。

然后,服务器端会自动创建一个沙盒环境,为你接下来使用在线终端做准备,这里会用到Docker,借助Docker沙盒能力,你可以放心在其中做实验了。

如果你不小心弄坏了实验环境,比如删除了Linux里的重要文件,也不用担心,刷新一下浏览器,重启启动一次,你又会获得一个全新的实验环境。

具体技术

上面讲了原理,但是你如果还觉得不过瘾,非要把我实现用到的具体技术和库都告诉你,这…

好吧,既然你这么诚心,我也没必要对你隐藏,分享技术本来就是我做这个站点的目标。

技术栈详细说明
xterm.js这个库是我用来实现浏览器端模拟器用到的库,然后我用React组件对它封装了一个组件。
socket.io刚才说到的WebSocket我用了这个库,在浏览器端用这个库的client部分,后端node用它的server端API。
docker构建沙盒环境,当然少不了docker
express服务端我使用的是express,至于为什么选用express,这个纯粹是个人爱好。

把这些前后端技术组合在一起,就得到了我们需要的在线终端,这样,我就可以在不同的教程里,为你提供不同的在线练习环境了。

好了,这一篇的内容,我想讲的就差不多这些了,不知道是否满足了你的好奇心。