实现 Python 服务在执行完毕后主动向前端发送信息,以便前端(例如 Vue.js 应用)可以更新显示

可以通过多种方法实现 Python 服务在执行完毕后主动向前端发送信息,以便前端(例如 Vue.js 应用)可以更新显示。下面介绍几种常见的方法:

1. 使用 WebSockets

WebSockets 是一种在客户端和服务器之间建立持久连接的通信协议,适用于实时更新。可以使用 websockets 库在 Python 中实现 WebSocket 服务器。

Python 服务器代码示例:
python 复制代码
import asyncio
import websockets

async def handler(websocket, path):
    while True:
        # 等待客户端请求
        message = await websocket.recv()
        print(f"Received message: {message}")

        # 执行某些操作...
        
        # 发送更新通知给前端
        await websocket.send("Update completed")

start_server = websockets.serve(handler, "localhost", 6789)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()
Vue.js 前端代码示例:
javascript 复制代码
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Waiting for update...'
    };
  },
  created() {
    this.connectWebSocket();
  },
  methods: {
    connectWebSocket() {
      const socket = new WebSocket('ws://localhost:6789');
      socket.onmessage = (event) => {
        this.message = event.data;
      };
    }
  }
};
</script>

2. 使用 HTTP Polling

HTTP Polling 是一种客户端定期向服务器发送请求以检查是否有新数据的技术。虽然不如 WebSockets 实时,但实现简单且兼容性好。

Python 服务器代码示例:
python 复制代码
from flask import Flask, jsonify
import time

app = Flask(__name__)

@app.route('/check_update', methods=['GET'])
def check_update():
    # 模拟一些处理
    time.sleep(5)
    return jsonify({'status': 'Update completed'})

if __name__ == '__main__':
    app.run(debug=True)
Vue.js 前端代码示例:
javascript 复制代码
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Waiting for update...'
    };
  },
  created() {
    this.checkForUpdate();
  },
  methods: {
    checkForUpdate() {
      setInterval(() => {
        fetch('/check_update')
          .then(response => response.json())
          .then(data => {
            this.message = data.status;
          });
      }, 5000); // 每5秒检查一次
    }
  }
};
</script>

3. 使用 Server-Sent Events (SSE)

SSE 允许服务器主动推送消息到客户端。它基于 HTTP 协议,适用于需要频繁更新但不需要双向通信的场景。

Python 服务器代码示例:
python 复制代码
from flask import Flask, Response
import time

app = Flask(__name__)

@app.route('/stream')
def stream():
    def event_stream():
        while True:
            time.sleep(1)
            yield f'data: Update completed\n\n'
    return Response(event_stream(), content_type='text/event-stream')

if __name__ == '__main__':
    app.run(debug=True)
Vue.js 前端代码示例:
javascript 复制代码
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Waiting for update...'
    };
  },
  created() {
    this.connectSSE();
  },
  methods: {
    connectSSE() {
      const eventSource = new EventSource('/stream');
      eventSource.onmessage = (event) => {
        this.message = event.data;
      };
    }
  }
};
</script>

选择哪种方法取决于您的具体需求和应用场景。如果需要双向通信和实时性,WebSockets 是最佳选择。如果只需要服务器向客户端推送更新且无需双向通信,SSE 是一个不错的选择。如果实现简单是优先考虑的,HTTP Polling 也可以满足需求。

相关推荐
海绵宝宝转agent6 小时前
learn-claude-code第1-5章开源学习笔记分享
人工智能·笔记·python·学习
小奇不哭6 小时前
ROS2 单节点,RGB-D 深度相机局部路径提取 + B 样条平滑路径 + YOLOv8 障碍物检测 + 深度测距,用于移动机器人视觉局部循迹。
python·yolov8·ros2·cv2·路径探索循迹
小小龙学IT6 小时前
Python scikit-learn 机器学习库深度解析
python·机器学习·scikit-learn
2601_962071577 小时前
类变量和全局变量的查找路径有什么区别?
开发语言·python
卷无止境8 小时前
独立开发者的"富矿地带":哪些垂直领域值得你押注一辈子?
后端·python
福兮说8 小时前
设计稿是 #4A7C6F,页面量出来是 #4B7C6F:HEX、HSL、透明度、canvas 来回转的七个坑
前端·javascript·css·canvas
Java后端的Ai之路8 小时前
Python进阶探索29_eval内置函数
开发语言·python·探索·eval·内置函数
计算机毕业编程指导师8 小时前
计算机毕设选题推荐:基于Hadoop与Spark的Steam游戏数据分析系统源码 毕业设计 选题推荐 毕设选题 数据分析 机器学习 深度学习
大数据·hadoop·python·计算机·spark·毕业设计·steam游戏
计算机毕业编程指导师8 小时前
【计算机毕设选题推荐】基于Hadoop+Spark的白鹿抖音评论大数据分析与可视化系统源码 毕业设计 选题推荐 毕设选题 数据分析 机器学习 深度学习
大数据·hadoop·python·计算机·spark·毕业设计·抖音评论
Zootopia6268 小时前
飞行力学知识梳理1|飞行性能与稳定性
人工智能·python·算法·机器学习·无人机·学习方法·信息与通信