html前台实时输出linux指令,websocket+Django+python+paramiko实现web页面执行命令并实时输出...

websocket+Django+python+paramiko实现web页面执行命令并实时输出

发布时间:2020-02-20 13:08:23编辑:admin阅读(1202)

一、概述

WebSocket

WebSocket的工作流程:浏览器通过JavaScript向服务端发出建立WebSocket连接的请求,在WebSocket连接建立成功后,客户端和服务端就可以通过 TCP连接传输数据。因为WebSocket连接本质上是TCP连接,不需要每次传输都带上重复的头部数据,所以它的数据传输量比轮询和Comet技术小很多。

paramiko

paramiko模块,基于SSH用于连接远程服务器并执行相关操作。

shell脚本

/opt/test.sh#!/bin/bash

for i in {1..10}

do

sleep 0.5

echo 母鸡生了$i个鸡蛋;

done

网页执行脚本,效果如下:

2471e5a9e28609ce6cd207a5bc4e7c32.gif

怎么样,是不是很nb!下面会详细介绍如何具体实现!

二、详细操作

django版本

最新版本 2.1.5有问题,使用websocket,谷歌浏览器会报错WebSocket connection to 'ws://127.0.01:8000/echo_once/' failed: Error during WebSocket handshake: Unexpected response code: 400

所以不能使用最新版本,必须使用 2.1.4以及2.x系列都可以!

安装模块pip3 install paramiko dwebsocket django==2.1.4

创建项目

使用Pycharm创建一个项目 wdpy ,这个是测试的,名字无所谓!

bd6d3f24e80b686323e003ddd238eb0c.png

添加路由,修改文件 urls.pyfrom django.contrib import admin

from django.urls import path

from websocket import views

urlpatterns = [

path('admin/', admin.site.urls),

path('echo_once/', views.echo_once),

]

修改views.py,增加视图函数from django.shortcuts import render

from dwebsocket.decorators import accept_websocket, require_websocket

from django.http import HttpResponse

import paramiko

# def exec_command(comm):

#     hostname = '192.168.0.162'

#     username = 'root'

#     password = 'root'

#

#     ssh = paramiko.SSHClient()

#     ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())

#     ssh.connect(hostname=hostname, username=username, password=password)

#     stdin, stdout, stderr = ssh.exec_command(comm,get_pty=True)

#     result = stdout.read()

#     ssh.close()

#     yield result

@accept_websocket

def echo_once(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:

message = message.decode('utf-8')  # 接收前端发来的数据

print(message)

if message == 'backup_all':#这里根据web页面获取的值进行对应的操作

command = 'bash /opt/test.sh'#这里是要执行的命令或者脚本

# 远程连接服务器

hostname = '192.168.0.162'

username = 'root'

password = 'root'

ssh = paramiko.SSHClient()

ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())

ssh.connect(hostname=hostname, username=username, password=password)

# 务必要加上get_pty=True,否则执行命令会没有权限

stdin, stdout, stderr = ssh.exec_command(command, get_pty=True)

# result = stdout.read()

# 循环发送消息给前端页面

while True:

nextline = stdout.readline().strip()  # 读取脚本输出内容

# print(nextline.strip())

request.websocket.send(nextline) # 发送消息到客户端

# 判断消息为空时,退出循环

if not nextline:

break

ssh.close()  # 关闭ssh连接

else:

request.websocket.send('小样儿,没权限!!!'.encode('utf-8'))

在 templates 目录下新建文件 index.htmlhtml >

CMDB系统

