CODEWITHSUNDEEP
angularstreaming
Learning is a mess
Learning is a mess

Reputation: 8277

Collect streamed data into an angular app

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.

Upvotes: 5

Views: 1023

Answers (2)

Ofek Amram
Ofek Amram

Reputation: 452

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

Upvotes: 2

Willwsharp
Willwsharp

Reputation: 723

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/

Upvotes: 1

Related Questions