Stream

In javascript almost everything is a Stream, when you click on the page, it creates an stream which is consist of? click event.

document.addEventListener('click',evt=> {

     console.log(evt);

   });        

Now, lets set an interval for a timer and increase a counter.

let counter = 0;
    setInterval(() => {
          console.log(counter);
          counter ++;
    }, 1000)        

Every 1 second, the value of the counter is increased.

In this point we have two streams, one for event click and another for counter.

Beside setInterval and click event that always emiting and never completed, we can use SetTimeout to emit just one time. setInterval and click event are multi value streams and SetTimeout is single value stream.

setTimeout(() => {
      console.log('Completed ...')
    }, 3000);
        

Imagine we want to send three request respectively. We can use callbacks nested but it creates callback hell.

document.addEventListener('click',evt=> {
     console.log(evt);

     setTimeout(() => {
      console.log('Completed ...');

      let counter = 0;
      setInterval(() => {
            console.log(counter);
            counter ++;
      }, 1000);
  

    }, 3000);

   });        

To avoid of callback hell, we can use RxJs.

First, we create tow ubserable, one for a click event and another for stream and call them with subscribe and stop the stream after 5 minutes. For stop stream we can use unsubscribe method.

const interval$ = interval(1000);
    const sub = interval$.subscribe(val => console.log('stream 1 =>' + val ));
    setTimeout(() => {
      sub.unsubscribe();
    }, 5000);
    
    const click$ = fromEvent(document,'click');
    click$.subscribe(
      evt => console.log(evt),
     error => console.log(error),
      () => console.log('completed')
    
    
    );        

For getting data from server for our test project, we can json-server to build a fake server.

Step #1 - Install JSON Server

To install JSON Server in your application, navigate to your project directory in your terminal or command prompt and type in this command:?

npm install -g json-server.

?

Step #2 - Create a JSON File

Create a JSON file in your project directory that will act as the data source. This JSON file should have a?.json?file extension. What do I mean? Let's say you want your JSON file name to be 'db', it means you'll create a file called?db.json.

{
    "courses": [
      {
        "id": 1,
        "title": "angular",
        "description": "angular with coursera",
        "level": "beginner"
      },
      {
        "id": 2,
        "title": "angularjs",
        "description": "angularjs with coursera",
        "level": "beginner"
      },
      {
        "id": 3,
        "title": "c#",
        "description": "C# with coursera",
        "level": "beginner"
      },
      {
        "id": 4,
        "title": "javascript",
        "description": "javascript with coursera",
        "level": "beginner"
      },
      {
        "id": 5,
        "title": "c++",
        "description": "c++ with coursera",
        "level": "beginner"
      }
    ]
  }
        

Step #4 - Start the Server

Start up the JSON Server by typing this command into your terminal:?json-server --watch db.json. This will run on "https://localhost:3000" by default.

?Now lets create observable :

const http$ = new Observable(observer=>{
  fetch('https://localhost:3000/courses')
  .then(response=> {
    return response.json();
  })
  .then(body=>{
    observer.next(body);
    observer.complete();  
  })
  .catch((err)=>{
    observer.error(err);
  });
});        

Go to https://localhost:3000/courses address and you can see the result on terminal :

There is a request to the server on network tab: