xterm.js 组件实现WebSSH功能

已于 2023-01-05 20:48:01 修改
阅读量6k 收藏 10
点赞数
文章标签： javascript django 开发语言 ecmascript 前端
于 2020-01-17 11:53:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyshark_csdn/article/details/124939269
版权

本次实验将使用Django 3.0 配合 dwebsocket websocket组件，实现一个网页版的SSH命令行工具，其支持 vim , 支持 ping等交互命令，唯一的一个小缺点是略卡，不知道是我电脑问题还是这个socket框架不稳定呢，如果做项目建议不要手撸代码，其实已经有非常好的解决方案了 https://github.com/huashengdun/webssh

 

基本用法

<html>
<head>
  <link rel="stylesheet" href="https://www.blib.cn/cdn/xterm.css" />
  <script src="https://www.blib.cn/cdn/xterm.js"></script>
    <script src="https://www.blib.cn/cdn/jquery.js"></script>
</head>
<body>
  <div id="terminal"></div>
  <script type="text/javascript">
      var window_width = $(window).width();
      var window_height = $(window).height();
      var term = new Terminal(
            {
                cols: Math.floor(window_width/9),
                rows: Math.floor(window_height/20),
                useStyle:true,
                cursorBlink:true
            }
    );
    term.open(document.getElementById('terminal'));
    term.write('Hello lyshark \x1B[1;3;31mxterm.js\x1B[0m $ ')
  </script>
</body>
</html>

命令执行

<html>
<head>
  <link rel="stylesheet" href="https://www.blib.cn/cdn/xterm.css" />
  <script src="https://www.blib.cn/cdn/xterm.js"></script>
    <script src="https://www.blib.cn/cdn/jquery.js"></script>
</head>
<body>
<input type="button" value="执行命令" onclick="show()">
  <div id="terminal"></div>
  <script type="text/javascript">
      var window_width = $(window).width();
      var window_height = $(window).height();
      var term = new Terminal(
            {
                cols: Math.floor(window_width/9),
                rows: Math.floor(window_height/20),
                useStyle:false,
                cursorBlink:false
            }
    );
    term.open(document.getElementById('terminal'));
      function show(){
          $.ajax({
              url:"/term/",
              type:"POST",
              contentType:"application/json;",
              data: "ok",
              success:function (res) {
                  var data = JSON.parse(res);
                  console.log(data["cmd"]);
                  term.writeln(data["cmd"]);
              }
          });
      }
  </script>
</body>
</html>
from django.shortcuts import render,HttpResponse
import subprocess,json

def term(request):
    if request.method == "POST":
        data = request.body.decode("utf-8")
        if data == "ok":
            proc = subprocess.Popen("ipconfig",stdout=subprocess.PIPE,shell=True)
            cc = str(proc.stdout.readlines())
            return HttpResponse(json.dumps({"cmd":cc}))
    return render(request, "index.html")

光标问题已经解决了，找了很久的，操蛋啊。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="https://www.blib.cn/cdn/xterm.css" />
  <script src="https://www.blib.cn/cdn/xterm.js"></script>
    <script src="https://www.blib.cn/cdn/jquery.js"></script>
</head>
<body>
<input type="button" value="执行命令" onclick="show()">
  <div id="terminal"></div>
  <script type="text/javascript">
      var window_width = $(window).width();
      var window_height = $(window).height();
      var term = new Terminal(
            {
                cols: Math.floor(window_width/9),
                rows: Math.floor(window_height/20),
                useStyle:false,
                convertEol: true,
                cursorBlink:false,
                rendererType: "canvas",
                theme:{
                    foreground: 'yellow',
                    background: 'rgba(6,1,1,0.55)',
                }
            }
    );
    term.open(document.getElementById('terminal'));
      function show(){
          $.ajax({
              url:"/term/",
              type:"POST",
              contentType:"application/json;",
              data: "ok",
              success:function (res) {
                      term.writeln(res);
              }
          });
      }
  </script>
</body>
</html>
from django.shortcuts import render,HttpResponse
import paramiko

ssh = paramiko.SSHClient()
ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())

def ssh_cmd(user,passwd,port,cmd):
    ssh.connect("192.168.1.20",port=port,username=user,password=passwd)
    cmd=cmd
    stdin, stdout, stderr = ssh.exec_command(cmd)
    result = stdout.read()
    if not result:
        result=stderr.read()
    ssh.close()
    return result.decode()

def term(request):
    if request.method == "POST":
        data = request.body.decode("utf-8")
        if data == "ok":
            a = ssh_cmd("root","123","22","ifconfig")
            return HttpResponse(a)
    return render(request, "index.html")

来我们继续，加上边框，进行定制。

{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block content %}
    <link rel="stylesheet" href="https://www.blib.cn/cdn/xterm.css" />
    <link rel="stylesheet" href="https://www.blib.cn/cdn/bootstrap3.css" />
    <script src="https://www.blib.cn/cdn/xterm.js"></script>
    <script src="https://www.blib.cn/cdn/jquery.js"></script>

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">批量命令执行CMD工具</h3>
        </div>
        <div class="panel-body">
              <div id="terminal"></div>
        </div>
        <div class="panel-footer">
            <input type="button" value="执行命令" onclick="show()">
        </div>
    </div>

    <script type="text/javascript">
      var window_width = $(window).width()-200;
      var window_height = $(window).height()-200;
      var term = new Terminal(
            {
                cols: Math.floor(window_width/9),
                rows: Math.floor(window_height/20),
                useStyle:false,
                convertEol: true,
                cursorBlink:false,
                rendererType: "canvas",
            }
    );
    term.open(document.getElementById('terminal'));
      function show(){
          $.ajax({
              url:"/term/",
              type:"POST",
              contentType:"application/json;",
              data: "ok",
              success:function (res) {
                  //term.clear();
                  term.writeln(res);
              }
          });
      }
    </script>
{% endblock %}
from django.shortcuts import render,HttpResponse
import paramiko

ssh = paramiko.SSHClient()
ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())

def ssh_shell(address,username,password,port,command):
    ssh.connect(address,port=port,username=username,password=password)
    stdin, stdout, stderr = ssh.exec_command(command)
    result = stdout.read()
    if not result:
        result=stderr.read()
    ssh.close()
    return result.decode()


def term(request):
    if request.method == "POST":
        data = request.body.decode("utf-8")
        if data == "ok":
            a = ssh_shell("192.168.1.20","root","123","22","yum")
            print(a)
            return HttpResponse(a)
    return render(request, "index.html")

继续改造啊，先玩着，后期上websocket.

views.py
from django.shortcuts import render,HttpResponse
import paramiko,json,time

ssh = paramiko.SSHClient()
ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())

def ssh_shell(address,username,password,port,command):
    try:
        ssh.connect(address,port=port,username=username,password=password)
        stdin, stdout, stderr = ssh.exec_command(command)
        result = stdout.read()
        if not result:
            result=stderr.read()
        ssh.close()
        return result.decode()
    except Exception:
        ssh.close()
def term(request):
    if request.method == "POST":
        data = request.body.decode("utf-8")
        json_data = json.loads(data)
        address = json_data.get("address")
        command = json_data.get("command")
        if len(address) >=2 and len(command) >=2:
            ret = ssh_shell(address,"root","123","22",command)
            if ret !=None:
                times = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())
                times = "---> \x1B[1;3;32m 执行时间: [ {} ] \x1B[0m".format(times)
                address = "\x1B[1;3;33m 主机地址: [ {} ] \x1B[0m".format(address)
                command = "\x1B[1;3;35m 执行命令: [ {} ] \x1B[0m".format(command)
                retn = times + address + command + "\x1B[1;3;25m 回执: [ok] \x1B[0m"
                return HttpResponse(retn)
            else:
                times = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())
                times = "---> \x1B[1;3;32m 执行时间: [ {} ] \x1B[0m".format(times)
                address = "\x1B[1;3;33m 主机地址: [ {} ] \x1B[0m".format(address)
                command = "\x1B[1;3;35m 执行命令: [ {} ] \x1B[0m".format(command)
                retn = times + address + command + "\x1B[1;3;20m 回执: [Error] \x1B[0m"
                return HttpResponse(retn)
        else:
            return HttpResponse("主机地址或命令行不能为空...")
    return render(request, "index.html")
{% extends "admin/base_site.html" %}
{% load i18n static %}
{% block content %}
    <link rel="stylesheet" href="https://www.blib.cn/cdn/xterm.css" />
    <link rel="stylesheet" href="https://www.blib.cn/cdn/bootstrap3.css" />
    <script src="https://www.blib.cn/cdn/xterm.js"></script>
    <script src="https://www.blib.cn/cdn/jquery.js"></script>

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">批量命令执行CMD工具</h3>
        </div>
        <div class="panel-body">
              <div id="terminal"></div>
        </div>
        <div class="panel-footer">
            <input type="text" id="address" placeholder="主机范围" style="width:200px;height:40px"/>
            <input type="text" id="command" placeholder="执行命令" style="width:400px;height:40px"/>
            <input type="button" value="执行命令" onclick="show()">
        </div>
    </div>
    <script type="text/javascript">
      var window_width = $(window).width()-200;
      var window_height = $(window).height()-300;
      var term = new Terminal(
            {
                cols: Math.floor(window_width/9),
                rows: Math.floor(window_height/20),
                useStyle:false,
                convertEol: true,
                cursorBlink:true,
                cursorStyle:null,
                rendererType: "canvas",
            }
    );
    term.open(document.getElementById('terminal'));
      function show(){
          var address = $("#address").val();
          var command = $("#command").val();
          console.log(command);
          $.ajax({
              url:"/term/",
              type:"POST",
              contentType:"application/json;",
              data: JSON.stringify({"address":address,"command":command}),
              success:function (res) {
                  term.writeln(res);
              }
          });
      }
    </script>
{% endblock %}
from MyWeb import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('term/',views.term)
]

Dwebsocket

网上找到一个老版本的，改造了一下 可以支持 django 3.0 。

index.html

<html>
<head>
    <title>django-websocket</title>
    <script src="https://www.blib.cn/cdn/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#connect_websocket').click(function () {
                if(window.s){
                    // 如果已经连接了，就关闭，重新连接
                    window.s.close()
                }
                var s = new WebSocket("ws://" + window.location.host + "/echo/");
                s.onopen = function () {
                    console.log('WebSocket open');
                };
                s.onmessage = function (e) {
                    console.log('message: ' + e.data);
                };
                s.onclose = function (e) {
                    console.log('WebSocket close');
                };
                // 把s挂到全局
                window.s = s;
            });

            $('#send_message').click(function () {
                if(!window.s){
                    alert("Please connect server.");
                }else{
                    window.s.send($('#message').val());
                }
            });

            $('#close_websocket').click(function () {
                if(window.s){
                    window.s.close();

                }
            });

        });
    </script>
</head>

<body>
<input type="text" id="message" value="Hello, World!" />
<button type="button" id="connect_websocket">Connect websocket</button>
<button type="button" id="send_message">Send message</button>
<button type="button" id="close_websocket">Close websocket</button>
<h1>Received Messages</h1>
<div id="messagecontainer"></div>
</body>
</html>

views.py

from django.shortcuts import render,HttpResponse
from dwebsocket.decorators import accept_websocket,require_websocket

def index(request):
    return render(request,"index.html")

@accept_websocket
def echo(request):
    if not request.is_websocket():#判断是不是websocket连接
        try:#如果是普通的http方法
            message = request.GET['message']
            return HttpResponse(message)
        except:
            return render(request,'index.html')
    else:
        for message in request.websocket:
            request.websocket.send(message)#发送消息到客户端
from MyWeb import views

urlpatterns = [
    path('', views.index),
    path('echo/', views.echo),
]

页面加载后自动连接

<html>
<head>
    <script src="https://www.blib.cn/cdn/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            if(window.s){
                window.s.close()
            }else{
                var s = new WebSocket("ws://" + window.location.host + "/echo/");
            }
            s.onmessage = function (e) {
                console.log('message: ' + e.data);
            };
            // 把s挂到全局
            window.s = s;

            $('#send_message').click(function () {
                    window.s.send("hello lyshark");
            });
        });
    </script>
</head>
<body>
<button type="button" id="send_message">Send message</button>
</body>
</html>

<html>
<head>
    <link rel="stylesheet" href="https://www.blib.cn/cdn/xterm.css" />
    <link rel="stylesheet" href="https://www.blib.cn/cdn/bootstrap3.css" />
    <script src="https://www.blib.cn/cdn/xterm.js"></script>
    <script src="https://www.blib.cn/cdn/jquery.js"></script>
    <div id="terminal"></div>
    <script>
      var window_width = $(window).width();
      var window_height = $(window).height();
      var term = new Terminal(
            {
                cols: Math.floor(window_width/9),
                rows: Math.floor(window_height/20),
                useStyle:false,
                convertEol: true,
                cursorBlink:false,
                cursorStyle:null,
                rendererType: "canvas",
            }
    );
    </script>
    <script type="text/javascript">
       $(function () {
           var sock = new WebSocket("ws://" + window.location.host + "/echo/");
           // 打开 websocket 打开 web 终端
            sock.addEventListener("open",function () {
                term.open(document.getElementById('terminal'));
                term.writeln("socket init ok...");
            });
            // 读取服务器发来的数据
            sock.addEventListener("message",function (recv) {
                term.write(recv.data);
            });

            var message = {"status":null,"data":null};
            term.on("data",function(data){
                message['status'] = 0;
                message['data'] = data;
                var send_data = JSON.stringify(message);
                window.sock.send(send_data);
                console.log(send_data);
                
            });
            window.sock = sock;
        });
</script>
</head>
<body>
<button type="button" id="send_message">Send message</button>
</body>
</html>
from django.shortcuts import render,HttpResponse
from dwebsocket.decorators import accept_websocket
import paramiko

ssh = paramiko.SSHClient()
ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())

def ssh_cmd(user,passwd,port,cmd):
    ssh.connect("192.168.1.20",port=port,username=user,password=passwd)
    cmd=cmd
    stdin, stdout, stderr = ssh.exec_command(cmd)
    result = stdout.read()
    if not result:
        result=stderr.read()
    ssh.close()
    return result.decode()


def index(request):
    return render(request,"index.html")

@accept_websocket
def echo(request):
    if not request.is_websocket():#判断是不是websocket连接
        try:
            message = request.GET['message']
            a = ssh_cmd("root","123","22","ls -lh")
            print(a)
            return HttpResponse(a)
        except:
            return render(request,'index.html')
    else:
        for message in request.websocket:
            request.websocket.send(message)#发送消息到客户端

继续尝试，ssh隧道怎末开？

<html>
<head>
    <link rel="stylesheet" href="https://www.blib.cn/cdn/xterm.css" />
    <link rel="stylesheet" href="https://www.blib.cn/cdn/bootstrap3.css" />
    <script src="https://www.blib.cn/cdn/xterm.js"></script>
    <script src="https://www.blib.cn/cdn/jquery.js"></script>
    <div id="terminal"></div>
    <script>
      var window_width = $(window).width();
      var window_height = $(window).height();
      var term = new Terminal(
            {
                cols: Math.floor(window_width/9),
                rows: Math.floor(window_height/20),
                useStyle:false,
                convertEol: true,
                cursorBlink:false,
                cursorStyle:null,
                rendererType: "canvas",
            }
    );
    </script>
    <script type="text/javascript">
       $(function () {
           var sock = new WebSocket("ws://" + window.location.host + "/echo/");
           // 打开 websocket 打开 web 终端
            sock.addEventListener("open",function () {
                term.open(document.getElementById('terminal'));
                term.writeln("socket init ok...");
            });
            // 读取服务器发来的数据
            sock.addEventListener("message",function (recv) {
                term.write(recv.data);
            });

            var message ="";
            term.on("data",function(data){
                console.log(message);
                if(data == "\r")
                {
                    term.writeln(message);
                    window.sock.send(message);
                    message = "";

                }else
                {
                    message = message +data;
                    term.write(data);
                }
            });
            window.sock = sock;
        });
</script>
</head>
</html>
from django.shortcuts import render,HttpResponse
from dwebsocket.decorators import accept_websocket
import paramiko

ssh = paramiko.SSHClient()
ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())

def ssh_cmd():
    client = paramiko.SSHClient()
    client.set_missing_host_key_policy(paramiko.AutoAddPolicy())
    client.connect("192.168.1.20", username="root", password="123")
    ssh_session = client.get_transport().open_session()
    return ssh_session

@accept_websocket
def echo(request):
    sessions = ssh_cmd()
    if not request.is_websocket():
        return render(request,'index.html')
    else:
        for message in request.websocket:
            sessions.exec_command(message)
            ret = sessions.recv(2048)
            request.websocket.send(ret)

简单的隧道。

import paramiko

tran = paramiko.Transport(('192.168.1.20', 22,))
tran.start_client()
tran.auth_password('root', '123')
chan = tran.open_session()
chan.get_pty()
chan.invoke_shell()

while True:
    a = chan.recv(1024)
    print(a)
    chan.send('ls -lh\r')
