当前位置:   article > 正文

Vue+Xterm.js+WebSocket+JSch实现Web Shell终端

Vue+Xterm.js+WebSocket+JSch实现Web Shell终端

一、需求

在系统中使用Web Shell连接集群的登录节点

二、实现

前端使用Vue,WebSocket实现前后端通信,后端使用JSch ssh通讯包。

1. 前端核心代码
<template>
  <div class="shell-container">
    <div id="shell"/>
  </div>
</template>

<script>

import 'xterm/css/xterm.css'
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'

export default {
  name: 'WebShell',
  props: {
    socketURI: {
      type: String,
      default: ''
    },
  },
  watch: {
    socketURI: {
      deep: true, //对象内部属性的监听,关键。
      immediate: true,
      handler() {
        this.initSocket();
      },
    },
  },
  data() {
    return {
      term: undefined,
      rows: 24,
      cols: 80,
      path: "",
      isShellConn: false // shell是否连接成功
    }
  },
  mounted() {
    const { onTerminalResize } = this;
    this.initSocket();
    // 通过防抖函数
    const resizedFunc = this.debounce(function() {
      onTerminalResize();
    }, 250); // 250毫秒内只执行一次  
    window.addEventListener('resize', resizedFunc);
  },
  beforeUnmount() {
    this.socket.close();
    this.term&&this.term.dispose();
    window.removeEventListener('resize');
  },
  methods: {
    initTerm() {
      let term = new Terminal({
        rendererType: "canvas", //渲染类型
        rows: this.rows, //行数
        cols: this.cols, // 不指定行数,自动回车后光标从下一行开始
        convertEol: true, //启用时,光标将设置为下一行的开头
        disableStdin: false, //是否应禁用输入
        windowsMode: true, // 根据窗口换行
        cursorBlink: true, //光标闪烁
        theme: {
          foreground: "#ECECEC", //字体
          background: "#000000", //背景色
          cursor: "help", //设置光标
          lineHeight: 20,
        },
      });
      this.term = term;
      const fitAddon = new FitAddon();
      this.term.loadAddon(fitAddon);
      this.fitAddon = fitAddon;
      let element = document.getElementById("shell");
      term.open(element);
      // 自适应大小(使终端的尺寸和几何尺寸适合于终端容器的尺寸),初始化的时候宽高都是对的
      fitAddon.fit();
      term.focus();
      //监视命令行输入
      this.term.onData((data) => {
        let dataWrapper = data;
        if (dataWrapper === "\r") {
          dataWrapper = "\n";
        } else if (dataWrapper === "\u0003") {
          // 输入ctrl+c
          dataWrapper += "\n";
        }
        // 将输入的命令通知给后台,后台返回数据。
        this.socket.send(JSON.stringify({ type: "command", data: dataWrapper }));
      });
    },
    onTerminalResize() {
      this.fitAddon.fit();
      this.socket.send(
        JSON.stringify({
          type: "resize",
          data: {
            rows: this.term.rows,
            cols: this.term.cols,
          }
        })
      );
    },
    initSocket() {
      if (this.socketURI == "") {
        return;
      }
      // 添加path、cols、rows
      const uri = `${this.socketURI}&path=${this.path}&cols=${this.cols}&rows=${this.rows}`;
      console.log(uri);
      this.socket = new WebSocket(uri);
      this.socketOnClose();
      this.socketOnOpen();
      this.socketOnmessage();
      this.socketOnError();
    },
    socketOnOpen() {
      this.socket.onopen = () => {
        console.log("websocket链接成功");
        this.initTerm();
      };
    },
    socketOnmessage() {
      this.socket.onmessage = (evt) => {
        try {
          if (typeof evt.data === "string") {
            const msg = JSON.parse(evt.data);
            switch(msg.type) {
              case "command":
                // 将返回的数据写入xterm,回显在webshell上
                this.term.write(msg.data);
                // 当shell首次连接成功时才发送resize事件
                if (!this.isShellConn) {
                  // when server ready for connection,send resize to server
                  this.onTerminalResize();
                  this.isShellConn = true;
                }
                break;
              case "exit":
                this.term.write("Process exited with code 0");
                break;
            }
          }
        } catch (e) {
          console.error(e);
          console.log("parse json error.", evt.data);
        }
      };
    },
    socketOnClose() {
      this.socket.onclose = () => {
        this.socket.close();
        console.log("关闭 socket");
        window.removeEventListener("resize", this.onTerminalResize);
      };
    },
    socketOnError() {
      this.socket.onerror = () => {
        console.log("socket 链接失败");
      };
    },
    debounce(func, wait) {  
      let timeout;  
      return function() {  
          const context = this;  
          const args = arguments;  
          clearTimeout(timeout);  
          timeout = setTimeout(function() {  
              func.apply(context, args);  
          }, wait);  
      };  
    }  
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#shell {
  width: 100%;
  height: 100%;
}
.shell-container {
  height: 100%;
}
</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
2. 后端核心代码
package com.example.webshell.service.impl;

import com.alibaba.fastjson.JSONObject;
import com.example.webshell.constant.Constant;
import com.example.webshell.entity.LoginNodeInfo;
import com.example.webshell.entity.ShellConnectInfo;
import com.example.webshell.entity.SocketData;
import com.example.webshell.entity.WebShellParam;
import com.example.webshell.service.WebShellService;
import com.example.webshell.utils.ThreadPoolUtils;
import com.example.webshell.utils.WebShellUtil;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.jcraft.jsch.*;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;

import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Arrays;
import java.util.Map;
import java.util.Properties;
import java.util.concurrent.ConcurrentHashMap;

import static com.example.webshell.constant.Constant.*;

@Slf4j
@Service
public class WebShellServiceImpl implements WebShellService {

    /**
     * 存放ssh连接信息的map
     */
    private static final Map<String, Object> SSH_MAP = new ConcurrentHashMap<>();

    /**
     * 初始化连接
     */
    @Override
    public void initConnection(javax.websocket.Session webSocketSession, WebShellParam webShellParam) {
        JSch jSch = new JSch();
        ShellConnectInfo shellConnectInfo = new ShellConnectInfo();
        shellConnectInfo.setJsch(jSch);
        shellConnectInfo.setSession(webSocketSession);
        String uuid = WebShellUtil.getUuid(webSocketSession);
        // 根据集群和登录节点查询IP TODO
        LoginNodeInfo loginNodeInfo = new LoginNodeInfo("demo_admin", "demo_admin", "192.168.88.102", 22);
        //启动线程异步处理
        ThreadPoolUtils.execute(() -> {
            try {
                connectToSsh(shellConnectInfo, webShellParam, loginNodeInfo, webSocketSession);
            } catch (JSchException e) {
                log.error("web shell连接异常: {}", e.getMessage());
                sendMessage(webSocketSession, new SocketData(OPERATE_ERROR, e.getMessage()));
                close(webSocketSession);
            }
        });
        //将这个ssh连接信息放入缓存中
        SSH_MAP.put(uuid, shellConnectInfo);
    }

    /**
     * 处理客户端发送的数据
     */
    @Override
    public void handleMessage(javax.websocket.Session webSocketSession, String message) {
        ObjectMapper objectMapper = new ObjectMapper();
        SocketData shellData;
        try {
            shellData = objectMapper.readValue(message, SocketData.class);
            String userId = WebShellUtil.getUuid(webSocketSession);
            //找到刚才存储的ssh连接对象
            ShellConnectInfo shellConnectInfo = (ShellConnectInfo) SSH_MAP.get(userId);
            if (shellConnectInfo != null) {
                if (OPERATE_RESIZE.equals(shellData.getType())) {
                    ChannelShell channel = shellConnectInfo.getChannel();
                    Object data = shellData.getData();
                    Map map = objectMapper.readValue(JSONObject.toJSONString(data), Map.class);
                    System.out.println(map);
                    channel.setPtySize(Integer.parseInt(map.get("cols").toString()), Integer.parseInt(map.get("rows").toString()), 0, 0);
                } else if (OPERATE_COMMAND.equals(shellData.getType())) {
                    String command = shellData.getData().toString();
                    sendToTerminal(shellConnectInfo.getChannel(), command);

                    // 退出状态码
                    int exitStatus = shellConnectInfo.getChannel().getExitStatus();
                    System.out.println(exitStatus);
                } else {
                    log.error("不支持的操作");
                    close(webSocketSession);
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
            log.error("消息处理异常: {}", e.getMessage());
        }
    }

    /**
     * 关闭连接
     */
    private void close(javax.websocket.Session webSocketSession) {
        String userId = WebShellUtil.getUuid(webSocketSession);
        ShellConnectInfo shellConnectInfo = (ShellConnectInfo) SSH_MAP.get(userId);
        if (shellConnectInfo != null) {
            //断开连接
            if (shellConnectInfo.getChannel() != null) {
                shellConnectInfo.getChannel().disconnect();
            }
            //map中移除
            SSH_MAP.remove(userId);
        }
    }

    /**
     * 使用jsch连接终端
     */
    private void connectToSsh(ShellConnectInfo shellConnectInfo, WebShellParam webShellParam, LoginNodeInfo loginNodeInfo, javax.websocket.Session webSocketSession) throws JSchException {
        Properties config = new Properties();
        // SSH 连接远程主机时,会检查主机的公钥。如果是第一次该主机,会显示该主机的公钥摘要,提示用户是否信任该主机
        config.put("StrictHostKeyChecking", "no");

        //获取jsch的会话
        Session session = shellConnectInfo.getJsch().getSession(loginNodeInfo.getUsername(), loginNodeInfo.getHost(), loginNodeInfo.getPort());
        session.setConfig(config);
        //设置密码
        session.setPassword(loginNodeInfo.getPassword());
        //连接超时时间30s
        session.connect(30 * 1000);

        //查询上次登录时间
        showLastLogin(session, webSocketSession, loginNodeInfo.getUsername());

        //开启交互式shell通道
        ChannelShell channel = (ChannelShell) session.openChannel("shell");
        //设置channel
        shellConnectInfo.setChannel(channel);

        //通道连接超时时间3s
        channel.connect(3 * 1000);
        channel.setPty(true);

        //读取终端返回的信息流
        try (InputStream inputStream = channel.getInputStream()) {
            //循环读取
            byte[] buffer = new byte[Constant.BUFFER_SIZE];
            int i;
            //如果没有数据来,线程会一直阻塞在这个地方等待数据。
            while ((i = inputStream.read(buffer)) != -1) {
                sendMessage(webSocketSession, new SocketData(OPERATE_COMMAND, new String(Arrays.copyOfRange(buffer, 0, i))));
            }
        } catch (IOException e) {
            log.error("读取终端返回的信息流异常:", e);
        } finally {
            //断开连接后关闭会话
            session.disconnect();
            channel.disconnect();
        }
    }

    /**
     * 向前端展示上次登录信息
     */
    private void showLastLogin(Session session, javax.websocket.Session webSocketSession, String username) throws JSchException {
        ChannelExec channelExec = (ChannelExec) session.openChannel("exec");
        channelExec.setCommand("lastlog -u " + username);
        channelExec.connect();
        channelExec.setErrStream(System.err);
        try (InputStream inputStream = channelExec.getInputStream()) {
            byte[] buffer = new byte[Constant.BUFFER_SIZE];
            int i;
            StringBuilder sb = new StringBuilder();
            while ((i = inputStream.read(buffer)) != -1) {
                sb.append(new String(Arrays.copyOfRange(buffer, 0, i)));
            }
            // 解析结果
            String[] split = sb.toString().split("\n");
            if (split.length > 1) {
                String[] items = split[1].split("\\s+", 4);
                String msg = String.format("Last login: %s from %s\n", items[3], items[2]);
                sendMessage(webSocketSession, new SocketData(OPERATE_COMMAND, msg));
            }
        } catch (IOException e) {
            log.error("读取终端返回的信息流异常:", e);
        } finally {
            channelExec.disconnect();
        }
    }

    /**
     * 数据写回前端
     */
    private void sendMessage(javax.websocket.Session webSocketSession, SocketData data) {
        try {
            webSocketSession.getBasicRemote().sendText(JSONObject.toJSONString(data));
        } catch (IOException e) {
            log.error("数据写回前端异常:", e);
        }
    }

    /**
     * 将消息转发到终端
     */
    private void sendToTerminal(Channel channel, String command) {
        if (channel != null) {
            try {
                OutputStream outputStream = channel.getOutputStream();
                outputStream.write(command.getBytes());
                outputStream.flush();
            } catch (IOException e) {
                log.error("web shell将消息转发到终端异常:{}", e.getMessage());
            }
        }
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216

三、效果展示

在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/795398
推荐阅读
相关标签
  

闽ICP备14008679号