什么是Xterm.js

Xterm.js 是一个用 TypeScript 编写的前端组件，它允许应用程序在浏览器中将功能齐全的终端带给用户。 它被 VS Code、Hyper 和 Theia 等流行项目使用。

springboot整合websocket实现服务端

1、引入pom依赖

此处主要引入websocket依赖和其他辅助工具

  1. <!--websocket依赖-->
  2. <dependency>
  3.   <groupId>org.springframework.boot</groupId>
  4.   <artifactId>spring-boot-starter-websocket</artifactId>
  5. </dependency>    
  6. <!--ssh2依赖-->
  7. <dependency>
  8.   <groupId>ch.ethz.ganymed</groupId>
  9.   <artifactId>ganymed-ssh2</artifactId>
  10.   <version>262</version>
  11. </dependency>
  12. <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
  13. <dependency>
  14.   <groupId>com.alibaba</groupId>
  15.   <artifactId>fastjson</artifactId>
  16.   <version>1.2.79</version>
  17. </dependency>
  18. <!-- https://mvnrepository.com/artifact/com.jcraft/jsch -->
  19. <dependency>
  20.   <groupId>com.jcraft</groupId>
  21.   <artifactId>jsch</artifactId>
  22.   <version>0.1.55</version>
  23. </dependency>
  24. <dependency>
  25.   <groupId>cn.hutool</groupId>
  26.   <artifactId>hutool-all</artifactId>
  27.   <version>5.3.7</version>
  28. </dependency>

