教你如何使用SpringBoot+Websocket+xterm+jsch实现一个网页版的Xshell

1、前言

  上个周末的时候，在方志朋老师的公众号上看见了一篇《教你用纯Java实现一个网页版的Xshell（附源码）》的文章，非常感兴趣，这不正好这周六稍有闲时，就好好的研究了研究，顺便记录一下学习心得。
  github项目开源地址：https://github.com/NoCortY/WebSSH，感兴趣的童鞋们，可以自己运行该项目，需要注意的是：首先，环境需要运行在一个可以使用Xshell的环境中，不然没有办法测试，其次，在运行该项目时，需要修改连接到服务的地址、用户名密码等，在webssh.html文件中进行修改。

2、技术选型

  最终的技术选型就是： SpringBoot+Websocket+jsch+xterm.js。

  在方志朋老师的文章中，已经分析了为什么做这种技术选型，这里分别在把用到的这几种技术，在详细的记录一下，毕竟有些东西在实际工作中，用的不是太多。

SpringBoot

  首先就是SpringBoot框架，这个就不展开说了，基本上是现在构建JavaWeb项目的首选了。毕竟使用SpringBoot可以很大程度的提高环境搭建的效率，也有助于Spring生态圈中一些框架的集成应用。

Websocket

  由于webssh需要实时数据交互，所以会选用长连接的WebSocket。

  WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。HTTP 协议有一个缺陷：通信只能由客户端发起，HTTP 协议做不到服务器主动向客户端推送信息，所以WebSocket就是为了弥补HTTP协议的这种缺陷，而产生的。

  在SpringBoot中配置Websocket的方式有两种：一种是通过@ServerEndpoint注解进行配置，一种是通过继承WebSocketConfigurer配置文件来实现(有多种形式)。在这篇内容中就是通过第二种，继承WebSocketConfigurer类，然后把处理器(Handler)和拦截器(Interceptor)注册到WebSocket的Java配置类中，这里不再展开，后续专门学习相关内容。

JSCH

  JSCH是Java Secure Channel的缩写。JSCH是一个SSH2的纯Java实现。它允许你连接到一个SSH服务器，并且可以使用端口转发，X11转发，文件传输等，当然你也可以集成它的功能到你自己的应用程序，即JSCH是这篇文章中实现SSH通信的核心API。

  JSCH的API地址：http://epaul.github.io/jsch-documentation/javadoc/com/jcraft/jsch/package-summary.html

  在这篇内容中主要应用到了一下几个类：

• JSch 核心配置类作用，同时也作为创建会话（Session）的工厂类
• Session 通信的会话。主要提供了一些配置会话参数、连接SSH服务，打开Channel通道等方法。
• Channel 通道，用于Shell命令的执行，包括的子类有ChannelExec, ChannelShell, ChannelSubsystem等。
• ChannelSftp 文件通道，相关的类还有 SftpATTRS 、SftpProgressMonitor等。
• UserInfo、UIKeyboardInteractive 用户信息接口，用于保存和获取在Session中的用户信息。

xterm

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

主要特性：

• 终端应用程序正常工作：Xterm.js适用于大多数终端应用程序，如bash，vim和tmux，这包括对基于curses的应用程序和鼠标事件支持的支持
• Performant：Xterm.js 非常快，它甚至还包括一个GPU加速的渲染器
• 丰富的 unicode 支持：支持CJK，表情符号和IME
• 自包含：零依赖性
• 可访问：可以使用screenReaderMode选项打开屏幕阅读器支持
• 还有更多：链接，主题，插件，记录良好的API等。

具体用户可以参考官方文档：《xtermjs文档》

3、源码解读

  在方志朋老师的文章中，整个后台代码的逻辑讲解的已经比较详细了，我这里按照自己学习源码的思路把所有的类，汇总一下，方便后期再次代码的基础上，在扩展其他新的功能和用法。

• WebSSHStarter
    首先是SpringBoot的启动类WebSSHStarter，最简单的启动类。对应的应用参数，在config/application.yml配置文件中进行了配置。

• WebSSHWebSocketConfig
    SpringBoot配置WebSocket的类，前面提到过，这里使用了继承WebSocketConfigurer类的方法进行了实现。在这个配置类中，把处理器(Handler)和拦截器(Interceptor)都注册到了WebSocket的注册器中了。

• WebSocketInterceptor
    在方志朋老师提供的实例中，这个拦截器的意义不太大，只是拦截了request请求，并随机生成了一个UUID作为用户标识，传到了后续的逻辑中，在实际生成环境中，这里可以实现用户认证的代码逻辑。

• WebSSHWebSocketHandler
    该处理器类实现了WebSocketHandler接口，主要用来完成Websocket消息和WebSocket生命周期中事件的处理，即这个类是WebSocket事件回调方法的入口。其实，在这类中，方志朋老师是通过调用WebSSHService接口的具体实现类来实现了具体的业务逻辑，所以在于SSH服务进行通信的核心代码是在WebSSHService接口的实现类中进行的。

• WebSSHService接口、WebSSHServiceImpl实现类
    在WebSSHService接口中定义了四个方法，分别是：初始化、处理请求、回写响应数据、关闭连接。
    其中，在初始化方法中，主要实现了JSch对象的初始化，包括当前用户的信息的维护；处理请求方法中，主要处理两类请求，一类是连接操作请求，一类是命令操作请求，在该方法中用到了线程池ExecutorService的概念；回写响应数据方法，这里通过在进行连接操作的时候，就创建了一个线程，一直在监听是否有需要回写的数据，如果有的话，就直接通过org.springframework.web.socket.WebSocketSession的sendMessage()方法回写到客户端；关闭连接，主要是在连接断开后，会清理释放被占用的资源。

• POJO类、常量类
    基础类。

• RouterController类
    提供的进入控制台界面的入口类，对用的界面是webssh.html。

• 前端实现
    在static文件夹下是前端页面的实现，需要注意：在运行该项目时，需要修改连接到服务的地址、用户名密码等，在webssh.html文件中进行修改。

4、结尾

  在方志朋老师的文章中，讲解的已经比较详细了，这里主要是针对在学习这篇文章中的记录的一些笔记，后续会在这个项目的基础上进行进一步的开发，大致的方向是：

1. 连接服务的用户密码，可以让用户可以配置
2. 提供可以连接多个服务的方式，即同时创建多个会话，类似xShell的选项卡。
3. 提供附件处理的功能，在这个实例中，没有实现相关内容。

  新项目的地址在：https://gitee.com/hsh2015/webshh.git。该项目还在持续开发中。