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,050 points
36 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
• 27,620 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
91 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
119 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,010 points
35 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
109 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,320 points
56 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
105 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
• 27,620 points
141 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
• 27,620 points
29 views