웹 SSH 프로젝트 의 예제 코드 를 순수 자바 로 구현 합 니 다.

17610 단어 JavaWebSSH항목
최근 프로젝트 수요 로 인해 프로젝트 에서 WebSSH 연결 단말기 의 기능 을 실현 해 야 한다.자신 이 처음으로 이런 유형의 기능 을 했 기 때문에 먼저 GitHub 에 올 라 가서 기 존의 바퀴 를 찾 아 직접 사용 할 수 있 는 지 찾 았 다.그 당시 에 이 분야 의 프로젝트 를 많이 보 았 다.예 를 들 어 GateOne,webssh,shellinabox 등 이 있 는데 이런 프로젝트 들 은 모두 webssh 의 기능 을 잘 실현 할 수 있다.그러나 최종 적 으로 사용 하지 않 은 이 유 는 대부분 python 이 쓴 것 이기 때 문 입 니 다.많은 파일 에 의존 해 야 합 니 다.자신 이 사용 할 때 이런 방안 을 사용 할 수 있 고 빠 르 고 편리 하기 때 문 입 니 다.그러나 프로젝트 에서 사용자 가 사용 할 때 사용자 에 게 서버 에 이러한 바 텀 의존 을 포함해 야 한다 고 요구 할 수 없습니다.이것 은 분명 합 리 적 이지 않 습 니 다.그래서 저 는 WebSSH 의 기능 을 직접 쓰 고 독립 된 프로젝트 로 시작 하기 로 했 습 니 다.
github 프로젝트 오픈 소스 주소:https://github.com/NoCortY/WebSSH
기술 선택
웹 쉬 는 실시 간 데이터 상호작용 이 필요 하기 때문에 긴 연결 의 웹 소켓 을 사용 합 니 다.개발 의 편 의 를 위해 프레임 워 크 는 SpringBoot 를 사용 합 니 다.또한 자바 사용자 가 ssh 를 연결 하 는 jsch 와 전단 셸 페이지 를 실현 하 는 xterm.js 도 알 고 있 습 니 다.
그래서 최종 기술 선택 은 SpringBoot+Websocket+jsch+xterm.js 입 니 다.
가 져 오기 의존

<parent>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-parent</artifactId>
 <version>2.1.7.RELEASE</version>
 <relativePath /> <!-- lookup parent from repository -->
</parent>
<dependencies>
 <!-- Web   -->
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-web</artifactId>
 </dependency>
 <!-- jsch   -->
 <dependency>
 <groupId>com.jcraft</groupId>
 <artifactId>jsch</artifactId>
 <version>0.1.54</version>
 </dependency>
 <!-- WebSocket    -->
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-websocket</artifactId>
 </dependency>
 <!--         -->
 <dependency>
 <groupId>commons-io</groupId>
 <artifactId>commons-io</artifactId>
 <version>1.4</version>
 </dependency>
 <dependency>
 <groupId>commons-fileupload</groupId>
 <artifactId>commons-fileupload</artifactId>
 <version>1.3.1</version>
 </dependency>
</dependencies>
간단 한 xterm 사례
xterm 은 인기 없 는 기술 이기 때문에 많은 학생 들 이 이 분야 의 지식 을 지탱 하지 못 합 니 다.저도 이 기능 을 실현 하기 위해 임시로 배 웠 습 니 다.그래서 여기 서 소개 해 드 리 겠 습 니 다.
xterm.js 는 웹 소켓 을 기반 으로 한 용기 로 전단 에서 명령 행 을 실현 하 는 데 도움 을 줄 수 있 습 니 다.우리 가 평소에 SecureCRT 나 XShell 로 서버 를 연결 할 때 처럼.
다음은 홈 페이지 의 입문 사례 입 니 다.

<!doctype html>
 <html>
 <head>
 <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" rel="external nofollow" />
 <script src="node_modules/xterm/lib/xterm.js"></script>
 </head>
 <body>
 <div id="terminal"></div>
 <script>
 var term = new Terminal();
 term.open(document.getElementById('terminal'));
 term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
 </script>
 </body>
 </html>
최종 테스트,페이지 는 아래 와 같 습 니 다:

페이지 에 셸 과 유사 한 스타일 이 나 타 났 음 을 볼 수 있 습 니 다.이것 에 따라 웹 쉬 를 계속 진행 하 십시오.
백 엔 드 구현
xterm 은 전단 의 스타일 만 실현 하면 서버 와 의 상호작용 을 진정 으로 실현 할 수 없 기 때문에 서버 와 의 상호작용 은 주로 우리 자바 백 엔 드 에 의 해 제어 되 기 때문에 우 리 는 백 엔 드 부터 jsch+websocket 을 사용 하여 이 부분 을 실현 합 니 다.
WebSocket 설정
메 시 지 를 실시 간 으로 전단 으로 보 내 려 면 웹 소켓 을 사용 해 야 하기 때문에 웹 소켓 을 모 르 는 학생 들 은 먼저 스스로 알 아 볼 수 있 습 니 다.여 기 는 더 많은 소개 에 불과 합 니 다.우 리 는 웹 소켓 의 설정 을 직접 시작 합 니 다.

/**
* @Description: websocket  
* @Author: NoCortY
* @Date: 2020/3/8
*/
@Configuration
@EnableWebSocket
public class WebSSHWebSocketConfig implements WebSocketConfigurer{
 @Autowired
 WebSSHWebSocketHandler webSSHWebSocketHandler;
 @Override
 public void registerWebSocketHandlers(WebSocketHandlerRegistry webSocketHandlerRegistry) {
 //socket  
 //        ,     
 webSocketHandlerRegistry.addHandler(webSSHWebSocketHandler, "/webssh")
  .addInterceptors(new WebSocketInterceptor())
  .setAllowedOrigins("*");
 }
}
프로세서(Handler)와 차단기(Interceptor)의 실현
방금 우 리 는 웹 소켓 의 설정 을 완 료 했 고 프로세서 와 차단 기 를 지정 했다.그래서 다음은 프로세서 와 차단기 의 실현 이다.
차단기:

public class WebSocketInterceptor implements HandshakeInterceptor {
 /**
 * @Description: Handler     
 * @Param: [serverHttpRequest, serverHttpResponse, webSocketHandler, map]
 * @return: boolean
 * @Author: NoCortY
 * @Date: 2020/3/1
 */
 @Override
 public boolean beforeHandshake(ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Map<String, Object> map) throws Exception {
 if (serverHttpRequest instanceof ServletServerHttpRequest) {
  ServletServerHttpRequest request = (ServletServerHttpRequest) serverHttpRequest;
  //    UUID,          ,      ,        UUID
  //              ,               
  String uuid = UUID.randomUUID().toString().replace("-","");
  // uuid  websocketsession 
  map.put(ConstantPool.USER_UUID_KEY, uuid);
  return true;
 } else {
  return false;
 }
 }

 @Override
 public void afterHandshake(ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Exception e) {

 }
}
프로세서:

/**
* @Description: WebSSH WebSocket   
* @Author: NoCortY
* @Date: 2020/3/8
*/
@Component
public class WebSSHWebSocketHandler implements WebSocketHandler{
 @Autowired
 private WebSSHService webSSHService;
 private Logger logger = LoggerFactory.getLogger(WebSSHWebSocketHandler.class);

 /**
 * @Description:      WebSocket   
 * @Param: [webSocketSession]
 * @return: void
 * @Author: Object
 * @Date: 2020/3/8
 */
 @Override
 public void afterConnectionEstablished(WebSocketSession webSocketSession) throws Exception {
 logger.info("  :{},  WebSSH", webSocketSession.getAttributes().get(ConstantPool.USER_UUID_KEY));
 //       
 webSSHService.initConnection(webSocketSession);
 }

 /**
 * @Description:        
 * @Param: [webSocketSession, webSocketMessage]
 * @return: void
 * @Author: NoCortY
 * @Date: 2020/3/8
 */
 @Override
 public void handleMessage(WebSocketSession webSocketSession, WebSocketMessage<?> webSocketMessage) throws Exception {
 if (webSocketMessage instanceof TextMessage) {
  logger.info("  :{},    :{}", webSocketSession.getAttributes().get(ConstantPool.USER_UUID_KEY), webSocketMessage.toString());
  //  service    
  webSSHService.recvHandle(((TextMessage) webSocketMessage).getPayload(), webSocketSession);
 } else if (webSocketMessage instanceof BinaryMessage) {

 } else if (webSocketMessage instanceof PongMessage) {

 } else {
  System.out.println("Unexpected WebSocket message type: " + webSocketMessage);
 }
 }

 /**
 * @Description:        
 * @Param: [webSocketSession, throwable]
 * @return: void
 * @Author: Object
 * @Date: 2020/3/8
 */
 @Override
 public void handleTransportError(WebSocketSession webSocketSession, Throwable throwable) throws Exception {
 logger.error("      ");
 }

 /**
 * @Description:        
 * @Param: [webSocketSession, closeStatus]
 * @return: void
 * @Author: NoCortY
 * @Date: 2020/3/8
 */
 @Override
 public void afterConnectionClosed(WebSocketSession webSocketSession, CloseStatus closeStatus) throws Exception {
 logger.info("  :{}  webssh  ", String.valueOf(webSocketSession.getAttributes().get(ConstantPool.USER_UUID_KEY)));
 //  service    
 webSSHService.close(webSocketSession);
 }

 @Override
 public boolean supportsPartialMessages() {
 return false;
 }
}
주의해 야 할 것 은 제 가 차단기 에 가입 한 사용자 표 지 는 무 작위 UUID 를 사 용 했 습 니 다.이것 은 독립 된 websocket 프로젝트 로 서 사용자 모듈 이 없 기 때 문 입 니 다.이 프로젝트 를 자신의 프로젝트 에 통합 하려 면 이 코드 를 수정 하고 자신의 프로젝트 에서 사용자 가 사용 하 는 사용자 표 지 를 식별 하 는 것 으로 바 꿔 야 합 니 다.
WebSSH 의 업무 논리 실현(핵심)
방금 우 리 는 웹 소켓 의 설정 을 실 현 했 습 니 다.모두 죽은 코드 입 니 다.인 터 페 이 스 를 실현 한 다음 에 자신의 수요 에 따라 실현 할 수 있 습 니 다.지금 우 리 는 백 엔 드 의 주요 업무 논 리 를 실현 할 것 입 니 다.이 논 리 를 실현 하기 전에 우 리 는 먼저 웹 SSH 를 생각해 보 겠 습 니 다.우 리 는 주로 어떤 효 과 를 나타 내 고 싶 습 니까?
나 는 여기 서 총 결 을 하나 했다.
1.우선 터미널 에 연결 해 야 합 니 다(연결 초기 화)
2.그 다음 에 저희 서버 는 전단 에서 온 메 시 지 를 처리 해 야 합 니 다(전단 메 시 지 를 수신 하고 처리 합 니 다)
3.터미널 에서 되 돌아 오 는 메 시 지 를 전단 에 다시 써 야 합 니 다(데이터 재 작성 전단)
4.연결 닫 기
이 네 가지 수요 에 따라 우 리 는 먼저 인 터 페 이 스 를 정의 하면 수 요 를 명확 하 게 할 수 있다.

/**
 * @Description: WebSSH     
 * @Author: NoCortY
 * @Date: 2020/3/7
 */
public interface WebSSHService {
 /**
 * @Description:    ssh  
 * @Param:
 * @return:
 * @Author: NoCortY
 * @Date: 2020/3/7
 */
 public void initConnection(WebSocketSession session);

 /**
 * @Description:          
 * @Param:
 * @return:
 * @Author: NoCortY
 * @Date: 2020/3/7
 */
 public void recvHandle(String buffer, WebSocketSession session);

 /**
 * @Description:        for websocket
 * @Param:
 * @return:
 * @Author: NoCortY
 * @Date: 2020/3/7
 */
 public void sendMessage(WebSocketSession session, byte[] buffer) throws IOException;

 /**
 * @Description:     
 * @Param:
 * @return:
 * @Author: NoCortY
 * @Date: 2020/3/7
 */
 public void close(WebSocketSession session);
}
이제 우 리 는 이 인터페이스 에 근거 하여 우리 가 정의 한 기능 을 실현 할 수 있다.
연결 초기 화
우리 의 밑바닥 은 jsch 에 의존 하여 이 루어 지기 때문에 여 기 는 jsch 를 사용 하여 연결 을 구축 해 야 한다.연결 을 초기 화 하 는 것 은 사실상 우리 가 필요 로 하 는 연결 정 보 를 하나의 맵 에 저장 하 는 것 이다.여 기 는 어떠한 실제 연결 작업 도 하지 않 는 다.왜 여 기 는 직접 연결 하지 않 습 니까?이 전단 은 웹 소켓 에 만 연결 되 어 있 기 때 문 입 니 다.그러나 우 리 는 전단 에서 Liux 터미널 의 사용자 이름과 비밀 번 호 를 보 내야 합 니 다.이런 정보 가 없 으 면 연결 할 수 없습니다.

public void initConnection(WebSocketSession session) {
 JSch jSch = new JSch();
 SSHConnectInfo sshConnectInfo = new SSHConnectInfo();
 sshConnectInfo.setjSch(jSch);
 sshConnectInfo.setWebSocketSession(session);
 String uuid = String.valueOf(session.getAttributes().get(ConstantPool.USER_UUID_KEY));
 //   ssh      map 
 sshMap.put(uuid, sshConnectInfo);
}
클 라 이언 트 가 보 낸 데이터 처리
이 단계 에서 우 리 는 두 갈래 로 나 눌 것 이다.
첫 번 째 지점:클 라 이언 트 가 터미널 의 사용자 이름과 비밀번호 등 정 보 를 보 내 면 터미널 연결 을 합 니 다.
두 번 째 지점:클 라 이언 트 가 터미널 을 조작 하 라 는 명령 을 보 내 면 터미널 로 직접 전송 하고 터미널 의 실행 결 과 를 가 져 옵 니 다.
구체 적 인 코드 구현:

public void recvHandle(String buffer, WebSocketSession session) {
 ObjectMapper objectMapper = new ObjectMapper();
 WebSSHData webSSHData = null;
 try {
  //       JSON
  webSSHData = objectMapper.readValue(buffer, WebSSHData.class);
 } catch (IOException e) {
  logger.error("Json    ");
  logger.error("    :{}", e.getMessage());
  return;
 }
 //          uuid
 String userId = String.valueOf(session.getAttributes().get(ConstantPool.USER_UUID_KEY));
 if (ConstantPool.WEBSSH_OPERATE_CONNECT.equals(webSSHData.getOperate())) {
  //       
  //       ssh    
  SSHConnectInfo sshConnectInfo = (SSHConnectInfo) sshMap.get(userId);
  //        
  WebSSHData finalWebSSHData = webSSHData;
  executorService.execute(new Runnable() {
  @Override
  public void run() {
   try {
   //     
   connectToSSH(sshConnectInfo, finalWebSSHData, session);
   } catch (JSchException | IOException e) {
   logger.error("webssh    ");
   logger.error("    :{}", e.getMessage());
   close(session);
   }
  }
  });
 } else if (ConstantPool.WEBSSH_OPERATE_COMMAND.equals(webSSHData.getOperate())) {
  //          
  String command = webSSHData.getCommand();
  SSHConnectInfo sshConnectInfo = (SSHConnectInfo) sshMap.get(userId);
  if (sshConnectInfo != null) {
  try {
   //       
   transToSSH(sshConnectInfo.getChannel(), command);
  } catch (IOException e) {
   logger.error("webssh    ");
   logger.error("    :{}", e.getMessage());
   close(session);
  }
  }
 } else {
  logger.error("      ");
  close(session);
 }
}
데 이 터 는 웹 소켓 을 통 해 전단 으로 보 냅 니 다.

public void sendMessage(WebSocketSession session, byte[] buffer) throws IOException {
 session.sendMessage(new TextMessage(buffer));
}
연결 닫 기