$(function () {

$('#backup_all').click(function () {

var socket = new WebSocket("ws://" + window.location.host + "/echo_once/");

console.log(socket);

socket.onopen = function () {

console.log('WebSocket open');//成功连接上Websocket

socket.send($('#backup_all').val());//发送数据到服务端

};

socket.onmessage = function (e) {

console.log('message: ' + e.data);//打印服务端返回的数据

//$('#messagecontainer').prepend('

' + e.data + '
');

//$('#messagecontainer').prepend('


');

$('#messagecontainer').append(e.data+'
');

{#$('#messagecontainer').prepend('


');#}

};

});

});

{#
#}

执行Shell脚本

脚本执行结果:


和manage.py 同级目录,新建目录static,在里面放jquery-1.12.4.js 文件

从百度搜索下载即可!

修改 settings.py ,设置satic路径STATIC_URL = '/static/'

STATICFILES_DIRS = (

os.path.join(BASE_DIR,"static"),

)

requirements.txt  这个是项目依赖文件,内容如下:Django==2.1.4

dwebsocket==0.5.10

paramiko==2.4.2

此时,目录结果如下:./

├── db.sqlite3

├── manage.py

├── requirements.txt

├── static

│   └── jquery-1.12.4.js

├── templates

│   └── index.html

├── untitled2

│   ├── __init__.py

│   ├── settings.py

│   ├── urls.py

│   └── wsgi.py

└── websocket

├── admin.py

├── apps.py

├── __init__.py

├── migrations

│   └── __init__.py

├── models.py

├── tests.py

└── views.py

启动linux服务器

这里使用的是linux服务器,系统是 ubuntu-16.04.4-server-amd64

脚本 /opt/test.sh 就是上面的内容,已经设置了755权限

启动项目

使用Pycharm启动,访问网页:http://127.0.0.1:8000/echo_once/

效果就是上面演示的!

测试命令

除了执行脚本,还可以执行其他命令,比如安装ntpdate

修改views.py,将 command 修改一下command = 'apt-get install -y ntpdate'#这里是要执行的命令或者脚本

再次执行,效果如下:

eb856c4c3a607d38f646e4f8d480e421.gif

完整项目

如需完整项目代码,请访问:

注意:这篇文章的效果并不是实时输出,它是命令执行完成之后,才显示在网页上面的!

那么因此,我在他的代码基础上,做了一些改进!才实现 实时输出的效果!

关键字:

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Vue 中使用 xterm.js 和 WebSocket 实现终端,你需要将用户输入的命令发送给后端,然后将后端返回的结果输出到 xterm.js 终端中。以下是一个简单的示例: ```html <template> <div id="terminal"></div> </template> <script> import { Terminal } from 'xterm'; import { FitAddon } from 'xterm-addon-fit'; export default { data() { return { socket: null, // WebSocket 实例 term: null, // Terminal 实例 }; }, mounted() { // 创建 WebSocket 实例 this.socket = new WebSocket('ws://localhost:8080'); // 创建 Terminal 实例 this.term = new Terminal(); const fitAddon = new FitAddon(); this.term.loadAddon(fitAddon); this.term.open(document.getElementById('terminal')); // 处理 WebSocket 消息 this.socket.onmessage = (event) => { this.term.write(event.data); }; // 处理输入事件 this.term.onData(data => { this.socket.send(data); }); // 调整终端大小 this.term.onResize(size => { const cols = size.cols; const rows = size.rows; this.socket.send(JSON.stringify({ type: 'resize', cols, rows })); }); // 发送 resize 消息 const cols = this.term.cols; const rows = this.term.rows; this.socket.send(JSON.stringify({ type: 'resize', cols, rows })); }, beforeDestroy() { // 关闭 WebSocket 连接 this.socket.close(); } } </script> ``` 以上代码中,我们首先在 `mounted` 钩子函数中创建了一个 WebSocket 实例和一个 Terminal 实例。然后我们为 WebSocket 实例添加了一个 `onmessage` 事件监听器,该监听器会在接收到服务器返回的消息时触发,我们在该事件处理函数中将消息输出到终端中。 接着,我们为 Terminal 实例添加了一个 `onData` 事件监听器,该监听器会在用户输入时触发,我们在该事件处理函数中向服务器发送用户输入的命令。同时,我们还为 Terminal 实例添加了一个 `onResize` 事件监听器,该监听器会在终端大小调整时触发,我们在该事件处理函数中向服务器发送终端大小变化的消息。 最后,我们在 `beforeDestroy` 钩子函数中关闭了 WebSocket 连接。 需要注意的是,以上代码中的 WebSocket 连接是通过 `ws://localhost:8080` 连接本地服务器的,你需要根据实际情况修改 WebSocket 连接地址。另外,代码中的消息格式和处理逻辑也需要根据实际情况进行修改。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值