<html>
<head>
    <link rel="stylesheet" href="https://www.blib.cn/cdn/xterm.css" />
    <link rel="stylesheet" href="https://www.blib.cn/cdn/bootstrap3.css" />
    <script src="https://www.blib.cn/cdn/xterm.js"></script>
    <script src="https://www.blib.cn/cdn/jquery.js"></script>
    <div id="terminal"></div>
    <script>
      var window_width = $(window).width();
      var window_height = $(window).height();
      var term = new Terminal(
            {
                cols: Math.floor(window_width/9),
                rows: Math.floor(window_height/20),
                useStyle:false,
                convertEol: true,
                cursorBlink:false,
                cursorStyle:null,
                rendererType: "canvas",
            }
    );
    </script>
    <script type="text/javascript">
       $(function () {
           var sock = new WebSocket("ws://" + window.location.host + "/echo/");
           // 打开 websocket 打开 web 终端
            sock.addEventListener("open",function () {
                term.open(document.getElementById('terminal'));
                term.writeln("socket init ok...");
            });
            // 读取服务器发来的数据
            sock.addEventListener("message",function (recv) {
                term.write(recv.data);
            });

            term.on("data",function(data){
                    term.write(data);
                    window.sock.send(data);
            });
            window.sock = sock;
        });
</script>
</head>
</html>
from django.shortcuts import render,HttpResponse
from dwebsocket.decorators import accept_websocket
import paramiko

ssh = paramiko.SSHClient()
ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())

def ssh_cmd():
    tran = paramiko.Transport(('192.168.1.20', 22,))
    tran.start_client()
    tran.auth_password('root', '123')
    chan = tran.open_session()
    chan.get_pty()
    chan.invoke_shell()
    return chan

@accept_websocket
def echo(request):
    sessions = ssh_cmd()
    if not request.is_websocket():
        return render(request,'index.html')
    else:
        for message in request.websocket:
            while True:
                ret = sessions.recv(2048)
                request.websocket.send(ret)

完成了 webssh 代码还不太稳定，完善后放出来。

代码，其实比想象中的简单得多，我尝试了很久。

<html>
<head>
    <link rel="stylesheet" href="https://www.blib.cn/cdn/xterm.css" />
    <link rel="stylesheet" href="https://www.blib.cn/cdn/bootstrap3.css" />
    <script src="https://www.blib.cn/cdn/xterm.js"></script>
    <script src="https://www.blib.cn/cdn/jquery.js"></script>
    <div id="terminal"></div>
    <script>
      var window_width = $(window).width();
      var window_height = $(window).height();
      var term = new Terminal(
            {
                cols: Math.floor(window_width/9),
                rows: Math.floor(window_height/20),
                useStyle:false,
                convertEol: true,
                cursorBlink:true,
                cursorStyle:null,
            });
        console.log("高度" + window_height + "宽度" + window_width);
        var sock = new WebSocket("ws://" + window.location.host + "/echo/");
        sock.addEventListener("open",function () {
            term.open(document.getElementById('terminal'));
        });
        sock.addEventListener("message",function (recv) {
            term.write(recv.data);
        });
        term.on("data",function(data){
            sock.send(data);
        });
        window.sock = sock;
</script>
</head>
</html>
from django.shortcuts import render,HttpResponse
from dwebsocket.decorators import accept_websocket
import paramiko

def ssh_cmd():
    tran = paramiko.Transport(('192.168.1.20', 22,))
    tran.start_client()
    tran.auth_password('root', '123')
    chan = tran.open_session()
    chan.get_pty(height=492,width=1312)
    chan.invoke_shell()
    return chan
sessions = ssh_cmd()

@accept_websocket
def echo(request):
    if not request.is_websocket():
        return render(request,'index.html')
    else:
        try:
            for message in request.websocket:
                ret = sessions.recv(10240)
                request.websocket.send(ret)
                sessions.send(message)
        except Exception:
            print("error")

最后加一个在线编辑器代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://www.blib.cn/cdn/codemirror/codemirror.css"/>
    <script src="https://www.blib.cn/cdn/codemirror/codemirror.js"></script>
</head>
<body>
<textarea class="form-control" id="code" name="code"></textarea>
    <script type="text/javascript" charset="utf-8">
        var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
            mode: "groovy",       // 设置高亮类型
            theme: "neat",        // 设置主题
            lineNumbers: true,	  // 显示行号
            foldGutter: true,
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
    });
        editor.setSize('500px', '400px');    // 设置框架大小
        editor.setValue("hello lyshark");    // 给代码框赋值
        editor.getValue();                   // 获取代码框的值
    </script>