2、新建SshHandler-websocket处理类

  1. package com.qingfeng.framework.ssh;
  3. import cn.hutool.core.io.IoUtil;
  4. import cn.hutool.core.thread.ThreadUtil;
  5. import cn.hutool.core.util.StrUtil;
  6. import cn.hutool.extra.ssh.ChannelType;
  7. import cn.hutool.extra.ssh.JschUtil;
  8. import com.jcraft.jsch.ChannelShell;
  9. import com.jcraft.jsch.JSchException;
  10. import com.jcraft.jsch.Session;
  11. import org.slf4j.Logger;
  12. import org.slf4j.LoggerFactory;
  13. import org.springframework.stereotype.Component;
  14. import javax.annotation.PostConstruct;
  15. import javax.websocket.*;
  16. import javax.websocket.server.ServerEndpoint;
  17. import java.io.IOException;
  18. import java.io.InputStream;
  19. import java.io.OutputStream;
  20. import java.util.Arrays;
  21. import java.util.concurrent.ConcurrentHashMap;
  22. import java.util.concurrent.CopyOnWriteArraySet;
  23. import java.util.concurrent.atomic.AtomicInteger;
  25. /**
  26. * @ProjectName SshHandler
  27. * @author qingfeng
  28. * @version 1.0.0
  29. * @Description ssh 处理
  30. * @createTime 2022/5/2 0002 15:26
  31. */
  32. @ServerEndpoint(value = "/ws/ssh")
  33. @Component
  34. public class SshHandler {
  35.     private static final ConcurrentHashMap<String, HandlerItem> HANDLER_ITEM_CONCURRENT_HASH_MAP = new ConcurrentHashMap<>();
  37.     @PostConstruct
  38.     public void init() {
  39.         System.out.println("websocket 加载");
  40.     }
  41.     private static Logger log = LoggerFactory.getLogger(SshHandler.class);
  42.     private static final AtomicInteger OnlineCount = new AtomicInteger(0);
  43.     // concurrent包的线程安全Set，用来存放每个客户端对应的Session对象。
  44.     private static CopyOnWriteArraySet<javax.websocket.Session> SessionSet = new CopyOnWriteArraySet<javax.websocket.Session>();
  47.     /**
  48.     * 连接建立成功调用的方法
  49.     */
  50.     @OnOpen
  51.     public void onOpen(javax.websocket.Session session) throws Exception {
  52.         SessionSet.add(session);
  53.         SshModel sshItem = new SshModel();
  54.         sshItem.setHost("127.0.0.1");
  55.         sshItem.setPort(22);
  56.         sshItem.setUser("root");
  57.         sshItem.setPassword("root");
  58.         int cnt = OnlineCount.incrementAndGet(); // 在线数加1
  59.         log.info("有连接加入，当前连接数为：{},sessionId={}", cnt,session.getId());
  60.         SendMessage(session, "连接成功，sessionId="+session.getId());
  61.         HandlerItem handlerItem = new HandlerItem(session, sshItem);
  62.         handlerItem.startRead();
  63.         HANDLER_ITEM_CONCURRENT_HASH_MAP.put(session.getId(), handlerItem);
  64.     }
  66.     /**
  67.     * 连接关闭调用的方法
  68.     */
  69.     @OnClose
  70.     public void onClose(javax.websocket.Session session) {
  71.         SessionSet.remove(session);
  72.         int cnt = OnlineCount.decrementAndGet();
  73.         log.info("有连接关闭，当前连接数为：{}", cnt);
  74.     }
  76.     /**
  77.     * 收到客户端消息后调用的方法
  78.     * @param message
  79.     * 客户端发送过来的消息
  80.     */
  81.     @OnMessage
  82.     public void onMessage(String message, javax.websocket.Session session) throws Exception {
  83.         log.info("来自客户端的消息：{}",message);
  84.         //        SendMessage(session, "收到消息，消息内容："+message);
  85.         HandlerItem handlerItem = HANDLER_ITEM_CONCURRENT_HASH_MAP.get(session.getId());
  86.         this.sendCommand(handlerItem, message);
  87.     }
  89.     /**
  90.     * 出现错误
  91.     * @param session
  92.     * @param error
  93.     */
  94.     @OnError
  95.     public void onError(javax.websocket.Session session, Throwable error) {
  96.         log.error("发生错误：{}，Session ID： {}",error.getMessage(),session.getId());
  97.         error.printStackTrace();
  98.     }
  100.     private void sendCommand(HandlerItem handlerItem, String data) throws Exception {
  101.         if (handlerItem.checkInput(data)) {
  102.             handlerItem.outputStream.write(data.getBytes());
  103.         } else {
  104.             handlerItem.outputStream.write("没有执行相关命令权限".getBytes());
  105.             handlerItem.outputStream.flush();
  106.             handlerItem.outputStream.write(new byte[]{3});
  107.         }
  108.         handlerItem.outputStream.flush();
  109.     }
  111.     /**
  112.     * 发送消息，实践表明，每次浏览器刷新，session会发生变化。
  113.     * @param session
  114.     * @param message
  115.     */
  116.     public static void SendMessage(javax.websocket.Session session, String message) {
  117.         try {
  118.             //            session.getBasicRemote().sendText(String.format("%s (From Server，Session ID=%s)",message,session.getId()));
  119.             session.getBasicRemote().sendText(message);
  120.             session.getBasicRemote().sendText("anxingtao>$");
  121.         } catch (IOException e) {
  122.             log.error("发送消息出错：{}", e.getMessage());
  123.             e.printStackTrace();
  124.         }
  125.     }
  127.     private class HandlerItem implements Runnable {
  128.         private final javax.websocket.Session session;
  129.         private final InputStream inputStream;
  130.         private final OutputStream outputStream;
  131.         private final Session openSession;
  132.         private final ChannelShell channel;
  133.         private final SshModel sshItem;
  134.         private final StringBuilder nowLineInput = new StringBuilder();
  136.         HandlerItem(javax.websocket.Session session, SshModel sshItem) throws IOException {
  137.             this.session = session;
  138.             this.sshItem = sshItem;
  139.             this.openSession = JschUtil.openSession(sshItem.getHost(), sshItem.getPort(), sshItem.getUser(), sshItem.getPassword());
  140.             this.channel = (ChannelShell) JschUtil.createChannel(openSession, ChannelType.SHELL);
  141.             this.inputStream = channel.getInputStream();
  142.             this.outputStream = channel.getOutputStream();
  143.         }
  145.         void startRead() throws JSchException {
  146.             this.channel.connect();
  147.             ThreadUtil.execute(this);
  148.         }
  151.         /**
  152.         * 添加到命令队列
  153.         *
  154.         * @param msg 输入
  155.         * @return 当前待确认待所有命令
  156.         */
  157.         private String append(String msg) {
  158.             char[] x = msg.toCharArray();
  159.             if (x.length == 1 && x[0] == 127) {
  160.                 // 退格键
  161.                 int length = nowLineInput.length();
  162.                 if (length > 0) {
  163.                     nowLineInput.delete(length - 1, length);
  164.                 }
  165.             } else {
  166.                 nowLineInput.append(msg);
  167.             }
  168.             return nowLineInput.toString();
  169.         }
  171.         public boolean checkInput(String msg) {
  172.             String allCommand = this.append(msg);
  173.             boolean refuse;
  174.             if (StrUtil.equalsAny(msg, StrUtil.CR, StrUtil.TAB)) {
  175.                 String join = nowLineInput.toString();
  176.                 if (StrUtil.equals(msg, StrUtil.CR)) {
  177.                     nowLineInput.setLength(0);
  178.                 }
  179.                 refuse = SshModel.checkInputItem(sshItem, join);
  180.             } else {
  181.                 // 复制输出
  182.                 refuse = SshModel.checkInputItem(sshItem, msg);
  183.             }
  184.             return refuse;
  185.         }
  188.         @Override
  189.         public void run() {
  190.             try {
  191.                 byte[] buffer = new byte[1024];
  192.                 int i;
  193.                 //如果没有数据来，线程会一直阻塞在这个地方等待数据。
  194.                 while ((i = inputStream.read(buffer)) != -1) {
  195.                     sendBinary(session, new String(Arrays.copyOfRange(buffer, 0, i), sshItem.getCharsetT()));
  196.                 }
  197.             } catch (Exception e) {
  198.                 if (!this.openSession.isConnected()) {
  199.                     return;
  200.                 }
  202.                 SshHandler.this.destroy(this.session);
  203.             }
  204.         }
  205.     }
  207.     public void destroy(javax.websocket.Session session) {
  208.         HandlerItem handlerItem = HANDLER_ITEM_CONCURRENT_HASH_MAP.get(session.getId());
  209.         if (handlerItem != null) {
  210.             IoUtil.close(handlerItem.inputStream);
  211.             IoUtil.close(handlerItem.outputStream);
  212.             JschUtil.close(handlerItem.channel);
  213.             JschUtil.close(handlerItem.openSession);
  214.         }
  215.         IoUtil.close(session);
  216.         HANDLER_ITEM_CONCURRENT_HASH_MAP.remove(session.getId());
  217.     }
  219.     private static void sendBinary(javax.websocket.Session session, String msg) {
  220.         //        if (!session.isOpen()) {
  221.         //            // 会话关闭不能发送消息 @author jzy 21-08-04
  222.         //            return;
  223.         //        }
  225.         //        synchronized (session.getId()) {
  226.         //            BinaryMessage byteBuffer = new BinaryMessage(msg.getBytes());
  227.         try {
  228.             System.out.println("#####:"+msg);
  229.             session.getBasicRemote().sendText(msg);
  230.         } catch (IOException e) {
  231.         }
  232.         //        }
  233.     }
  234. }

