手动修改窗口大小问题

run_server.py

@@ -362,6 +362,7 @@ class WebTerminalHandler(tornado.websocket.WebSocketHandler):
             return
 
         if 'resize' in jsondata.get('data'):
+            self.termlog.write(jsondata)
             self.channel.resize_pty(
                 jsondata.get('data').get('resize').get('cols', 80),
                 jsondata.get('data').get('resize').get('rows', 24)

static/js/record.js

@@ -56,7 +56,12 @@ NgApp.controller('TerminalRecordCtrl', function ($scope, $http) {
             document.getElementById("beforeScrubberText").innerHTML = buildTimeString(time);
             for (; pos < timelist.length; pos++) {
                 if (timelist[pos] * 1000 <= time) {
-                    term.write(data[timelist[pos]]);
+                    try{
+                        var findResize = JSON.parse(data[timelist[pos]])['reszie'];
+                        term.resize(findResize['cols'], findResize['rows'])
+                    } catch (err) {
+                        term.write(data[timelist[pos]]);
+                    }
                 } else {
                     break;
                 }

static/js/webterminal.js

@@ -36,7 +36,7 @@ WSSHClient.prototype.connect = function (options) {
     };
 
     this._connection.onmessage = function (evt) {
-        try{
+        try {
             options.onData(evt.data);
         } catch (e) {
             var data = JSON.parse(evt.data.toString());
@@ -55,6 +55,15 @@ WSSHClient.prototype.send = function (data) {
 
 function openTerminal(options) {
     var client = new WSSHClient();
+    var rowHeight, colWidth;
+    try {
+        rowHeight = localStorage.getItem('term-row');
+        colWidth = localStorage.getItem('term-col');
+    } catch (err) {
+        rowHeight = 24;
+        colWidth = 80
+    }
+
     var term = new Terminal({
         rows: rowHeight,
         cols: colWidth,
@@ -66,7 +75,7 @@ function openTerminal(options) {
         client.send(data)
     });
     $('.terminal').detach().appendTo('#term');
-    term.resize(80, 24);
+    //term.resize(colWidth, rowHeight);
     term.write('Connecting...');
     client.connect($.extend(options, {
         onError: function (error) {
@@ -74,6 +83,7 @@ function openTerminal(options) {
         },
         onConnect: function () {
             // Erase our connecting message
+            client.send({'resize': {'rows': rowHeight, 'cols': colWidth}});
             term.write('\r');
         },
         onClose: function () {
@@ -83,20 +93,20 @@ function openTerminal(options) {
             term.write(data);
         }
     }));
-    rowHeight = 0.0 + 1.00 * $('.terminal').height() / 24;
-    colWidth = 0.0 + 1.00 * $('.terminal').width() / 80;
+    //rowHeight = 0.0 + 1.00 * $('.terminal').height() / 24;
+    //colWidth = 0.0 + 1.00 * $('.terminal').width() / 80;
     return {'term': term, 'client': client};
 }
 
-function resize() {
-    $('.terminal').css('width', window.innerWidth - 25);
-    console.log(window.innerWidth);
-    console.log(window.innerWidth - 10);
-    var rows = Math.floor(window.innerHeight / rowHeight) - 2;
-    var cols = Math.floor(window.innerWidth / colWidth) - 1;
-
-    return {rows: rows, cols: cols};
-}
+//function resize() {
+//    $('.terminal').css('width', window.innerWidth - 25);
+//    console.log(window.innerWidth);
+//    console.log(window.innerWidth - 10);
+//    var rows = Math.floor(window.innerHeight / rowHeight) - 2;
+//    var cols = Math.floor(window.innerWidth / colWidth) - 1;
+//
+//    return {rows: rows, cols: cols};
+//}
 
 $(document).ready(function () {
     var options = {};
@@ -112,5 +122,21 @@ $(document).ready(function () {
     //    term_client.client.send({'resize': {'rows': geom.rows, 'cols': geom.cols}});
     //    $('#ssh').show();
     //}
+    try {
+        $('#term-row')[0].value = localStorage.getItem('term-row');
+        $('#term-col')[0].value = localStorage.getItem('term-col');
+    } catch (err) {
+        $('#term-row')[0].value = 24;
+        $('#term-col')[0].value = 80;
+    }
+    $('#col-row').click(function () {
+        var col = $('#term-col').val();
+        var row = $('#term-row').val();
+        localStorage.setItem('term-col', col);
+        localStorage.setItem('term-row', row);
+        term_client.term.resize(col, row);
+        term_client.client.send({'resize': {'rows': row, 'cols': col}});
+        $('#ssh').show();
+    })
 
 });

templates/jlog/log_online.html

@@ -173,8 +173,14 @@
                 $('.terminal').detach().appendTo('#term');
                 $('.terminal').show();
                 socket.onmessage = function(evt){
-                    term.write(evt.data);
-            }}, 1000);
+                    try {
+                        var findResize = JSON.parse(evt.data)['resize'];
+                        term.resize(findResize['cols'], findResize['rows'])
+                    } catch (err) {
+                        term.write(evt.data);
+                    }
+                }
+            }, 1000);
 
             return tag[0];
         } ,

templates/jlog/web_terminal.html

@@ -1,43 +1,57 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8">
-        <title>Jumpserver Web Terminal: {{ hostname }}</title>
+<head>
+    <meta charset="utf-8">
+    <title>Jumpserver Web Terminal: {{ hostname }}</title>
 
-        <style>
-            body {
-                padding-bottom: 40px;
-            }
+    <style>
+        body {
+            padding-bottom: 40px;
+        }
 
-            .terminal {
-                border: #000 solid 5px;
-                font-family: "Monaco", "Microsoft Yahei", "DejaVu Sans Mono", "Liberation Mono", monospace;
-                font-size: 11px;
-                color: #f0f0f0;
-                background: #000;
-                width: 600px;
-                box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 20px;
-                white-space: nowrap;
-                display: inline-block;
-            }
+        .terminal {
+            border: #000 solid 5px;
+            font-family: "Monaco", "Microsoft Yahei", "DejaVu Sans Mono", "Liberation Mono", monospace;
+            font-size: 11px;
+            color: #f0f0f0;
+            background: #000;
+            box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 20px;
+            white-space: nowrap;
+            display: inline-block;
+        }
 
-            .reverse-video {
-                color: #000;
-                background: #f0f0f0;
-            }
-        </style>
-    </head>
+        .reverse-video {
+            color: #000;
+            background: #f0f0f0;
+        }
 
-    <body>
-        <div class="container">
-            <div id="term">
-            </div>
-        </div>
+        .clock {
+            line-height: 1;
+            margin: 0 auto;
+            border: 1px solid #ffffff;
+            color: #fff;
+            background-color: #ffffff;
+            position: fixed;
+            right: 0;
+            top: 0;
+        }
+    </style>
+</head>
 
-        <script type="application/javascript" src="/static/js/jquery-2.1.1.js">
-        </script>
-        <script type="application/javascript" src="/static/js/term.js">
-        </script>
-    <script type="application/javascript" src="/static/js/webterminal.js"></script>
-    </body>
+<body>
+<div class="container">
+    <div id="term">
+    </div>
+</div>
+<div class="clock">
+    <input type="number" min="80" placeholder="col" id="term-col"/>
+    <input type="number" min="24" placeholder="row" id="term-row"/>
+    <button id="col-row">修改窗口大小</button>
+</div>
+<script type="application/javascript" src="/static/js/jquery-2.1.1.js">
+</script>
+<script type="application/javascript" src="/static/js/term.js">
+</script>
+<script type="application/javascript" src="/static/js/webterminal.js"></script>
+</body>
 </html>