</body>
</html>

dwebsocket 最终代码: 通过使用dwebsocket插件实现一个简单的WebSSH命令行工具.

<!--name: index.html-->
<html>
<head>
    <link rel="stylesheet" href="https://www.blib.cn/cdn/xterm.css" />
    <link rel="stylesheet" href="https://www.blib.cn/cdn/bootstrap3.css" />
    <script src="https://www.blib.cn/cdn/xterm.js"></script>
    <script src="https://www.blib.cn/cdn/jquery.js"></script>
    <div id="terminal"></div>
    <script>
      var window_width = $(window).width();
      var window_height = $(window).height();
      var term = new Terminal(
            {
                cols: Math.floor(window_width/9),
                rows: Math.floor(window_height/20),
                useStyle:false,
                convertEol: true,
                cursorBlink:true,
                cursorStyle:null,
            });
        console.log("高度" + window_height + "宽度" + window_width);
        var sock = new WebSocket("ws://" + window.location.host + "/echo/");
        sock.addEventListener("open",function () {
            term.open(document.getElementById('terminal'));
        });
        sock.addEventListener("message",function (recv) {
            term.write(recv.data);
        });
        term.on("data",function(data){
            sock.send(data);
        });
        window.sock = sock;
</script>
</head>
</html>
# name: views.py
from django.shortcuts import render,HttpResponse
from dwebsocket.decorators import accept_websocket
import paramiko

def ssh_cmd():
    tran = paramiko.Transport(('192.168.1.20', 22,))
    tran.start_client()
    tran.auth_password('root', '123')
    chan = tran.open_session()
    chan.get_pty(height=492,width=1312)
    chan.invoke_shell()
    return chan
sessions = ssh_cmd()

@accept_websocket
def echo(request):
    if not request.is_websocket():
        return render(request,'index.html')
    else:
        try:
            for message in request.websocket:
                ret = sessions.recv(4096)
                request.websocket.send(ret)
                sessions.send(message)
        except Exception:
            print("error")
from MyWeb import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('echo/',views.echo)
]

批量CMD执行工具: 利用DjangoAdmin与Socket通信实现的主机批量执行并回显.

<!--name:index.html-->
{% extends "admin/base_site.html" %}
{% load i18n static %}
{% block content %}
    <link rel="stylesheet" href="https://www.blib.cn/cdn/xterm.css" />
    <link rel="stylesheet" href="https://www.blib.cn/cdn/bootstrap3.css" />
    <script src="https://www.blib.cn/cdn/xterm.js"></script>
    <script src="https://www.blib.cn/cdn/jquery.js"></script>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">批量命令执行CMD工具</h3>
        </div>
        <div class="panel-body">
              <div id="terminal"></div>
        </div>
        <div class="panel-footer">
            <input type="text" id="address" placeholder="主机范围 127.0.0.1-100" style="width:200px;height:40px"/>
            <input type="text" id="command" placeholder="执行命令 ls -lh " style="width:400px;height:40px"/>
            <input type="button" id="send_message" value="批量执行">
        </div>
    </div>
    <script type="text/javascript">
        $(function(){
            var window_width = $(window).width()-200;
            var window_height = $(window).height()-300;
            var term = new Terminal(
            {
                cols: Math.floor(window_width/9),
                rows: Math.floor(window_height/20),
                convertEol: true,
                cursorBlink:false,
            });
            var sock = new WebSocket("ws://" + window.location.host + "/echo/");
            sock.onopen = function () {
                term.open(document.getElementById('terminal'));
                console.log('WebSocket Open');
            };
            sock.onmessage = function (recv) {
                if(recv.data.substring(0,7) == "[Suces]"){
                    term.writeln("\x1B[1;3;32m " + recv.data + "\x1B[0m");
                }else{
                    term.writeln("\x1B[1;3;31m " + recv.data + "\x1B[0m");
                }

            };
            $('#send_message').click(function () {
                var message ={"address":null,"command":null};
                message['address'] = $("#address").val();
                message['command'] = $("#command").val();
                var send_data = JSON.stringify(message);
                window.sock.send(send_data);
            });
            window.sock = sock;
        });
    </script>
{% endblock %}
# name:views.py
from django.shortcuts import render
from dwebsocket.decorators import accept_websocket
import paramiko,time

ssh = paramiko.SSHClient()
ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())

def ssh_shell(address,username,password,port,command):
    try:
        ssh.connect(address,port=port,username=username,password=password,timeout=1)
        stdin, stdout, stderr = ssh.exec_command(command)
        result = stdout.read()
        if not result:
            result=stderr.read()
        ssh.close()
        return result.decode()
    except Exception:
        return 0

def CalculationIP(Addr_Count):
    ret = []
    try:
        IP_Start = str(Addr_Count.split("-")[0]).split(".")
        IP_Heads = str(IP_Start[0] + "." + IP_Start[1] + "." + IP_Start[2] +".")
        IP_Start_Range = int(Addr_Count.split(".")[3].split("-")[0])
        IP_End_Range = int(Addr_Count.split("-")[1])
        for item in range(IP_Start_Range,IP_End_Range+1):
            ret.append(IP_Heads+str(item))
        return ret
    except Exception:
        return 0

@accept_websocket
def echo(request):
    if not request.is_websocket():
        return render(request, "index.html")
    else:
        for message in request.websocket:
            data = eval(message)
            Addr_list = CalculationIP(data['address'])
            command = data['command']
            for ip in Addr_list:
                ret = ssh_shell(ip,"root","123","22",command)
                if ret != 0:
                    times = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())
                    retn = "[Suces] ---> " + str(times) + "      " +  command + "      " + ip
                    request.websocket.send(retn)
                else:
                    times = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())
                    retn = "[Error] ---> " + str(times) + "      " +  command + "      " + ip
                    request.websocket.send(retn)
