最近由于項目需要,要在web端實現類似secureCRT的功能。首先想到在Github上看下有沒有現成的輪子,找了一圈沒看到合適的。于是結合著開源的資料,實現了一套適合本地項目的基于Springboot和Vue前后端分離版本的網頁端SSH。
項目中前端使用vue,由于vue無法直接發起SSH通信,所以還需要一個后端來接受并發起SSH請求,后端自然就選擇開發效率很高的Springboot框架了。
我們來分析一下需求。首先需要有個交互界面,模擬terminal終端;其次還需要前后端通訊,需要支持前端發命令到后端以及后端將請求結果發送回前端;最后在后端還需要能處理SSH命令的邏輯。基于以上三點需求,最終的技術選型就是Xterm.js+ Websocket + Jsch組合。
Xterm是一個使用TypeScript編寫的前端終端組件,可以直接在瀏覽器中實現一個命令行終端應用。
WebSocket是一種在單個TCP連接上進行全雙工通信的協議。它的最大特點就是,服務器可以主動向客戶端推送信息,客戶端也可以主動向服務器發送信息,是真正的雙向平等對話,屬于服務器推送技術的一種。
Jsch即JavaSecureChannel,Jsch是SSH2的一個純Java實現。它允許你連接到一個sshd服務器,使用端口轉發,X11轉發,文件傳輸等等。
前端主要功能如下:頁面的實現、連接WebSocket并完成數據的接收以及回寫、數據的發送。
部分源碼如下:
1、 首先引入以下依賴
Xterm.js
npm install --save xterm
xterm-addon-fit
xterm.js的插件,使終端的尺寸適合包含元素。
npm install --save xterm-addon-fit
2、 創建一個command界面組件terminal.vue
主要包括xterm的初始化和websocket發送接收消息的實現
3、 使用時引用terminal.vue組件,傳入主機信息即可
此時訪問頁面已經能看到終端屏幕,接下來繼續實現后端邏輯。
后端功能主要包括服務器交互和請求轉發兩塊,我們通過Jsch和Websocket來實現。服務器交互主要包括以下方法:初始化SSH連接、處理客戶端發送的命令、讀取命令執行結果、關閉連接等。前后端交互主要為對WebSocket生命周期中事件的處理,主要是連接WebSocket并完成數據的接收并回寫。
部分源碼如下:
1、Websocket配置,開啟Websocket并配置處理器和攔截器。
2、Websocket處理器,實現Websocket生命周期事件,在接收到執行命令請求后調用執行邏輯。
3、WebSSH的業務邏輯,主要包括以下接口方法,重點看下處理客戶端數據的實現,將請求數據分為連接請求和命令請求分別處理。
現在,我們已經成功實現了文章開始提出的Web端SSH需求。運行項目看下效果,可以看到已能實現類似SecureCRT的功能:
連接主機
ls命令
vim命令
top命令
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/130054.html
摘要:主要是將一個服務集群部署到遠端的服務器上,具體服務器的連接信息會通過接口傳入。本來部署是人工來完成的,無非是將一些必須的文件到目標服務器上,然后遠程登錄,執行一些安裝的操作,齊活。 介紹 前段時間接了一個比較特殊的需求,需要做一個用于部署服務的服務。主要是將一個k8s服務集群部署到遠端的服務器上,具體服務器的連接信息會通過接口傳入。 本來部署是人工來完成的,無非是將一些必須的文件s...
摘要:引言上次有幸觀看梁勝大牛的技術分享,其中一個演示是瀏覽器中顯示了一個終端并登錄管理,于是決定自己實現一個中有一個項目實現了此功能,本來想學習一下,但是考慮到代碼實在過多就放棄了,下面說下自己的實現。 引言 上次有幸觀看梁勝大牛的技術分享,其中一個演示是瀏覽器中顯示了一個linux終端并登錄管理server,于是決定自己實現一個 github中有一個項目gateone實現了此功能,本來...
摘要:工欲善其事,必先利其器,買了一款之后,就要選用一款好用的工具遠程連接登錄你的服務器了。鑒于目前已經是年了,系統自帶的終端也是可以連接的工欲善其事,必先利其器,買了一款VPS之后,就要選用一款好用的SSH工具遠程連接登錄你的服務器了。當然SSH工具有很多,你可以選用自己覺得的順手的,雖然FinalShell和MobaXterm也非常好用,但是感覺JAVA寫的東西,啟動總是慢半拍。 此外,...
閱讀 1359·2023-01-11 13:20
閱讀 1707·2023-01-11 13:20
閱讀 1215·2023-01-11 13:20
閱讀 1907·2023-01-11 13:20
閱讀 4165·2023-01-11 13:20
閱讀 2759·2023-01-11 13:20
閱讀 1402·2023-01-11 13:20
閱讀 3673·2023-01-11 13:20
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要