3、创建SshModel实体类

  1. package com.qingfeng.framework.ssh;
  3. import cn.hutool.core.io.FileUtil;
  4. import cn.hutool.core.util.CharsetUtil;
  5. import cn.hutool.core.util.EnumUtil;
  6. import cn.hutool.core.util.StrUtil;
  7. import com.alibaba.fastjson.JSONArray;
  9. import java.nio.charset.Charset;
  10. import java.util.Arrays;
  11. import java.util.List;
  13. /**
  14.  * @ProjectName SshModel
  15.  * @author Administrator
  16.  * @version 1.0.0
  17.  * @Description SshModel实体类
  18.  * @createTime 2022/5/2 0002 15:29
  19.  */
  20. public class SshModel {
  22.     private String name;
  23.     private String host;
  24.     private Integer port;
  25.     private String user;
  26.     private String password;
  27.     /**
  28.      * 编码格式
  29.      */
  30.     private String charset;
  32.     /**
  33.      * 文件目录
  34.      */
  35.     private String fileDirs;
  37.     /**
  38.      * ssh 私钥
  39.      */
  40.     private String privateKey;
  42.     private String connectType;
  44.     /**
  45.      * 不允许执行的命令
  46.      */
  47.     private String notAllowedCommand;
  49.     /**
  50.      * 允许编辑的后缀文件
  51.      */
  52.     private String allowEditSuffix;
  54.     public String getName() {
  55.         return name;
  56.     }
  58.     public void setName(String name) {
  59.         this.name = name;
  60.     }
  62.     public String getNotAllowedCommand() {
  63.         return notAllowedCommand;
  64.     }
  66.     public void setNotAllowedCommand(String notAllowedCommand) {
  67.         this.notAllowedCommand = notAllowedCommand;
  68.     }
  70.     public ConnectType connectType() {
  71.         return EnumUtil.fromString(ConnectType.class, this.connectType, ConnectType.PASS);
  72.     }
  74.     public String getConnectType() {
  75.         return connectType;
  76.     }
  78.     public void setConnectType(String connectType) {
  79.         this.connectType = connectType;
  80.     }
  82.     public String getPrivateKey() {
  83.         return privateKey;
  84.     }
  86.     public void setPrivateKey(String privateKey) {
  87.         this.privateKey = privateKey;
  88.     }
  90.     public String getFileDirs() {
  91.         return fileDirs;
  92.     }
  94.     public void setFileDirs(String fileDirs) {
  95.         this.fileDirs = fileDirs;
  96.     }
  98.     public List<String> fileDirs() {
  99.         return StringUtil.jsonConvertArray(this.fileDirs, String.class);
  100.     }
  102.     public void fileDirs(List<String> fileDirs) {
  103.         if (fileDirs != null) {
  104.             for (int i = fileDirs.size() - 1; i >= 0; i--) {
  105.                 String s = fileDirs.get(i);
  106.                 fileDirs.set(i, FileUtil.normalize(s));
  107.             }
  108.             this.fileDirs = JSONArray.toJSONString(fileDirs);
  109.         } else {
  110.             this.fileDirs = null;
  111.         }
  112.     }
  114.     public String getHost() {
  115.         return host;
  116.     }
  118.     public void setHost(String host) {
  119.         this.host = host;
  120.     }
  122.     public Integer getPort() {
  123.         return port;
  124.     }
  126.     public void setPort(Integer port) {
  127.         this.port = port;
  128.     }
  130.     public String getUser() {
  131.         return user;
  132.     }
  134.     public void setUser(String user) {
  135.         this.user = user;
  136.     }
  138.     public String getPassword() {
  139.         return password;
  140.     }
  142.     public void setPassword(String password) {
  143.         this.password = password;
  144.     }
  146.     public String getCharset() {
  147.         return charset;
  148.     }
  150.     public void setCharset(String charset) {
  151.         this.charset = charset;
  152.     }
  154.     public Charset getCharsetT() {
  155.         Charset charset;
  156.         try {
  157.             charset = Charset.forName(this.getCharset());
  158.         } catch (Exception e) {
  159.             charset = CharsetUtil.CHARSET_UTF_8;
  160.         }
  161.         return charset;
  162.     }
  164.     public List<String> allowEditSuffix() {
  165.         return StringUtil.jsonConvertArray(this.allowEditSuffix, String.class);
  166.     }
  168.     public void allowEditSuffix(List<String> allowEditSuffix) {
  169.         if (allowEditSuffix == null) {
  170.             this.allowEditSuffix = null;
  171.         } else {
  172.             this.allowEditSuffix = JSONArray.toJSONString(allowEditSuffix);
  173.         }
  174.     }
  176.     public String getAllowEditSuffix() {
  177.         return allowEditSuffix;
  178.     }
  180.     public void setAllowEditSuffix(String allowEditSuffix) {
  181.         this.allowEditSuffix = allowEditSuffix;
  182.     }
  184.     /**
  185.      * 检查是否包含禁止命令
  186.      *
  187.      * @param sshItem   实体
  188.      * @param inputItem 输入的命令
  189.      * @return false 存在禁止输入的命令
  190.      */
  191.     public static boolean checkInputItem(SshModel sshItem, String inputItem) {
  192.         // 检查禁止执行的命令
  193.         String notAllowedCommand = StrUtil.emptyToDefault(sshItem.getNotAllowedCommand(), StrUtil.EMPTY).toLowerCase();
  194.         if (StrUtil.isEmpty(notAllowedCommand)) {
  195.             return true;
  196.         }
  197.         List<String> split = Arrays.asList(StrUtil.split(notAllowedCommand, StrUtil.COMMA));
  198.         inputItem = inputItem.toLowerCase();
  199.         List<String> commands = Arrays.asList(StrUtil.split(inputItem, StrUtil.CR));
  200.         commands.addAll(Arrays.asList(StrUtil.split(inputItem, "&")));
  201.         for (String s : split) {
  202.             //
  203.             boolean anyMatch = commands.stream().anyMatch(item -> StrUtil.startWithAny(item, s + StrUtil.SPACE, ("&" + s + StrUtil.SPACE), StrUtil.SPACE + s + StrUtil.SPACE));
  204.             if (anyMatch) {
  205.                 return false;
  206.             }
  207.             //
  208.             anyMatch = commands.stream().anyMatch(item -> StrUtil.equals(item, s));
  209.             if (anyMatch) {
  210.                 return false;
  211.             }
  212.         }
  213.         return true;
  214.     }
  216.     public enum ConnectType {
  217.         /**
  218.          * 账号密码
  219.          */
  220.         PASS,
  221.         /**
  222.          * 密钥
  223.          */
  224.         PUBKEY
  225.     }
  226. }

