Question

在angular中，我试图向客户端html显示一个json对象。在服务器端使用以下路由。

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

默认情况下，http将不会持久连接。这是http协议的限制，不是从角度来看的。如果要实时显示该值，则需要使用Web套接字。

那里有很多库将有助于实时数据连接。 https://socket.io/非常受欢迎。检查一下

教程：https://alligator.io/angular/socket-io/

Answer 2

您的问题是RESTful架构如何工作的结构性问题。您的服务器仅在 app 要求时将新数据发送到您的Angluar应用程序，而不是在 server 检测到更改时将其发送到您的语言应用程序。您需要做的是在角度项目中添加一个设置的超时，该超时将每隔几秒钟调用服务器一次的新数据。

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

另一种选择是如Ravin所指出的那样重写服务器以使用网络套接字。

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 ;

Angular如何显示JSON对象的实时值

3 个答案: