Collect streamed data into an angular app

Viewed 374

Assuming that I have a Flask backend streaming data bit by bit, following something like:

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)

How can I collect this data in something like an Observable on an Angular 5-6-7 app? I have tried playing with httpClientModule and done some research but I did not find any working example.

2 Answers

HttpClientModule is not what you'll need to use for this. It will be best to use RxJs's Websocket library. That library will make this much easier, assuming you know how to set up your backend to accept a Websocket. If you're worried about the amount of data over the wire, you could also utilize protocol headers, specifically Google's 'protobuf' library. That can be found here: https://developers.google.com/protocol-buffers/

Related