角度 2 实时刷新应用程序

Question

我是Angular和Nodejs的新手，我试图建立一个平均堆栈加密货币交换应用程序。 我创建了一个nodejs后端，从API获取当前汇率并将其显示在html中。我还创建了货币兑换组件及其工作正常。我需要每 5 或 10 秒更新一次 html 和货币兑换组件。

我的第一个问题是在后端还是前端做更好，第二个问题是我怎么做。

这是我的代码：

接口.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;

价格.组件

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);
});
}
}

价格.服务

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>

Answer 1

如果您想每 5 或 10 秒定期轮询一次，那么使用 Web worker 没有任何优势。通常，Web工作者对于聊天应用程序等双向通信很有用。

我认为在您的情况下，您可以使用客户端正常轮询。使用 rxjs 实现客户端轮询非常容易。

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]);