前端vue,后端python,如何通过SSE流式传输数据?

bluesky9月前 ⋅ 5823 阅读
SSE(Server-Sent Events,服务器推送事件)是一种用于在Web浏览器和服务器之间实现单向实时通信的技术。在前端Vue和后端Python结合使用时,可以使用Flask-SSE库来实现SSE流式传输数据。

以下是使用Flask-SSE库实现SSE流式传输数据的步骤:

1. 在后端Python中安装Flask-SSE库。

```pip install Flask-SSE```

2. 在后端Python中创建一个SSE视图。以下是一个示例视图:

```
from flask import Flask, render_template, request
from flask_sse import sse

app = Flask(__name__)
app.register_blueprint(sse, url_prefix='/stream')

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/send-message', methods=['POST'])
def send_message():
    message = request.form['message']
    sse.publish({"message": message}, type='message')
    return 'Message sent!'
```

该视图将在`/stream` URL上注册SSE蓝图,并在`sse.publish()`函数中使用`type`参数指定事件类型。在上述示例中,事件类型为`message`。

3. 在前端Vue中使用EventSource API与SSE进行通信。以下是一个示例组件:

```



  export default {
    data() {
      return {
        message: '',
        messages: []
      }
    },
    methods: {
      sendMessage() {
        fetch('/send-message', {
          method: 'POST',
          body: new URLSearchParams({
            'message': this.message,
          }),
        })
      }
    },
    mounted() {
      const eventSource = new EventSource('/stream');
      eventSource.addEventListener('message', (event) => {
        this.messages.push(event.data);
      });
    },
  }

```

该组件包含一个表单,使用户能够向服务器发送消息,并在收到来自服务器的消息时使用`EventSource`和`addEventListener()`函数将消息添加到前端Vue组件中的消息列表。

通过以上步骤,您就可以在前端Vue和后端Python之间使用SSE流式传输数据。

全部评论: 0

    相关推荐