Flask WebSocket 实时输出 Ping 命令结果 - Web Ping - 常规

需要使用 Flask-SocketIO 库来实现 WebSocket 连接。首先需要安装 Flask-SocketIO 库：\n\n\npip install flask-socketio\n\n\n然后修改代码如下：\n\npython\nimport subprocess\nfrom flask import Flask, render_template, request, jsonify, make_response\nfrom flask_socketio import SocketIO, emit\n\napp = Flask(__name__, template_folder='C:\\Users\\zh\\PycharmProjects\\webping\\')\nsocketio = SocketIO(app)\nprocess = None\n\n@app.route('/')\ndef index():\n return render_template('index.html')\n\n@app.route('/execute', methods=['POST'])\ndef execute():\n global process\n if request.form['action'] == 'start':\n if process is not None and process.poll() is None:\n # 如果进程正在运行，则不执行新的命令\n return jsonify({'output': '进程正在运行，请先停止'})\n process = subprocess.Popen(['ping', '1.1.1.1', '-t'], stdout=subprocess.PIPE, stderr=subprocess.PIPE)\n while True:\n output = process.stdout.readline()\n if output == b'' and process.poll() is not None:\n break\n if output:\n output_text = output.decode('gbk').strip()\n emit('ping_output', {'output': output_text})\n return jsonify({'output': '命令已执行'})\n elif request.form['action'] == 'stop':\n if process is not None and process.poll() is None:\n # 如果进程正在运行，则停止进程\n process.terminate()\n process.wait()\n process = None\n return jsonify({'output': '进程已停止'})\n else:\n return make_response(jsonify({'error': '无效的动作'}), 400)\n\nif __name__ == '__main__':\n socketio.run(app, debug=True)\n\n\n然后在index.html模板文件中添加 WebSocket 的代码：\n\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n <title>Web Ping</title>\n <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js"></script>\n</head>\n<body>\n <h1>Web Ping</h1>\n <button id="start-btn">Start</button>\n <button id="stop-btn">Stop</button>\n <div id="output"></div>\n\n <script>\n var socket = io();\n var outputDiv = document.getElementById('output');\n\n socket.on('ping_output', function(data) {\n outputDiv.innerHTML += data.output + '<br>';\n });\n\n document.getElementById('start-btn').addEventListener('click', function() {\n socket.emit('execute', { action: 'start' });\n });\n\n document.getElementById('stop-btn').addEventListener('click', function() {\n socket.emit('execute', { action: 'stop' });\n });\n </script>\n</body>\n</html>\n\n\n这样就实现了通过 WebSocket 连接将 ping 命令的每一行结果实时输出到前端网页上显示。