资讯专栏INFORMATION COLUMN

Xterm+Websocket+Jsch实现Web端SSH

IT那活儿 / 3881人阅读
Xterm+Websocket+Jsch实现Web端SSH






前 言






   最近由于项目需要,要在web端实现类似secureCRT的功能。首先想到在Github上看下有没有现成的轮子,找了一圈没看到合适的。于是结合着开源的资料,实现了一套适合本地项目的基于Springboot和Vue前后端分离版本的网页端SSH。





技术选型

 项目中前端使用vue,由于vue无法直接发起SSH通信,所以还需要一个后端来接受并发起SSH请求,后端自然就选择开发效率很高的Springboot框架了。

我们来分析一下需求。首先需要有个交互界面,模拟terminal终端;其次还需要前后端通讯,需要支持前端发命令到后端以及后端将请求结果发送回前端;最后在后端还需要能处理SSH命令的逻辑。基于以上三点需求,最终的技术选型就是Xterm.js+ Websocket + Jsch组合。

Xterm.js

Xterm是一个使用TypeScript编写的前端终端组件,可以直接在浏览器中实现一个命令行终端应用。


Websocket

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。


Jsch

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命令


End






文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/130054.html

相关文章

  • JSch-用java实现服务器远程操作

    摘要:主要是将一个服务集群部署到远端的服务器上,具体服务器的连接信息会通过接口传入。本来部署是人工来完成的,无非是将一些必须的文件到目标服务器上,然后远程登录,执行一些安装的操作,齐活。 介绍 前段时间接了一个比较特殊的需求,需要做一个用于部署服务的服务。主要是将一个k8s服务集群部署到远端的服务器上,具体服务器的连接信息会通过接口传入。 本来部署是人工来完成的,无非是将一些必须的文件s...

    孙吉亮 评论0 收藏0
  • 基于tornado的web ssh项目

    摘要:引言上次有幸观看梁胜大牛的技术分享,其中一个演示是浏览器中显示了一个终端并登录管理,于是决定自己实现一个中有一个项目实现了此功能,本来想学习一下,但是考虑到代码实在过多就放弃了,下面说下自己的实现。 引言 上次有幸观看梁胜大牛的技术分享,其中一个演示是浏览器中显示了一个linux终端并登录管理server,于是决定自己实现一个 github中有一个项目gateone实现了此功能,本来...

    cheukyin 评论0 收藏0
  • windows/mac系统下常用的SSH工具软件收集整理

    摘要:工欲善其事,必先利其器,买了一款之后,就要选用一款好用的工具远程连接登录你的服务器了。鉴于目前已经是年了,系统自带的终端也是可以连接的工欲善其事,必先利其器,买了一款VPS之后,就要选用一款好用的SSH工具远程连接登录你的服务器了。当然SSH工具有很多,你可以选用自己觉得的顺手的,虽然FinalShell和MobaXterm也非常好用,但是感觉JAVA写的东西,启动总是慢半拍。 此外,...

    ZweiZhao 评论0 收藏0

发表评论

0条评论

IT那活儿

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<