Xterm+Websocket+Jsch實(shí)現(xiàn)Web端SSH

IT那活兒發(fā)布于2023-01-11 13:20 / 3880人閱讀

前言

最近由于項(xiàng)目需要，要在web端實(shí)現(xiàn)類似secureCRT的功能。首先想到在Github上看下有沒有現(xiàn)成的輪子，找了一圈沒看到合適的。于是結(jié)合著開源的資料，實(shí)現(xiàn)了一套適合本地項(xiàng)目的基于Springboot和Vue前后端分離版本的網(wǎng)頁(yè)端SSH。

技術(shù)選型

項(xiàng)目中前端使用vue，由于vue無(wú)法直接發(fā)起SSH通信，所以還需要一個(gè)后端來(lái)接受并發(fā)起SSH請(qǐng)求，后端自然就選擇開發(fā)效率很高的Springboot框架了。

我們來(lái)分析一下需求。首先需要有個(gè)交互界面，模擬terminal終端；其次還需要前后端通訊，需要支持前端發(fā)命令到后端以及后端將請(qǐng)求結(jié)果發(fā)送回前端；最后在后端還需要能處理SSH命令的邏輯。基于以上三點(diǎn)需求，最終的技術(shù)選型就是Xterm.js+ Websocket + Jsch組合。

Xterm.js

Xterm是一個(gè)使用TypeScript編寫的前端終端組件，可以直接在瀏覽器中實(shí)現(xiàn)一個(gè)命令行終端應(yīng)用。

Websocket

WebSocket是一種在單個(gè)TCP連接上進(jìn)行全雙工通信的協(xié)議。它的最大特點(diǎn)就是，服務(wù)器可以主動(dòng)向客戶端推送信息，客戶端也可以主動(dòng)向服務(wù)器發(fā)送信息，是真正的雙向平等對(duì)話，屬于服務(wù)器推送技術(shù)的一種。

Jsch

Jsch即JavaSecureChannel，Jsch是SSH2的一個(gè)純Java實(shí)現(xiàn)。它允許你連接到一個(gè)sshd服務(wù)器，使用端口轉(zhuǎn)發(fā)，X11轉(zhuǎn)發(fā)，文件傳輸?shù)鹊取?/span>

前端實(shí)現(xiàn)

前端主要功能如下：頁(yè)面的實(shí)現(xiàn)、連接WebSocket并完成數(shù)據(jù)的接收以及回寫、數(shù)據(jù)的發(fā)送。

部分源碼如下：

1、首先引入以下依賴

Xterm.js

npm install --save xterm

xterm-addon-fit

xterm.js的插件，使終端的尺寸適合包含元素。

npm install --save xterm-addon-fit

2、 創(chuàng)建一個(gè)command界面組件terminal.vue

主要包括xterm的初始化和websocket發(fā)送接收消息的實(shí)現(xiàn)

3、使用時(shí)引用terminal.vue組件，傳入主機(jī)信息即可

此時(shí)訪問頁(yè)面已經(jīng)能看到終端屏幕，接下來(lái)繼續(xù)實(shí)現(xiàn)后端邏輯。

后端實(shí)現(xiàn)

后端功能主要包括服務(wù)器交互和請(qǐng)求轉(zhuǎn)發(fā)兩塊，我們通過Jsch和Websocket來(lái)實(shí)現(xiàn)。服務(wù)器交互主要包括以下方法：初始化SSH連接、處理客戶端發(fā)送的命令、讀取命令執(zhí)行結(jié)果、關(guān)閉連接等。前后端交互主要為對(duì)WebSocket生命周期中事件的處理，主要是連接WebSocket并完成數(shù)據(jù)的接收并回寫。

部分源碼如下：

1、Websocket配置，開啟Websocket并配置處理器和攔截器。