How do you stream JSON data over HTTP in angular using flask backend?

Question

I currently have a flask backend and an angular frontend.

The backend database (couchdb) has a huge amount of data that needs to be dumped. For the time being, we are using a map function that call all the docs and send it as a list from the flask in a path. This is however suboptimal as this results in the server waiting until all the data is fetched (the angular currently has a Http get call which an object subscribes to)

I would like to move this to a stream where the data gets streamed to the angular front end

The backend code is fairly simple and the GET to the stream works as expected. I can call the GET using chrome or postman and i can see the data being streamed:

@app.route('/stream/', methods = ['GET'])
def streamdata():
    view = db.view('_design/dd/_view/viewdocument')
    def generate():
        for row in [x['value'] for x in view.rows]]:
            yield json.dumps(row)
    return Response(generate(), mimetype = 'application/json')

My question is how do I get this stream in the front end? A standard http call (and then assigning an array to the object) does not seem to work

for instance, I tried defining a function in the service that catches the stream:

getstream = () => {
    this.http.get<any>('http://localhost:5007/stream/').pipe(
        map(response => data, error => console.log(error)))
}

I then tried to created a variable that subscribed to to object in the front end. But this does not seem to work

Any help is appreciated.

Regards, Galeej

map(response => data where data id defined? it suppose to map(response => response and in component you should get in observable i.e data$ = this.service.getstream() — Kamran Khatti
– Kamran Khatti, Commented Sep 2, 2020 at 8:06

galeej · Accepted Answer · 2020-09-02 10:22:12Z

This was resolved using the getServerSentEvent in the front end

I have given the sample code below:

this.service.getServerSentEvent('endpoint').subscribe(
    event => {
        if(event.close){
            "code for end event"
        }else{
            data = event.parse(event)
        }
    },
    error => {console.log("error")},)

The service that I am invoking is:

  getServerSentEvent(url: string): Observable<any> {
    return Observable.create(observer => {
      const eventSource = this.getEventSource(url)

      eventSource.onmessage = event => {
        this._zone.run(() => {
          if (event.data === 'eos') {
            var streamdata =<any>{}
            streamdata.close = true
            observer.next(streamdata)
            eventSource.close()
          } else {
            observer.next(event)
          }
        })
      }

Collectives™ on Stack Overflow

How do you stream JSON data over HTTP in angular using flask backend?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related