Collect streamed data into an angular app

Question

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.

Answer 1

I suggest you to use socket.io client api for this https://www.npmjs.com/package/socket.io-client

tutorial for this library with angular 2+ http://www.syntaxsuccess.com/viewarticle/socket.io-with-rxjs-in-angular-2.0

and check how to implement it on flask backend

Answer 2

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/