# name:urls.py
from MyWeb import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path("echo/",views.echo)
]
微软技术分享
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
springboot + xterm.js + vue + websocket实现终端功能
12-08
1、前端框架：Vue + element-ui 2、后端框架：SpringBoot + Mybatis 3、数据库：H2 4、其他第三方工具或者插件： Jsch：用于远程连接ECS服务器。 Websocket：与前端进行实时交互。 xterm：渲染web版本的terminal终端显示器。 可参考博客地址： https://blog.csdn.net/qq_29777207/article/details/108763630 售后群：491590248
webssh2:使用ssh2，socket.io，xterm.js和express的Web SSH客户端。 webssh webssh2
05-02
WebSSH2 使用ssh2，socket.io，xterm.js和express的Web SSH客户端 基于HTML5的基于Web的终端仿真器和SSH客户端的基本示例。 我们使用SSH2作为主机上的客户端，以将Websocket / Socket.io连接代理到SSH2服务器。 要求 节点v6.x或更高版本。 如果使用<v6.x，您应该可以通过将“ read-config”包替换为@ 1来运行（如下所示）（在克隆之后）： npm install --save read-config@1 请记住，无意确保与Node <v6.x的兼容性 指示 安装： 克隆到某个位置，然后cd app和npm install --production 。 如果要开发和重建javascript和其他文件， npm install改用npm install 。 如果需要，请编辑app / config.
探秘xterm.js：一款强大的Web终端构建工具
gitblog_00014的博客
03-19 471
探秘xterm.js：一款强大的Web终端构建工具 项目地址:https://gitcode.com/sourcelair/xterm.js xterm.js 是一个开源项目，由SourceLair团队创建，旨在为现代Web应用提供功能齐全、高性能的终端模拟器。它允许开发者在网页上构建与本地终端类似的体验，让用户可以在浏览器中直接执行命令行操作。 技术分析 xterm.js是用TypeScript...
jsterm:使用Node.js和xterm.js制作的终端模拟器
05-26
jsterm jsterm是由Node.js和xterm.js组成的终端模拟器。 要求 文献资料 入门 使用npm安装jsterm： $ npm install jsterm 您现在可以像这样使用jsterm： let Terminal = require ( 'jsterm' ) let term = new Terminal ( 1337 ) // localhost:1337 - Default shell term . add ( 'cmd.exe' ) // localhost:1337/cmd.exe term . add ( 'bash.exe' ) // localhost:1337/bash.exe term . add ( 'node.exe' ) // localhost:1337/node.exe term . listen ( ) console .
xterm.js 使用及问题【新】
潇蓝诺依的博客
11-29 7421
xterm.js 使用及问题【新】 版本 xterm：4.15.0 xterm-addon-fit：0.5.0 问题 如果初始化的时候就使用fit，那么屏幕缩小小于初始的宽度。 issues3564 在初始化的时候不能使用fit mounted() { this.term = this.initTerm() this.onTerminalResize() this.onTerminalKeyPress() }, methods:{ initTerm() {
xterm.js V4.13.0 学习文档（for vue）
weixin_42136785的博客
09-03 8247
安装Install npminstall--savexterm 使用Using import'xterm/css/xterm.css' import{Terminal}from'xterm' constterm=newTerminal() term.open(document.getElementById('xterm-container')) 配置项Options /** *当canvas渲染器运行过慢时，会回退为DOM渲...
爱上开源之DockerUI-xterm.js实现Web控制台
08-14 2791
在DockerUI里也使用了xterm.js这个项目来实现了WEB方式的模拟控制台终端。
前端终端组件Xterm.js使用方法
duansamve的博客
05-13 1万+
xterm 是一个使用 TypeScript 编写的前端终端组件，可以直接在浏览器中实现一个命令行终端应用。 主要特性： 终端应用程序正常工作：Xterm.js适用于大多数终端应用程序，如bash，vim和tmux，这包括对基于curses的应用程序和鼠标事件支持的支持 Performant：Xterm.js 非常快，它甚至还包括一个GPU加速的渲染器。 丰富的 unicode 支持：支持CJK，表情符号和IME。 自包含：零依赖性。 可访问：可以使用screenReaderMode选项打开屏
Gin+Xterm.js实现远程Kubernetes Pod（一）
qq_42004882的博客
07-18 1066
Gin+Xterm.js实现远程Kubernetes Pod、实现Web终端窗口自适应
xterm.js + vue + websocket实现终端功能（xterm 3.x+xterm 4.x）
热门推荐
一枚不断学习的小码农一枚~
01-09 4万+
值得注意的是，在我们使用xterm实现仿终端功能时，不需要对输入字符进行判断，也不需要在输入事件中把输入的字符打出来。因为在输入事件中执行的web socket连接中，每输入一个字符都会自动传到后端，而后端会根据你输入的回车符来判断是否要为你换行及返回何种数据。所以我们只需要向后台传递参数就好。
Node.js-WebSSH2基于Web的SSH2客户端使用xterm.jssocket.io和ssh2实现
08-10
WebSSH2基于Web的SSH2客户端，使用xterm.js，socket.io和ssh2实现
xterm.js：Web的终端
02-06
Xterm.js是用TypeScript编写的前端组件，它使应用程序可以将功能齐全的终端带给浏览器中的用户。 诸如VS Code，Hyper和Theia等热门项目都使用了它。 产品特点 终端应用程序可以正常工作：Xterm.js可与大多数终端应用...
使用ssh2，socket.io，xterm.js和express的Web SSH客户端。 webssh webssh2-Node.js开发
05-27
[GitHub版本]（https://badge.fury.io/gh/billchurch/webssh2.svg)](https://badge.fury.io/gh/billchurch/webssh2）使用ssh2的Web SSH客户端， socket.io，xterm.js，并表达HTML5 web-ba WebSSH2的基本示例[！...
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 853
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
element-ui的bug记录
nick_zhang的博客
04-29 524
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
bpmn-js推荐几款常用的插件
飞云先生
04-30 105
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 928
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 841
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
用 xterm.js 实现一个 web-terminal
06-09
好的，我了解您的问题。使用 xterm.js 可以轻松实现一个 web-terminal。下面是一些实现步骤： 1. 首先，在 HTML 文件中添加一个 div 容器，用于显示 terminal： ``` <div id="terminal"></div> ``` 2. 在 JavaScript 文件中，引入 xterm.js 库并创建一个 Terminal 实例： ``` import { Terminal } from 'xterm'; import { FitAddon } from 'xterm-addon-fit'; const terminal = new Terminal(); const fitAddon = new FitAddon(); terminal.loadAddon(fitAddon); terminal.open(document.getElementById('terminal')); fitAddon.fit(); ``` 3. 可以通过 WebSocket 或其他方式，将终端的输入输出流与服务器进行连接： ``` const socket = new WebSocket('ws://localhost:8080/terminal'); socket.addEventListener('open', () => { terminal.onData(data => { socket.send(data); }); socket.addEventListener('message', event => { terminal.write(event.data); }); }); ``` 这里假设服务器地址为 `ws://localhost:8080/terminal`，可以根据实际情况进行更改。 4. 最后，可以通过 CSS 样式来美化终端： ``` #terminal { background-color: black; color: white; font-family: monospace; font-size: 14px; } ``` 以上就是使用 xterm.js 实现一个 web-terminal 的基本步骤。希望对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值