public void close(WebSocketSession session) {
 //       uuid
 String userId = String.valueOf(session.getAttributes().get(ConstantPool.USER_UUID_KEY));
 SSHConnectInfo sshConnectInfo = (SSHConnectInfo) sshMap.get(userId);
 if (sshConnectInfo != null) {
  //    
  if (sshConnectInfo.getChannel() != null) sshConnectInfo.getChannel().disconnect();
  //map    ssh    
  sshMap.remove(userId);
 }
}
이로써 우리 의 전체 백 엔 드 실현 은 끝났다.편폭 이 제한 되 어 있 기 때문에 여기 서 일부 조작 을 방법 으로 포장 하면 너무 많이 보 여주 지 않 고 논리 적 실현 의 방향 에 중심 을 두 자.앞으로 우 리 는 전단 의 실현 을 진행 할 것 이다.
전단 실현
전단 작업 은 주로 이렇게 몇 가지 절차 로 나 뉜 다.
  • 페이지 의 실현
  • 웹 소켓 에 연결 하여 데이터 수신 및 재 작성 완료
  • 데이터 전송
  • 그래서 우 리 는 한 걸음 한 걸음 그것 을 실현 한다.
    페이지 구현
    페이지 의 실현 은 매우 간단 합 니 다.우 리 는 전체 화면 에 터미널 의 큰 검 은 화면 을 표시 해 야 하기 때문에 우 리 는 어떤 스타일 을 쓰 지 않 고 div 를 만 든 다음 에 terminal 인 스 턴 스 를 xterm 을 통 해 이 div 에 넣 으 면 이 루어 집 니 다.
    
    <!doctype html>
    <html>
    <head>
     <title>WebSSH</title>
     <link rel="stylesheet" href="../css/xterm.css" rel="external nofollow" />
    </head>
    <body>
    <div id="terminal" style="width: 100%;height: 100%"></div>
    
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../js/xterm.js" charset="utf-8"></script>
    <script src="../js/webssh.js" charset="utf-8"></script>
    <script src="../js/base64.js" charset="utf-8"></script>
    </body>
    </html>
    웹 소켓 을 연결 하고 데이터 전송,수신,재 작성 을 완료 합 니 다.
    
    openTerminal( {
     //         ,          ,           ,          。
     operate:'connect',
     host: 'ip  ',
     port: '   ',
     username: '   ',
     password: '  '
     });
     function openTerminal(options){
     var client = new WSSHClient();
     var term = new Terminal({
      cols: 97,
      rows: 37,
      cursorBlink: true, //     
      cursorStyle: "block", //      null | 'block' | 'underline' | 'bar'
      scrollback: 800, //  
      tabStopWidth: 8, //    
      screenKeys: true
     });
    
     term.on('data', function (data) {
      //          
      client.sendClientData(data);
     });
     term.open(document.getElementById('terminal'));
     //         ...
     term.write('Connecting...');
     //      
     client.connect({
      onError: function (error) {
      //      
      term.write('Error: ' + error + '\r
    '); }, onConnect: function () { // client.sendInitData(options); }, onClose: function () { // term.write("\rconnection closed"); }, onData: function (data) { // term.write(data); } }); }
    효과 전시
    잇닿다

    연결 성공

    명령 조작
    ls 명령:

    vim 편집기:

    top 명령:

    결어
    이렇게 해서 우 리 는 웹 sh 프로젝트 의 실현 을 완 성 했 습 니 다.다른 어떠한 구성 요소 에 도 의존 하지 않 고 백 엔 드 는 자바 로 이 루어 졌 습 니 다.SpringBoot 를 사용 하여 쉽게 배치 할 수 있 습 니 다.
    그러나 우 리 는 이 항목 을 확장 할 수 있 습 니 다.예 를 들 어 새로 업로드 하거나 파일 을 다운로드 할 수 있 습 니 다.예 를 들 어 Xftp 처럼 다운로드 파일 을 편리 하 게 드래그 해서 업로드 할 수 있 습 니 다.
    이 프로젝트 이후 에 저 는 계속 업 데 이 트 를 할 것 입 니 다.상기 기능 도 천천히 실 현 될 것 입 니 다.Github:https://github.com/NoCortY/WebSSH
    순수 자바 로 웹 SSH 프로젝트 를 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 자바 가 웹 SSH 프로젝트 를 실현 하 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!

    좋은 웹페이지 즐겨찾기