fix:修复web终端改变大小时异常

Author: ZhiFengJia

remote-web/pom.xml

@@ -67,6 +67,13 @@
             <artifactId>jsch</artifactId>
             <version>0.1.55</version>
         </dependency>
+        <!-- https://mvnrepository.com/artifact/org.apache.sshd/sshd-core -->
+<!--        <dependency>-->
+<!--            <groupId>org.apache.sshd</groupId>-->
+<!--            <artifactId>sshd-core</artifactId>-->
+<!--            <version>2.8.0</version>-->
+<!--        </dependency>-->
+
 
         <dependency>
             <groupId>org.springframework.boot</groupId>

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

@@ -40,15 +40,6 @@ public class WebSSHServiceImpl implements WebSSHService {
     //线程池
     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]
@@ -80,10 +71,6 @@ 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());
@@ -103,6 +90,11 @@ public void run() {
                     } catch (JSchException | IOException e) {
                         logger.error("webssh连接异常");
                         logger.error("异常信息:{}", e.getMessage());
+                        try {
+                            session.sendMessage(new TextMessage("连接异常:" + e.getMessage()));
+                        } catch (IOException ex) {
+                            ex.printStackTrace();
+                        }
                         close(session);
                     }
                 }

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

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

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

@@ -16,7 +16,9 @@
           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" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/xterm/2.9.2/xterm.min.css"
+          integrity="sha512-yqkIsVYKEsENpXQX0zLrKj6n50rmX5X1j0cclmCnETFoWG2PKMZjvDEp6do28gGLxIvMnihpERBGRa8Ck0Ls8g=="
+          crossorigin="anonymous" referrerpolicy="no-referrer" />
 
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"
             integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
@@ -34,7 +36,12 @@
             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>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/2.9.2/xterm.min.js"
+            integrity="sha512-S1ITNcRgtLq/tVnMcX7Qcss09kJ5Lu7dZbtXw/dBDjxYJSdyucbYKOYI1nSbb9EtrjEK3h7Kxekkbg4gVLr8gg=="
+            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/2.9.2/addons/fit/fit.min.js"
+            integrity="sha512-PyTGariw9ceX9zejvpqCikObn0A3cwR3LoDQY1/L+NET1LZBMYi/IPIn6pvfRt02etYhRw4zJ2iU3yGyEH5+8A=="
+            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
     <link rel="stylesheet" href="/css/darkly.css" />
 
@@ -160,7 +167,7 @@
 <div class="row">
     <div class="col">
         <nav>
-            <div class="nav nav-tabs" id="nav-tab" role="tablist">
+            <div class="nav nav-tabs" id="terminal-tab" role="tablist">
                 <a class="nav-link active" id="nav-console-tab" data-toggle="tab" href="#nav-console" role="tab"
                    aria-controls="nav-console" aria-selected="true">Console</a>
                 <a class="nav-link" id="nav-terminal-tab" data-toggle="tab" href="#nav-terminal" role="tab"
@@ -215,9 +222,9 @@ <h5 class="modal-title" id="cloneFromGithubLabel">Clone Project From GitHub</h5>
             <div class="modal-body">
                 <div class="input-group mb-3">
                     <div class="input-group-prepend">
-                        <span class="input-group-text" id="basic-addon3">URL:</span>
+                        <span class="input-group-text" id="basic-addon">URL:</span>
                     </div>
-                    <input type="text" class="form-control" aria-describedby="basic-addon3">
+                    <input type="text" class="form-control" aria-describedby="basic-addon">
                 </div>
             </div>
             <div class="modal-footer">
@@ -227,9 +234,52 @@ <h5 class="modal-title" id="cloneFromGithubLabel">Clone Project From GitHub</h5>
         </div>
     </div>
 </div>