4、新建StringUtil工具类

  1. package com.qingfeng.framework.ssh;
  3. import cn.hutool.core.date.DateField;
  4. import cn.hutool.core.date.DateTime;
  5. import cn.hutool.core.date.DateUtil;
  6. import cn.hutool.core.io.FileUtil;
  7. import cn.hutool.core.lang.Validator;
  8. import cn.hutool.core.util.StrUtil;
  9. import cn.hutool.system.SystemUtil;
  10. import com.alibaba.fastjson.JSON;
  12. import java.io.File;
  13. import java.util.List;
  15. /**
  16.  * @ProjectName StringUtil
  17.  * @author qingfeng
  18.  * @version 1.0.0
  19.  * @Description 方法运行参数工具
  20.  * @createTime 2022/5/2 0002 15:29
  21.  */
  22. public class StringUtil {
  24.     /**
  25.      * 支持的压缩包格式
  26.      */
  27.     public static final String[] PACKAGE_EXT = new String[]{"tar.bz2", "tar.gz", "tar", "bz2", "zip", "gz"};
  29.     /**
  30.      * 获取启动参数
  31.      * @param args 所有参数
  32.      * @param name 参数名
  33.      * @return 值
  34.      */
  35.     public static String getArgsValue(String[] args, String name) {
  36.         if (args == null) {
  37.             return null;
  38.         }
  39.         for (String item : args) {
  40.             item = StrUtil.trim(item);
  41.             if (item.startsWith("--" + name + "=")) {
  42.                 return item.substring(name.length() + 3);
  43.             }
  44.         }
  45.         return null;
  46.     }
  48.     /**
  49.      * id输入规则
  50.      *
  51.      * @param value 值
  52.      * @param min   最短
  53.      * @param max   最长
  54.      * @return true
  55.      */
  56.     public static boolean isGeneral(CharSequence value, int min, int max) {
  57.         String reg = "^[a-zA-Z0-9_-]{" + min + StrUtil.COMMA + max + "}$";
  58.         return Validator.isMatchRegex(reg, value);
  59.     }
  61.     /**
  62.      * 删除文件开始的路径
  63.      *
  64.      * @param file      要删除的文件
  65.      * @param startPath 开始的路径
  66.      * @param inName    是否返回文件名
  67.      * @return /test/a.txt /test/  a.txt
  68.      */
  69.     public static String delStartPath(File file, String startPath, boolean inName) {
  70.         String newWhitePath;
  71.         if (inName) {
  72.             newWhitePath = FileUtil.getAbsolutePath(file.getAbsolutePath());
  73.         } else {
  74.             newWhitePath = FileUtil.getAbsolutePath(file.getParentFile());
  75.         }
  76.         String itemAbsPath = FileUtil.getAbsolutePath(new File(startPath));
  77.         itemAbsPath = FileUtil.normalize(itemAbsPath);
  78.         newWhitePath = FileUtil.normalize(newWhitePath);
  79.         String path = StrUtil.removePrefix(newWhitePath, itemAbsPath);
  80.         //newWhitePath.substring(newWhitePath.indexOf(itemAbsPath) + itemAbsPath.length());
  81.         path = FileUtil.normalize(path);
  82.         if (path.startsWith(StrUtil.SLASH)) {
  83.             path = path.substring(1);
  84.         }
  85.         return path;
  86.     }
  88.     /**
  89.      * 获取jdk 中的tools jar文件路径
  90.      *
  91.      * @return file
  92.      */
  93.     public static File getToolsJar() {
  94.         File file = new File(SystemUtil.getJavaRuntimeInfo().getHomeDir());
  95.         return new File(file.getParentFile(), "lib/tools.jar");
  96.     }
  98.     /**
  99.      * 指定时间的下一个刻度
  100.      *
  101.      * @return String
  102.      */
  103.     public static String getNextScaleTime(String time, Long millis) {
  104.         DateTime dateTime = DateUtil.parse(time);
  105.         if (millis == null) {
  106.             millis = 30 * 1000L;
  107.         }
  108.         DateTime newTime = dateTime.offsetNew(DateField.SECOND, (int) (millis / 1000));
  109.         return DateUtil.formatTime(newTime);
  110.     }
  112. //    /**
  113. //     * 删除 yml 文件内容注释
  114. //     *
  115. //     * @param content 配置内容
  116. //     * @return 移除后的内容
  117. //     */
  118. //    public static String deleteComment(String content) {
  119. //        List<String> split = StrUtil.split(content, StrUtil.LF);
  120. //        split = split.stream().filter(s -> {
  121. //            if (StrUtil.isEmpty(s)) {
  122. //                return false;
  123. //            }
  124. //            s = StrUtil.trim(s);
  125. //            return !StrUtil.startWith(s, "#");
  126. //        }).collect(Collectors.toList());
  127. //        return CollUtil.join(split, StrUtil.LF);
  128. //    }
  130.     /**
  131.      * json 字符串转 bean，兼容普通json和字符串包裹情况
  132.      *
  133.      * @param jsonStr json 字符串
  134.      * @param cls     要转为bean的类
  135.      * @param <T>     泛型
  136.      * @return data
  137.      */
  138.     public static <T> T jsonConvert(String jsonStr, Class<T> cls) {
  139.         if (StrUtil.isEmpty(jsonStr)) {
  140.             return null;
  141.         }
  142.         try {
  143.             return JSON.parseObject(jsonStr, cls);
  144.         } catch (Exception e) {
  145.             return JSON.parseObject(JSON.parse(jsonStr).toString(), cls);
  146.         }
  147.     }
  149.     /**
  150.      * json 字符串转 bean，兼容普通json和字符串包裹情况
  151.      *
  152.      * @param jsonStr json 字符串
  153.      * @param cls     要转为bean的类
  154.      * @param <T>     泛型
  155.      * @return data
  156.      */
  157.     public static <T> List<T> jsonConvertArray(String jsonStr, Class<T> cls) {
  158.         try {
  159.             if (StrUtil.isEmpty(jsonStr)) {
  160.                 return null;
  161.             }
  162.             return JSON.parseArray(jsonStr, cls);
  163.         } catch (Exception e) {
  164.             Object parse = JSON.parse(jsonStr);
  165.             return JSON.parseArray(parse.toString(), cls);
  166.         }
  167.     }
  168. }

