refactor:重构

Author: ZhiFengJia

remote-web/pom.xml

@@ -65,7 +65,7 @@
         <dependency>
             <groupId>com.jcraft</groupId>
             <artifactId>jsch</artifactId>
-            <version>0.1.54</version>
+            <version>0.1.55</version>
         </dependency>
 
         <dependency>

remote-web/src/main/java/com/jzf/remote/web/config/WebSSHWebSocketConfig.java

@@ -22,7 +22,7 @@ public class WebSSHWebSocketConfig implements WebSocketConfigurer{
     public void registerWebSocketHandlers(WebSocketHandlerRegistry webSocketHandlerRegistry) {
         //socket通道
         //指定处理器和路径
-        webSocketHandlerRegistry.addHandler(webSSHWebSocketHandler, "/webssh")
+        webSocketHandlerRegistry.addHandler(webSSHWebSocketHandler, "/web/terminal")
                 .addInterceptors(new WebSocketInterceptor())
                 .setAllowedOrigins("*");
     }

remote-web/src/main/java/com/jzf/remote/web/controller/indexController.java

@@ -12,11 +12,4 @@ public class indexController {
 	public String index() {
 		return "/WebIDE.html";
 	}
-
-
-	@GetMapping("ssh")
-	public String webSSH() {
-		return "/WebSSH.html";
-	}
-    
 }

remote-web/src/main/java/com/jzf/remote/web/service/impl/WebSSHServiceImpl.java

@@ -11,6 +11,7 @@
 import com.jzf.remote.web.service.WebSSHService;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Service;
 import org.springframework.web.socket.TextMessage;
 import org.springframework.web.socket.WebSocketSession;
@@ -32,13 +33,22 @@
 */
 @Service
 public class WebSSHServiceImpl implements WebSSHService {
+    private Logger logger = LoggerFactory.getLogger(WebSSHServiceImpl.class);
+
     //存放ssh连接信息的map
     private static Map<String, Object> sshMap = new ConcurrentHashMap<>();
-
-    private Logger logger = LoggerFactory.getLogger(WebSSHServiceImpl.class);
     //线程池
     private ExecutorService executorService = Executors.newCachedThreadPool();
 
+    @Value("${terminal.host}")
+    private String host;
+    @Value("${terminal.port}")
+    private Integer port;
+    @Value("${terminal.username}")
+    private String username;
+    @Value("${terminal.password}")
+    private String password;
+
     /**
      * @Description: 初始化连接
      * @Param: [session]
@@ -70,6 +80,10 @@ public void recvHandle(String buffer, WebSocketSession session) {
         WebSSHData webSSHData = null;
         try {
             webSSHData = objectMapper.readValue(buffer, WebSSHData.class);
+            webSSHData.setHost(host);
+            webSSHData.setPort(port);
+            webSSHData.setUsername(username);
+            webSSHData.setPassword(password);
         } catch (IOException e) {
             logger.error("Json转换异常");
             logger.error("异常信息:{}", e.getMessage());

remote-web/src/main/java/com/jzf/remote/web/websocket/OneWebSocket.java

@@ -20,7 +20,7 @@
  * @date 2021/12/15 17:34
  */
 @Slf4j
-@ServerEndpoint(value = "/test/one")
+@ServerEndpoint(value = "/web/console")
 @Component
 public class OneWebSocket {
     /**

remote-web/src/main/resources/application.yml

@@ -1,2 +1,8 @@
 server:
-  port: 80
+  port: 80
+
+terminal:
+  host: 47.92.137.2
+  port: 22
+  username: xxx
+  password: xxx

remote-web/src/main/resources/static/WebIDE.html

@@ -16,6 +16,7 @@
           integrity="sha512-CCnciBUnVXwa6IQT9q8EmGcarNit9GdKI5nJnj56B1iu0LuD13Qn/GZ+IUkrZROZaBdutN718NK6mIXdUjZGqg=="
           crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+    <link rel="stylesheet" href="/xterm/xterm.css" />
 
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"
             integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
@@ -33,6 +34,7 @@
             integrity="sha512-GAled7oA9WlRkBaUQlUEgxm37hf43V2KEMaEiWlvBO/ueP2BLvBLKN5tIJu4VZOTwo6Z4XvrojYngoN9dJw2ug=="
             crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script type='text/javascript' src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+    <script src="/xterm/xterm.js" charset="utf-8"></script>
 
     <link rel="stylesheet" href="/css/darkly.css" />
 
@@ -171,7 +173,7 @@
                 <textarea id="console" class="form-control" placeholder="控制台" readonly></textarea>
             </div>
             <div class="tab-pane fade" id="nav-terminal" role="tabpanel" aria-labelledby="nav-terminal-tab">
-                开发中...
+                <div id="terminal"></div>
             </div>
         </div>
     </div>
@@ -226,7 +228,8 @@ <h5 class="modal-title" id="cloneFromGithubLabel">Clone Project From GitHub</h5>
     </div>
 </div>
 <script src="/js/core.js"></script>
-<script src="/js/webSocket.js"></script>
+<script src="/js/web-console.js"></script>
+<script src="/js/web-terminal.js" charset="utf-8"></script>
 </body>
 
 </html>

remote-web/src/main/resources/static/WebSSH.html

@@ -136,7 +136,7 @@ function initSize() {
 
     editor.setSize($(".selectorLeft").parent().width() - width, height - 41);
 
-    $(".form-control[readonly]").css('height', totalHeight - 40 - height - 40 + 'px');
+    $("#console").css('height', totalHeight - 40 - height - 40 + 'px');
 }
 
 

remote-web/src/main/resources/static/js/core.js

@@ -1,50 +1,55 @@
-var websocket = null;
+var webConsole = null;
 //判断当前浏览器是否支持WebSocket, 主要此处要更换为自己的地址
-if ('WebSocket' in window) {
-    websocket = new WebSocket("ws://localhost/test/one");
+if (window.WebSocket) {
+    if (window.location.protocol == 'https:') {
+        var protocol = 'wss://';
+    } else {
+        var protocol = 'ws://';
+    }
+    webConsole = new WebSocket(protocol + "localhost/web/console");
 } else {
     alert('Not support websocket');
 }
 
 //连接成功建立的回调方法
-websocket.onopen = function(event) {
+webConsole.onopen = function(event) {
     console.log("WebSocket connection successful");
 }
 
 //连接关闭的回调方法
-websocket.onclose = function() {
+webConsole.onclose = function() {
     console.log("WebSocket close");
 }
 
 //接收到消息的回调方法
-websocket.onmessage = function(event) {
+webConsole.onmessage = function(event) {
     //将消息显示在网页上
     printConsole(event.data);
 }
 
 //连接发生错误的回调方法
-websocket.onerror = function() {
+webConsole.onerror = function() {
     console.log("WebSocket error");
 };
 
 //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
 window.onbeforeunload = function() {
-    websocket.close();
+    webConsole.close();
 }
 
 //发送消息
 function projectClean() {
-    websocket.send("{'projectName':'algorithm','goals':['clean']}");
+    webConsole.send("{'projectName':'algorithm','goals':['clean']}");
 }
 
 function projectCompile(){
-    websocket.send("{'projectName':'algorithm','goals':['compile']}");
+    webConsole.send("{'projectName':'algorithm','goals':['compile']}");
 }
 
 function projectBuild() {
-    websocket.send("{'projectName':'algorithm','goals':['package']}");
+    webConsole.send("{'projectName':'algorithm','goals':['package']}");
 }
 
 function projectCleanAndBuild() {
-    websocket.send("{'projectName':'algorithm','goals':['clean','package']}");
+    webConsole.send("{'projectName':'algorithm','goals':['clean','package']}");
 }