Angular, как показать живое значение объекта json

Question

В угловом режиме я пытаюсь отобразить один объект json для клиента html.Используя приведенный ниже маршрут на стороне сервера.

const express = require('express');
const jsonRoute = express.Router();

jsonRoute .route('/json').get(function (req, res) {
    var JsonObj = { rank: 73 } ;
  res.end(JSON.stringify(JsonObj));
});

setInterval(function(){ 
    JsonObj.rank = parseInt(Math.random()*100);
}, 1000); // this interval may be anything.from ms to minutes.

module.exports = jsonRoute ;

, это работает на http://localhost:4000/json и отображает

{"rank":73}

, но не показывает значения, измененные в setInterval.И тот же маршрут, который я использую в угловом сервисе (используя http).

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class getjsonService {
  uri = "http://localhost:4000/json";
  constructor(private http: HttpClient) { }
  jsondata(){
    return this.http.get(`${this.uri}`);    
  }
}

Это значение я отображаю на html-странице компонента.Проблема в том, что он не показывает обновленное значение json.Пожалуйста, предложите, как я могу показать в реальном времени значение JSON в угловых.Обратите внимание, что в реальном времени мой объект json будет иметь большой размер, около 100 ключей и значение, и я хочу показать действительное значение для всех ключей.А также интервал изменения значения не может быть зафиксирован как одна секунда.это может быть и в миллисекундах.

Спасибо

Answer 1

Ваша проблема структурная в том, как работает архитектура RESTful. Ваш сервер отправляет новые данные в ваше приложение angluar только тогда, когда ваше приложение запрашивает их, а не когда сервер обнаруживает изменение. Что вам нужно будет сделать, это либо добавить установленное время ожидания в ваш угловой проект, который будет вызывать сервер для новых данных каждые несколько секунд.

setInterval(function(){ var JsonData = getJsonService.jsondata() }, 3000);
console.log(JsonData);
//This will refetch the data every 3 seconds you can lower this number to make it refresh more often

Другой вариант - переписать ваш сервер, чтобы использовать веб-сокеты, как указал Равин.

Answer 2

По умолчанию http не будет постоянным соединением.Это ограничение протокола HTTP, а не angular. Если вы хотите показать значение в реальном времени, вам нужно использовать веб-сокеты.

Существует множество библиотек, которые помогут с подключением к данным в реальном времени.https://socket.io/ очень популярен.проверить это

Учебник: https://alligator.io/angular/socket-io/

Answer 3

В вашем коде node.js вы повторно инициализируете переменную JsonObj каждый раз, когда делается запрос. Вы должны сохранить значение как глобальную переменную:

const express = require('express');
const jsonRoute = express.Router();

var JsonObj = { rank: 73 };

jsonRoute .route('/json').get(function (req, res) {
    res.json(JsonObj);
});

setInterval(function(){ 
    JsonObj.rank = parseInt(Math.random()*100);
}, 1000); // this interval may be anything.from ms to minutes.

module.exports = jsonRoute ;