5、创建WebSocketConfig

给spring容器注入这个ServerEndpointExporter对象

  1. package com.qingfeng.framework.configure;
  3. import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
  4. import org.springframework.boot.web.servlet.ServletContextInitializer;
  5. import org.springframework.context.annotation.Bean;
  6. import org.springframework.context.annotation.ComponentScan;
  7. import org.springframework.context.annotation.Configuration;
  8. import org.springframework.web.socket.server.standard.ServerEndpointExporter;
  9. import org.springframework.web.util.WebAppRootListener;
  11. import javax.servlet.ServletContext;
  12. import javax.servlet.ServletException;
  14. /**
  15.  * @author Administrator
  16.  * @version 1.0.0
  17.  * @ProjectName com.qingfeng
  18.  * @Description WebSocketConfig
  19.  * @createTime 2021年08月10日 16:51:00
  20.  */
  21. @Configuration
  22. @ComponentScan
  23. @EnableAutoConfiguration
  24. public class WebSocketConfig implements ServletContextInitializer {
  25.     /**
  26.      * 给spring容器注入这个ServerEndpointExporter对象
  27.      * 相当于xml：
  28.      * <beans>
  29.      * <bean id="serverEndpointExporter" class="org.springframework.web.socket.server.standard.ServerEndpointExporter"/>
  30.      * </beans>
  31.      * <p>
  32.      * 检测所有带有@serverEndpoint注解的bean并注册他们。
  33.      *
  34.      * @return
  35.      */
  36.     @Bean
  37.     public ServerEndpointExporter serverEndpointExporter() {
  38.         System.out.println("我被注入了");
  39.         return new ServerEndpointExporter();
  40.     }
  42.     @Override
  43.     public void onStartup(ServletContext servletContext) throws ServletException {
  44.         servletContext.addListener(WebAppRootListener.class);
  45.         servletContext.setInitParameter("org.apache.tomcat.websocket.textBufferSize","52428800");
  46.         servletContext.setInitParameter("org.apache.tomcat.websocket.binaryBufferSize","52428800");
  47.     }
  48. }

