### Vue3 和 Flask 实现流式输出 Markdown 和 LaTeX #### 后端设置 (Flask) 为了实现实时数据传输，可以利用 WebSocket 或者 Server-Sent Events(SSE)，这里采用 SSE 方便服务器向客户端推送更新。SSE 是一种允许服务器主动发送消息给浏览器的技术。 创建一个简单的 Flask 应用程序来处理请求并返回流式的响应： ```python from flask import Flask, Response, render_template_string import time app = Flask(__name__) @app.route('/stream') def stream(): def generate(): for i in range(10): # 模拟分步生成内容的过程 md_content = f"# Step {i}\nThis is step number **{i}**\n" yield 'data: {}\n\n'.format(md_content) time.sleep(1) # 延迟模拟长时间运行的任务 return Response(generate(), mimetype='text/event-stream') if __name__ == "__main__": app.run(debug=True, threaded=True) ``` 此代码片段定义了一个 `/stream` 路径，它会每隔一秒发送一段新的 Markdown 文本直到循环结束[^1]。 #### 前端配置 (Vue3) 前端部分则需监听来自服务端的消息事件，并实时渲染接收到的数据。通过 `EventSource` API 可轻松连接到上述创建的服务端点。 下面是一个基本的例子展示如何在 Vue 组件内完成这一操作： ```html <template> <div id="app"> <h2>Streamed Content:</h2> <pre>{{ streamedContent }}</pre> </div> </template> <script setup> import { ref } from "vue"; const streamedContent = ref(''); function connectToServer() { const eventSource = new EventSource("/api/stream"); eventSource.onmessage = function(event) { let parsedData = JSON.parse(event.data); streamedContent.value += parsedData; }; eventSource.onerror = () => { console.error('Error occurred while connecting to the server.'); eventSource.close(); }; } connectToServer(); </script> ``` 注意这里的 URL (`/api/stream`) 需要匹配实际部署环境下的路径。此外，在生产环境中应当考虑错误重试机制以及断开连接后的重新建立逻辑。 对于 LaTeX 支持，可以在接收完所有 Markdown 数据后再调用 MathJax 进行解析显示数学表达式；或者直接嵌入支持 KaTeX 的组件来进行即时转换。