使用 Angular 4 和 Http observables 进行无限轮询答案

【问题标题】：Infinite polling with Angular 4 and Http observables使用 Angular 4 和 Http observables 进行无限轮询
【发布时间】：2017-10-18 09:28:38
【问题描述】：

我正在尝试在我的 Http 服务中构建无限轮询，因为我正在构建一个仪表板之王，它调查来自服务器的数据，这是我几乎可以工作的代码（在我的控制台中，我看到 Json 正在运行，但是它并没有反映我的观点......我想注入我的用户：Observable

const usersURL = 'http://my.super.servor.php'

@Injectable()
export class UserService {

 users: Observable<User[]>

   constructor (public http:Http) {
     this.users = http.get(usersURL)
              genre mobile ou autre
              .map(res => [res.json()]);

        let i = this.users.subscribe(
          usersURL => console.log(usersURL),
         () => {}, // Here we catch up errors
         () => console.log("completed!") // Here we catch up if its completed
        )

    // Here's where I'm trying to do the polling every 5 secondes
    let tick$ = Observable.interval(5000);

    let response$ = 
      tick$
          .flatMap(() => http.get(usersURL))
          .map(res => [res.json()]);

    let stockPoller = response$.subscribe(res => console.log(res));
  }

【问题讨论】：

将你的 http 调用移动到一个方法中并返回 observable。然后将服务注入到组件中，调用新方法并订阅结果。就这样

标签： javascript angular long-polling rxjs5 angular-http

【解决方案1】：

您只需将您的投票 observable 分配给this.users：

this.users = tick$.flatMap(() => http.get(usersURL)).map(res => [res.json()]);

【讨论】：

哇，这工作真的很棒，非常感谢！还有一个问题，我想你也知道：当我将该 observable 绑定到视图时，我将其作为示例：
{{user. data.apps.non_running.non_sensitive.unseen}}
..但我每次查看差不多 50 次，我的页面开始需要时间来加载......你知道如何避免这种问题吗？
请在最后的评论中查看我的问题
您是在问“如果我将 50 个 ui 元素绑定到 observable，我如何让它们共享相同的 polling observable 而不是启动 50 个单独的民意调查”？只需在.map(...) 之后添加.publishReplay(1).refCount()。这将导致所有绑定的 ui 元素共享底层轮询
是的，就是这样，因为我的页面现在加载速度很慢......我会尝试
使用timer 而不是interval。它具有“第一个”计时器和后续周期性计时器的参数。