6、修改shiro拦截控制

如果是其他的拦截器，也需要设置请求过滤。

  1. filterChainDefinitionMap.put("/ws/**", "anon");

至此后端整合完毕。

Html端整合Xterm.js实现客户端

1、首先下载Xterm.js

下载xtermjs和xterm-addonjsimage.png

2、创建html页面index

  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.     <th:block th:include="/web/system/admin/include :: top"></th:block>
  5.     <link rel="stylesheet" th:href="@{/static/plugins/xterm/css/xterm.css}">
  6.     <script type="text/javascript" th:src="@{/static/plugins/xterm/lib/xterm.js}"></script>
  7.     <script type="text/javascript" th:src="@{/static/plugins/xterm-addon/lib/xterm-addon-attach.js}"></script>
  8. </head>
  9. <body>
  10. <!--<button th:onclick="closeA()">关闭</button>-->
  11. <div id="xterm"></div>
  13. <script>
  14.     var socket = new WebSocket("ws://127.0.0.1:8989/ws/ssh1");
  15.     //连接打开事件
  16.     socket.onopen = function() {
  17.         console.log("Socket 已打开");
  18.     };
  19.     //收到消息事件
  20.     socket.onmessage = function(msg) {
  21.         console.log(msg);
  22.         term.write(msg.data);//把接收的数据写到这个插件的屏幕上
  23.         if(msg.data.indexOf('连接成功，sessionId=')!=-1){
  24.             var sessionId = msg.data.slice(15);
  25.             console.log(sessionId)
  26.         }else{
  27.             console.log("常规数据："+msg.data);
  28.         }
  29.     };
  30.     //连接关闭事件
  31.     socket.onclose = function() {
  32.         console.log("Socket已关闭");
  33.     };
  34.     //发生了错误事件
  35.     socket.onerror = function() {
  36.         alert("Socket发生了错误");
  37.     }
  38.     var commandKey = [];
  39.     var term = new Terminal({
  40.         rendererType: "canvas", //渲染类型
  41.         rows: parseInt(24), //行数
  42.         cols: parseInt(100), // 不指定行数，自动回车后光标从下一行开始
  43.         convertEol: true, //启用时，光标将设置为下一行的开头
  44.         scrollback: 10, //终端中的回滚量
  45.         disableStdin: false, //是否应禁用输入
  46.         cursorStyle: "underline", //光标样式
  47.         cursorBlink: true, //光标闪烁
  48.         theme: {
  49.             foreground: "yellow", //字体
  50.             background: "#060101", //背景色
  51.             cursor: "help" //设置光标
  52.         }
  53.     });
  54.     // const attachAddon = new AttachAddon(socket);
  55.     // term.loadAddon(attachAddon);
  56.     term.open(document.getElementById("xterm"));
  57.     // 支持输入与粘贴方法
  58.     term.onData(function(key) {
  59.         // console.log("|"+key+"|");
  60.         // commandKey.push(key);
  61.         // console.log(commandKey);
  62.         // term.write(key);
  63.         socket.send(key); //转换为字符串
  64.     });
  66.     term.onLineFeed(function(){
  67.         console.log("执行换行"+JSON.stringify(commandKey))
  68.     });
  70.     term.onTitleChange(function(key){
  71.         console.log("onTitleChange:"+key);
  72.     });
  74.     function closeA(){
  75.         socket.close();
  76.     }
  79.     function runFakeTerminal() {
  80.         if (term._initialized) {
  81.             return;
  82.         }
  83.         term._initialized = true;
  84.         term.prompt = () => {
  85.             term.write('\r\n~$ ');
  86.         };
  87.         term.writeln('Welcome to xterm.js');
  88.         prompt(term);
  89.         term.onKey(e => {
  90.             const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey;
  91.             if (e.domEvent.keyCode === 13) {
  92.                 prompt(term);
  93.             } else if (e.domEvent.keyCode === 8) {
  94.                 // Do not delete the prompt
  95.                 if (term._core.buffer.x > 2) {
  96.                     // term.write('\b \b')
  97.                 }
  98.             } else if (printable) {
  99.                 // term.write(e.key);
  100.             }
  101.             console.log(commandKey);
  102.             console.log("key::"+e.domEvent.keyCode);
  103.         });
  104.     }
  105.     function prompt(term) {
  106.         // term.write('\r\n~$ ');
  107.         // term.focus();
  108.     }
  109.     runFakeTerminal();
  111. </script>
  113. <th:block th:include="/web/system/admin/include :: bottom" />
  114. </body>
  115. </html>

websocket相关事件

  1. var socket = new WebSocket("ws://127.0.0.1:8989/ws/ssh");
  2.     //连接打开事件
  3.     socket.onopen = function() {
  4.         console.log("Socket 已打开");
  5.     };
  6.     //收到消息事件
  7.     socket.onmessage = function(msg) {
  8.         console.log(msg);
  9.         term.write(msg.data);//把接收的数据写到这个插件的屏幕上
  10.         if(msg.data.indexOf('连接成功，sessionId=')!=-1){
  11.             var sessionId = msg.data.slice(15);
  12.             console.log(sessionId)
  13.         }else{
  14.             console.log("常规数据："+msg.data);
  15.         }
  16.     };
  17.     //连接关闭事件
  18.     socket.onclose = function() {
  19.         console.log("Socket已关闭");
  20.     };
  21.     //发生了错误事件
  22.     socket.onerror = function() {
  23.         alert("Socket发生了错误");
  24.     }

