时间戳

首页 > 解决方案 > 从外部 REST api 获取并显示实时数据

angular - 从外部 REST api 获取并显示实时数据

问题描述

我正在尝试使用 Angular 8 实现前端 Web 平台。我的目标是能够从不在同一台服务器上的 REST Web 服务实时连续获取数据。对于可以从 WS 检索到的每个新数据，我希望它在我的前端平台上可见，至少在控制台中是可见的。

如果可能的话，我会避免每 X 秒刷新一次，因为我有太多数据要从服务器检索，所以我觉得它很重。

考虑到我无法配置为我提供数据的 Web 服务。

到目前为止我做了什么

在我的 Angular 项目中：

todo.service.ts

export class TodoService {
  todosUrl =  '***urloftodo***';
  todosLimit = ''; // '?_limit=5';

  constructor(private http: HttpClient) { }

  // Get Todos
  getTodos(): Observable<Todo[]> {
    return this.http.get<Todo[]>(`${this.todosUrl}${this.todosLimit}`);
  }
}

todo.component.ts

export class TodosComponent implements OnInit {
  todos: Todo[];
  obslist: Subscription;

  constructor(private todoService: TodoService) { }

  ngOnInit() {
    this.obslist = this.todoService.getTodos().subscribe(todos => {
      console.log(todos);
    });
}

在我的前端，当我查看控制台时，尽管在服务器端添加了一些额外的数据（通过浏览器/邮递员验证），但没有提示新数据。

我听说过很多关于 observables 和 websocket 的信息，但我不知道我必须通过哪种方式进行搜索。我有点失落！

标签： angularrestangular8

解决方案

正如我在评论中所说，这HttpClient.get是一个一次性的请求。
要连续发出该请求，您可以使用 RXJSinterval

const timer = 5000; // ms
interval(timer)
.pipe(
  mapTo(
    // Your request
  ),
  flatMap(v => v) // Flatten
)

我在这里做了一个stackblitz 。

如果你的 WebService 提供了连接 websocket 的方法，请查看RXJS 的 websocket

推荐阅读