Real time refreshing app using Angular2

0 votes

I created a nodejs backend to get the current exchange rate from an API and display it in the html. Also I created the currency exchange component and its working fine. What I need to update the html and the currency exchange component every 5 or 10 seconds.

My first question is if its better to do it in the backend or the frontend, and the second is how I do it.

Here is my code:

api.js

const express = require('express');
const router = express.Router();

// declare axios for making http requests
const axios = require('axios');
const coinTicker = require('coin-ticker');

/* GET api listing. */
router.get('/', (req, res, next) => {
  res.send('api works');
});

router.get('/posts', function(req, res, next) {
  coinTicker('bitfinex', 'BTC_USD')
    .then(posts => {
      res.status(200).json(posts.bid);
    })
    .catch(error => {
      res.status(500).send(error);
    });
});



module.exports = router;

prices.component

import { Component, OnInit } from '@angular/core';
import { PricesService } from '../prices.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-posts',
})
export class PricesComponent implements OnInit {
  // instantiate posts to an empty array
  prices: any;

  targetAmount = 1;
  baseAmount = this.prices;

  update(baseAmount) {
    this.targetAmount = parseFloat(baseAmount) / this.prices;
  }

  constructor(private pricesService: PricesService) { }

  ngOnInit() {
    // Retrieve posts from the API
    this.pricesService.getPrices().subscribe(prices => {
      this.prices = prices;
      console.log(prices);
    });
  }

}

Prices.service

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class PricesService {

  constructor(private http: Http) { }

  // Get all posts from the API
  getPrices() {
    return this.http.get('/api/posts')
      .map(res => res.json());
  }
}

html

<div class="form-group">
     <label for="street">Tipo de Cambio</label>
     <input type="number" class="form-control" id="street" [value]="prices" disabled> CLP = 1 BTC
 </div>
Aug 27, 2018 in Blockchain by slayer
• 29,360 points
519 views

1 answer to this question.

0 votes

You can use client side normal polling. It's very easy to implement client side polling using rxjs.

Try this:

return Observable.interval(5000) // call once 5 per second
    .startWith(0)
    .switchMap(() => {
        return this.http.get('/api/posts')
            .map(res => res.json())
    })
    .map(value => value[0]);
answered Aug 27, 2018 by digger
• 26,740 points

Related Questions In Blockchain

0 votes
1 answer

How to visualize real-time data candlestick chart for cryptocurrencies?

Take a look at https://github.com/highfestiva/finplot. Where you can ...READ MORE

answered Apr 7, 2022 in Blockchain by Rahul
• 9,680 points
2,448 views
+1 vote
3 answers

Is it possible to store data about arbitrary objects on the blockchain using smart contracts?

Basically you implement requested logic on by ...READ MORE

answered Aug 30, 2018 in Blockchain by Artem
1,334 views
+3 votes
2 answers

How to run ethereumjs using Node.JS

You need to install testrpc globally on ...READ MORE

answered Mar 27, 2018 in Blockchain by ned_crew
• 1,610 points
1,086 views
+1 vote
1 answer

Transaction using Blockchain wallet APi

Each transaction requires a fee to be ...READ MORE

answered Jun 19, 2018 in Blockchain by Perry
• 17,100 points
554 views
+1 vote
1 answer

Protocols used in a distributed/dlt system for the nodes to establish communication

yes all are over TCP/IP connections secured ...READ MORE

answered Aug 6, 2018 in Blockchain by aryya
• 7,450 points
1,218 views
0 votes
1 answer

Truffle tests not running after truffle init

This was a bug. They've fixed it. ...READ MORE

answered Sep 11, 2018 in Blockchain by Christine
• 15,790 points
1,784 views
0 votes
1 answer

Hyperledger Sawtooth vs Quorum in concurrency and speed Ask

Summary: Both should provide similar reliability of ...READ MORE

answered Sep 26, 2018 in IoT (Internet of Things) by Upasana
• 8,620 points
1,307 views
0 votes
1 answer

How to interact with blockchain using Java web app?

You can interact with the blockchain using ...READ MORE

answered Jul 16, 2018 in Blockchain by digger
• 26,740 points
1,024 views
0 votes
1 answer

How to transact custom token instead of ethers using JSON rpc?

First create your custom token. Then develop ...READ MORE

answered Jul 10, 2018 in Blockchain by digger
• 26,740 points
964 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP