将流数据收集到 angular 应用中

Question

假设我有一个 Flask 后端流式传输数据，如下所示：

from flask import Flask, Response, jsonify
from flask_cors import CORS
import json

from itertools import cycle
from time import sleep


app = Flask(__name__)
CORS( app)

@app.route('/')
def hello_world():
    def gen():
        for i in cycle(range(1,10)):
            yield json.dumps( {"new_val":i})
            sleep(1)
    return Response( gen())


app.run( port=5000, debug=True)

如何在 Angular 5-6-7 应用程序的 Observable 中收集这些数据？我试过玩 httpClientModule 并做了一些研究，但我没有找到任何有效的例子。

Answer 1

HttpClientModule 不是您需要为此使用的。最好使用 RxJs 的 Websocket 库。假设您知道如何设置后端以接受 Websocket，该库将使这一切变得容易得多。如果您担心线路上的数据量，您也可以使用协议 headers，特别是 Google 的 'protobuf' 库。可以在这里找到：https://developers.google.com/protocol-buffers/

Answer 2

我建议你为此使用 socket.io 客户端 api https://www.npmjs.com/package/socket.io-client

此库的教程 angular 2+ http://www.syntaxsuccess.com/viewarticle/socket.io-with-rxjs-in-angular-2.0

并检查如何在 Flask 后端实现它

将流数据收集到 angular 应用中

Collect streamed data into an angular app

angular

streaming