-<script src="/js/core.js"></script>
+
+<!-- Modal -->
+<div class="modal fade" id="sshInfo" tabindex="-1" aria-labelledby="sshInfoLabel"
+     aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="sshInfoLabel">配置ssh连接信息</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text" id="basic-addon1">Host:</span>
+                    </div>
+                    <input type="text" class="form-control" aria-describedby="basic-addon1" placeholder="47.92.137.2" value="47.92.137.2">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text" id="basic-addon2">Port:</span>
+                    </div>
+                    <input type="text" class="form-control" aria-describedby="basic-addon2" placeholder="22" value="22">
+                </div>
+                <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text" id="basic-addon3">UserName:</span>
+                    </div>
+                    <input type="text" class="form-control" aria-describedby="basic-addon3">
+                </div>
+                <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text" id="basic-addon4">Password:</span>
+                    </div>
+                    <input type="password" class="form-control" aria-describedby="basic-addon4">
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="connectSSH()">Connect</button>
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cannel</button>
+            </div>
+        </div>
+    </div>
+</div>
 <script src="/js/web-console.js"></script>
 <script src="/js/web-terminal.js" charset="utf-8"></script>
+<script src="/js/core.js"></script>
 </body>
 
 </html>

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

@@ -63,7 +63,10 @@ $(function () {
             editor.setSize(width, height - 41);
 
             var totalHeight = $(window).height();
-            $(".form-control[readonly]").css('height', totalHeight - 40 - height - 40 + 'px');
+            $("#console").css('height', totalHeight - 40 - height - 40 + 'px');
+            $("#terminal").css('height', totalHeight - 40 - height - 40 + 'px');
+
+            terminalResize();
         },
         stop: function (event, ui) {
             var ele = ui.element;
@@ -75,7 +78,10 @@ $(function () {
             editor.setSize(width, height - 41);
 
             var totalHeight = $(window).height();
-            $(".form-control[readonly]").css('height', totalHeight - 40 - height - 40 + 'px');
+            $("#console").css('height', totalHeight - 40 - height - 40 + 'px');
+            $("#terminal").css('height', totalHeight - 40 - height - 40 + 'px');
+
+            terminalResize();
         }
     });
 
@@ -92,7 +98,10 @@ $(function () {
             editor.setSize(width, height - 41);
 
             var totalHeight = $(window).height();
-            $(".form-control[readonly]").css('height', totalHeight - 40 - height - 40 + 'px');
+            $("#console").css('height', totalHeight - 40 - height - 40 + 'px');
+            $("#terminal").css('height', totalHeight - 40 - height - 40 + 'px');
+
+            terminalResize();
         },
         stop: function (event, ui) {
             var ele = ui.element;
@@ -105,7 +114,10 @@ $(function () {
             editor.setSize(width, height - 41);
 
             var totalHeight = $(window).height();
-            $(".form-control[readonly]").css('height', totalHeight - 40 - height - 40 + 'px');
+            $("#console").css('height', totalHeight - 40 - height - 40 + 'px');
+            $("#terminal").css('height', totalHeight - 40 - height - 40 + 'px');
+
+            terminalResize();
         }
     });
 
@@ -114,7 +126,17 @@ $(function () {
     window.addEventListener("resize", () => {
         //窗口改变
         initSize();
+        terminalResize();
     });
+
+    $("#terminal-tab").on('shown.bs.tab', function (event) {
+        if($(event.target).attr("id") == "nav-terminal-tab"){
+            if(!isSSHConnected()){
+                $("#sshInfo").modal('show');
+            }
+            terminalResize();
+        }
+    })
 })
 
 function initSize() {
@@ -137,6 +159,7 @@ function initSize() {
     editor.setSize($(".selectorLeft").parent().width() - width, height - 41);
 
     $("#console").css('height', totalHeight - 40 - height - 40 + 'px');
+    $("#terminal").css('height', totalHeight - 40 - height - 40 + 'px');
 }
 
 

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

@@ -13,12 +13,12 @@ if (window.WebSocket) {
 
 //连接成功建立的回调方法
 webConsole.onopen = function(event) {
-    console.log("WebSocket connection successful");
+    console.log("Web Console connection successful");
 }
 
 //连接关闭的回调方法
 webConsole.onclose = function() {
-    console.log("WebSocket close");
+    console.log("Web Console close");
 }
 
 //接收到消息的回调方法
@@ -29,7 +29,7 @@ webConsole.onmessage = function(event) {
 
 //连接发生错误的回调方法
 webConsole.onerror = function() {
-    console.log("WebSocket error");
+    console.log("Web Console error");
 };
 
 //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。

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

@@ -1,5 +1,5 @@
 var webSSH = null;
- var term = null;
+var term = null;
 //判断当前浏览器是否支持WebSocket, 主要此处要更换为自己的地址
 if (window.WebSocket) {
     if (window.location.protocol == 'https:') {
@@ -13,11 +13,11 @@ if (window.WebSocket) {
 }
 
 //连接成功建立的回调方法
-webSSH.onopen = function(event) {
-    console.log("WebSocket connection successful");
+webSSH.onopen = function (event) {
+    console.log("Web Terminal connection successful");
     term = new Terminal({
         cols: 180,
-        rows: 5,
+        rows: 1,
         cursorBlink: true, // 光标闪烁
         cursorStyle: "block", // 光标样式  null | 'block' | 'underline' | 'bar'
         scrollback: 800, //回滚
@@ -31,43 +31,57 @@ webSSH.onopen = function(event) {
     term.open(document.getElementById('terminal'));
     //在页面上显示连接中...
     term.write('Connecting...\r\n');
-    webSSH.send(JSON.stringify({"operate":'connect', "host": '0.0.0.0', "port": '22', "username": 'xxx', "password": 'xxx'}));
 }
 
 //连接关闭的回调方法
-webSSH.onclose = function() {
-    console.log("WebSocket close");
+webSSH.onclose = function () {
+    console.log("Web Terminal close");
     term.write("\r\nconnection closed");
 }
 
 //接收到消息的回调方法
-webSSH.onmessage = function(event) {
+webSSH.onmessage = function (event) {
     //将消息显示在网页上
     term.write(event.data);
 }
 
 //连接发生错误的回调方法
-webSSH.onerror = function(error) {
-    console.log("WebSocket error");
+webSSH.onerror = function (error) {
+    console.log("Web Terminal error");
     term.write('\r\nError: ' + error);
 };
 
 //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
-window.onbeforeunload = function() {
+window.onbeforeunload = function () {
     webSSH.close();
 }
 
-$(".selectorRight").on("resize", function (event, ui) {
-       var totalWidth = $(window).width();
-       var totalHeight = $(window).height();
-       var height = ui.element.height();
+function sendClientData(data) {
+    //发送指令
+    webSSH.send(JSON.stringify({ "operate": "command", "command": data }));
+}
+
+function connectSSH() {
+    //连接ssh,暂时没用到,目前直接在后端配置文件中配置连接信息.
+    var host = $("#sshInfo input").get(0).value;
+    var port = $("#sshInfo input").get(1).value;
+    var username = $("#sshInfo input").get(2).value;
+    var password = $("#sshInfo input").get(3).value;
+    webSSH.send(JSON.stringify({ "operate": 'connect', "host": host, "port": port, "username": username, "password": password }));
+    isConnected = true;
+}
 
-       console.log("resize:" + (totalHeight - 40 - height - 40) / 24);
-       term.resize(180,(totalHeight - 40 - height - 40) / 24);
+var isConnected = false;
+function isSSHConnected() {
+    return isConnected;
+}
 
-   });
+function terminalResize(){
+    var totalWidth = $(window).width();
+    var totalHeight = $(window).height();
+    var height = $(".selectorRight").height();
 
-function sendClientData(data) {
-    //发送指令
-    webSSH.send(JSON.stringify({"operate": "command", "command": data}));
+    term.resize(180, (totalHeight - 40 - height - 40) / 24);
+    term.fit();
+    console.log("Web Terminal resize:",term.cols, term.rows);
 }