一次web模擬終端的簡單實現

此文的背景是因爲我以前恰好有一個項目配合運維作一個頁面模擬終端可以ssh遠程鏈接到指定服務器，相似devops的那一種吧，雖然也不是什麼高大上的東西，咱們常常會在一些雲服務器後臺上面看到而且使用過，可是以前也沒有親自實現過，因此用此文記錄一下過程。前端

技術選型

此文不是造輪子....vue

此文不是造輪子....node

此文不是造輪子....git

此文不是造輪子....github

...web

其實如今前端業界已經覆蓋了不少角度都有相對成熟的輪子了，因此咱們確定秉承拿來即用的最高原則。通過一番搜索，也很快的定位了xterm：www.npmjs.com/package/xte…, 聽說這個vscode的終端也是用這個，這裏我也沒深究。vue-cli

這裏也就簡單介紹一下，xterm.js是一個功能強大的瀏覽器端模擬終端的前端組件，支持typescript（敲黑板）。typescript

而後它支持大部分的CLI應用(shell), 好比bash, vim等等。。。豐富的unicode支持，較多的擴展功能。總體來講仍是蠻強大的。shell

這個就不介紹了，我接手的時候運維本身用vue-cli建的項目。npm

首先是vue的template塊和style塊，超級簡單的 頁面標題，副標題（顯示目標服務器名稱）, 還有一個終端容器。

重點來了（其實也敲級簡單- -||）

首先簡單的建立一個簡單xterm示例並掛載到頁面上.

而後這個時候你會發現只看到一個光標在上面閃可是不能輸入任何東西。由於畢竟它不是一個真正的CLI程序，因此咱們要啓動一個真正的CLI程序並將交互呈如今這個模擬器上面，而後用websocket做爲通訊的橋樑。

這裏咱們將會引入兩個xterm的擴展，分別是fit和attach，更多的官方擴展參考github.com/xtermjs/xte….

代碼以下：

經過applyAddon加載擴展, 而後在適當的時期顯式調用xterm.fit()和xterm.attach()。

而後在組件的mounted生命週期裏面創建websocket鏈接：

最後結合下面server塊創建的服務，就能看到如下效果：

能夠看到動圖裏面能夠自由的輸入命令跟操做本機終端是同樣的效果！

最後把完整的組件代碼放出來：

在使用擴展鏈接服務器以前，咱們這裏先準備一個demo服務，新建一個websocket的demo項目，安裝node-pty模塊和ws模塊，代碼以下：

這只是簡單的實現了一個終端的投射，實際項目中還會有更細緻和複雜的需求，能夠深度挖掘xterm，或者本身寫自定義擴展等等，由於只是demo代碼，上面代碼出現的一些不怎麼好的寫法還請各位看官勿噴，感謝閱讀。