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,170 points
60 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,550 points

Related Questions In Blockchain

+1 vote
3 answers

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

Consider following tutorial from Hyperledger Fabric "Getting Started" pages. Basically ...READ MORE

answered Aug 30, 2018 in Blockchain by Artem
133 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,620 points
161 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,020 points
61 views
+1 vote
1 answer

Unable to send payment using API. Please help.

Firstly, check your passwords, your API code and your wallet ...READ MORE

answered Apr 3, 2018 in Blockchain by Christine
• 15,790 points
160 views
0 votes
1 answer

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

yes all are over TCP/IP connections secured by TLS encryption in hashgraph architecture-hashgraph, ...READ MORE

answered Aug 6, 2018 in Blockchain by ariaholic
• 7,340 points
92 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
172 views
0 votes
1 answer
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,550 points
223 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,550 points
44 views