核心方法

  1. //发送信息到服务
  2. socket.send(key); //转换为字符串
  3. //收到消息事件
  4. socket.onmessage = function(msg) {
  5.     console.log(msg);
  6.     term.write(msg.data);//把接收的数据写到这个插件的屏幕上
  7.     if(msg.data.indexOf('连接成功，sessionId=')!=-1){
  8.         var sessionId = msg.data.slice(15);
  9.         console.log(sessionId)
  10.         }else{
  11.         console.log("常规数据："+msg.data);
  12.     }
  13. };

term相关事件

  1.  var commandKey = [];
  2.     var term = new Terminal({
  3.         rendererType: "canvas", //渲染类型
  4.         rows: parseInt(24), //行数
  5.         cols: parseInt(100), // 不指定行数，自动回车后光标从下一行开始
  6.         convertEol: true, //启用时，光标将设置为下一行的开头
  7.         scrollback: 10, //终端中的回滚量
  8.         disableStdin: false, //是否应禁用输入
  9.         cursorStyle: "underline", //光标样式
  10.         cursorBlink: true, //光标闪烁
  11.         theme: {
  12.             foreground: "yellow", //字体
  13.             background: "#060101", //背景色
  14.             cursor: "help" //设置光标
  15.         }
  16.     });
  17.     // const attachAddon = new AttachAddon(socket);
  18.     // term.loadAddon(attachAddon);
  19.     term.open(document.getElementById("xterm"));
  20.     // 支持输入与粘贴方法
  21.     term.onData(function(key) {
  22.         // console.log("|"+key+"|");
  23.         // commandKey.push(key);
  24.         // console.log(commandKey);
  25.         // term.write(key);
  26.         socket.send(key); //转换为字符串
  27.     });
  29.     term.onLineFeed(function(){
  30.         console.log("执行换行"+JSON.stringify(commandKey))
  31.     });
  33.     term.onTitleChange(function(key){
  34.         console.log("onTitleChange:"+key);
  35.     });
  37.     function closeA(){
  38.         socket.close();
  39.     }
  42.     function runFakeTerminal() {
  43.         if (term._initialized) {
  44.             return;
  45.         }
  46.         term._initialized = true;
  47.         term.prompt = () => {
  48.             term.write('\r\n~$ ');
  49.         };
  50.         term.writeln('Welcome to xterm.js');
  51.         prompt(term);
  52.         term.onKey(e => {
  53.             const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey;
  54.             if (e.domEvent.keyCode === 13) {
  55.                 prompt(term);
  56.             } else if (e.domEvent.keyCode === 8) {
  57.                 // Do not delete the prompt
  58.                 if (term._core.buffer.x > 2) {
  59.                     // term.write('\b \b')
  60.                 }
  61.             } else if (printable) {
  62.                 // term.write(e.key);
  63.             }
  64.             console.log(commandKey);
  65.             console.log("key::"+e.domEvent.keyCode);
  66.         });
  67.     }
  68.     function prompt(term) {
  69.         // term.write('\r\n~$ ');
  70.         // term.focus();
  71.     }
  72.     runFakeTerminal();

3、运行效果

image.png

vue整合Xtermjs实现客户端

安装Xtermjs

安装xterm

  1. npm install --save xterm

安装xterm-addon-fit

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

  1. //xterm.js的插件，使终端的尺寸适合包含元素。
  2. npm install --save xterm-addon-fit

安装xterm-addon-attach

xterm.js的附加组件，用于附加到Web Socket

  1. //xterm.js的附加组件，用于附加到Web Socket
  2. npm install --save xterm-addon-attach

创建测试view页面

终端组件说明：
功能：用于用户操作容器
原理说明：组件接收一个参数containerId，用于连接指定的容器
前端终端功能使用xterm.js实现，文档地址https://xtermjs.org/
FitAddon和AttachAddon是与xterm相关的两个插件，
FitAddon用于终端尺寸的自适应，撑满父容器；AttachAddon用于使用websocket与容器进行交互
接口文档可参照https://docs.docker.com/engine/api/v1.24/#31-containers
docker的daemon需要进行一些网络上的设置以允许请求从2375端口接入，还可能会遇到cors跨域问题，
具体设置方法可参照https://docs.docker.com/engine/reference/commandline/dockerd

  1. <template>
  2.   <section>
  3.     <div id="log" style="margin:10px auto;">
  4.       <div class="console" id="terminal"></div>
  5.     </div>
  6.   </section>
  7. </template>
  9. <script>
  10. import "xterm/css/xterm.css";
  11. import { Terminal } from "xterm";
  12. import { FitAddon } from "xterm-addon-fit";
  13. import { AttachAddon } from "xterm-addon-attach";
  15. export default {
  16.   name: "Xterm",
  17.   props: {
  18.     socketURI: {
  19.       type: String,
  20.       default: ""
  21.     }
  22.   },
  23.   data () {
  24.     return {
  25.       term: null,
  26.       socket: null,
  27.       rows: 28,
  28.       cols: 20,
  29.       SetOut: false,
  30.       isKey: false
  31.     };
  32.   },
  33.   mounted () {
  34.     this.initSocket();
  36.   },
  37.   beforeDestroy () {
  38.     this.socket.close();
  39.     // this.term.dispose();
  40.   },
  41.   methods: {
  42.     //Xterm主题
  43.     initTerm () {
  44.       const term = new Terminal({
  45.         rendererType: "canvas", //渲染类型
  46.         rows: this.rows, //行数
  47.         // cols: this.cols,// 设置之后会输入多行之后覆盖现象
  48.         convertEol: true, //启用时，光标将设置为下一行的开头
  49.         // scrollback: 10,//终端中的回滚量
  50.         fontSize: 14, //字体大小
  51.         disableStdin: false, //是否应禁用输入。
  52.         cursorStyle: "block", //光标样式
  53.         // cursorBlink: true, //光标闪烁
  54.         scrollback: 30,
  55.         tabStopWidth: 4,
  56.         theme: {
  57.           foreground: "yellow", //字体
  58.           background: "#060101", //背景色
  59.           cursor: "help" //设置光标
  60.         }
  61.       });
  62.       const attachAddon = new AttachAddon(this.socket);
  63.       const fitAddon = new FitAddon();
  64.       term.loadAddon(attachAddon);
  65.       term.loadAddon(fitAddon);
  66.       term.open(document.getElementById("terminal"));
  67.       // fitAddon.fit();
  68.       term.focus();
  69.       let _this = this;
  70.       //限制和后端交互，只有输入回车键才显示结果
  71.       term.prompt = () => {
  72.         term.write("\r\n$ ");
  73.       };
  74.       term.prompt();
  75.       function runFakeTerminal (_this) {
  76.         if (term._initialized) {
  77.           return;
  78.         }
  79.         // 初始化
  80.         term._initialized = true;
  81.         term.writeln();//控制台初始化报错处
  82.         term.prompt();
  83.         // / **
  84.         //     *添加事件监听器，用于按下键时的事件。事件值包含
  85.         //     *将在data事件以及DOM事件中发送的字符串
  86.         //     *触发了它。
  87.         //     * @返回一个IDisposable停止监听。
  88.         //  * /
  89.         //   / ** 更新：xterm 4.x（新增）
  90.         //  *为数据事件触发时添加事件侦听器。发生这种情况
  91.         //  *用户输入或粘贴到终端时的示例。事件值
  92.         //  *是`string`结果的结果，在典型的设置中，应该通过
  93.         //  *到支持pty。
  94.         //  * @返回一个IDisposable停止监听。
  95.         //  * /
  96.         // 支持输入与粘贴方法
  97.         term.onData(function (key) {
  98.           let order = {
  99.             Data: key,
  100.             Op: "stdin"
  101.           };
  102.           _this.onSend(order);
  103.         });
  104.         _this.term = term;
  105.       }
  106.       runFakeTerminal(_this);
  107.     },
  108.     //webShell主题
  109.     initSocket () {
  110.       const WebSocketUrl = "ws://127.0.0.1:8989/ws/ssh"
  111.       this.socket = new WebSocket(
  112.         WebSocketUrl
  113.       );
  114.       this.socketOnClose(); //关闭
  115.       this.socketOnOpen(); //
  116.       this.socketOnError();
  117.     },
  118.     //webshell链接成功之后操作
  119.     socketOnOpen () {
  120.       this.socket.onopen = () => {
  121.         // 链接成功后
  122.         this.initTerm();
  123.       };
  124.     },
  125.     //webshell关闭之后操作
  126.     socketOnClose () {
  127.       this.socket.onclose = () => {
  128.         console.log("close socket");
  129.       };
  130.     },
  131.     //webshell错误信息
  132.     socketOnError () {
  133.       this.socket.onerror = () => {
  134.         console.log("socket 链接失败");
  135.       };
  136.     },
  137.     //特殊处理
  138.     onSend (data) {
  139.       data = this.base.isObject(data) ? JSON.stringify(data) : data;
  140.       data = this.base.isArray(data) ? data.toString() : data;
  141.       data = data.replace(/\\\\/, "\\");
  142.       this.shellWs.onSend(data);
  143.     },
  144.     //删除左右两端的空格
  145.     trim (str) {
  146.       return str.replace(/(^\s*)|(\s*$)/g, "");
  147.     }
  148.   }
  149. };
  150. </script>
  152. <!-- Add "scoped" attribute to limit CSS to this component only -->
  153. <style scoped>
  154. h1, h2 {
  155.   font-weight: normal;
  156. }
  157. ul {
  158.   list-style-type: none;
  159.   padding: 0;
  160. }
  161. li {
  162.   display: inline-block;
  163.   margin: 0 10px;
  164. }
  165. a {
  166.   color: #42b983;
  167. }
  168. </style>

运行测试

先知先安装：npm install
进入项目根目录下面，执行：npm run dev

  1. npm run dev

image.png
在浏览器输入：http://127.0.0.1:3000
image.png