Create data stream in Angular

Question

I have a service that uses Observable to get data from database. It seems that it gets data only once . I would that it listen when a user adds data to the DB then stream to Angular.

service to get all data

getAllProj(): Observable<NouveauProjet[]> {
  return this.http.get<NouveauProjet[]>(
    "http://127.0.0.1:8081/api/proj/projets"
  );
}

service to add data

addProj(nouveauProjet: NouveauProjet): Observable<any> {
  return this.http.post<NouveauProjet[]>(
    "http://127.0.0.1:8081/api/proj/projets",
    nouveauProjet
  );
}

When I use my services I only subscribe to them

getAllProj() {
  this.ajoutProj.getAllProj().subscribe(
    response => {
      console.log("hello"+response);
      this.nouveauProjet=response;
    },
    error => console.log(error)
);

I thought that Observable still listen to server when a new data is added to DB but it's not the case, so How can I transform my observable to a data stream.

joshrathke · Accepted Answer · 2018-01-02 00:15:37Z

2

The short answer is Websockets. This is actually a server side issue.

Your API will never 'push' data out when the Database is updated unless you have told it to do so, and the easiest way to accomplish that is with Websockets. I would provide an example implementation, but there are a lot of variables, especially if you are monitoring database updates and pushing information accordingly.

An Observable is a data stream. If you setup multiple subscriptions to the same API call in your service, when new data is pulled from the API every subscription will get the new values. The problem is that HTTP Requests are just that, 'requests' that originate from the client.

answered Jan 2, 2018 at 0:15

joshrathke

7,7847 gold badges25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Hamza Haddad Over a year ago

I'll be interested for an example showing how to stream data in using Express js and mongo DB database. For example, a user that adds data then automatically send it to the client using get method

joshrathke Over a year ago

To be frank you won't find one. Express is a REST API meaning it only responds to requests. Look into Socket.IO. You need to subscribe to an open socket on the server capable of pushing data.

joshrathke Over a year ago

Your best bet is a 2-way implementation using Express (to respond to requests that require a lot of middleware), and socket.io as your "New Info" broadcast server. There are a lot of security issues with websockets, so do your due diligence and make sure your not broadcasting sensitive data.

Hamza Haddad Over a year ago

Now I have maked a look at socket.io . Should I implement Socket.io for client ? or only make in server side a socket emit in post api when it is called and on socket in get api ?

Hamza Haddad Over a year ago

Can you give me more informations to how to do that ?

|

zx485 · Accepted Answer · 2021-07-21 21:43:10Z

0

Here is some example of how to create a data stream manually, so you can test whether your code is working fine or not, at your end.

let arr = [];
setInterval(() => arr.push((Math.random())), 1001);
return interval(2000).pipe(map(i => arr));

If the solution is not what you expect, then simply leave it for the beginners like me, who are learning rxjs, so they can improve their rxjs skills.

edited Jul 21, 2021 at 21:43

zx485

29.1k28 gold badges55 silver badges65 bronze badges

answered Jul 21, 2021 at 2:13

Sujeet Mishra

2095 silver badges3 bronze badges

Collectives™ on Stack Overflow

Create data stream in Angular

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related