Angular observable 没有从 flask 服务器捕获新值

Question

我的问题是我想从服务器读取来自 angular 应用程序的数据而不重新加载页面。我有一个简单的烧瓶服务器，它在 python:

中发送数据

from threading import Timer
from flask import Flask
import time
import random
from datetime import datetime
from flask_cors import CORS, cross_origin

app = Flask(__name__)
cors = CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'

string = ''
humidity = 60
stress = 1
temperature = 20

def update_data(interval):
    Timer(interval, update_data, [interval]).start()

    global string
    global humidity
    global stress
    global temperature

    string = ''
    string += f'{{"ID":"90A2DA10F2E4",'
    string += f'"timestamp":"{datetime.now().isoformat()}",'
    string += f'"temperature":{temperature},'
    string += f'"humidity":{humidity},'
    string += f'"stress":{stress}}}\n'


    humidity = round( (humidity + (random.random()*2-1)), 2)
    stress = round( (stress + (random.random()*0.2-0.1)), 2)
    temperature = round( (temperature + (random.random()*0.2-0.1)), 2)

# update data every second
update_data(1)

@app.route("/")
@cross_origin()
def index():
    return string

if __name__ == "__main__":
    app.run(debug=True)

以及 angular 中创建对该流的订阅的组件：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'prototype';
  darkTheme =  new FormControl(false);
  list = [];

  constructor(private streamService: TestDataService,
              private http: HttpClient) { }

  ngOnInit() {
    this.privateServer();
  }

  privateServer() {
    console.log("private server");
    console.log(this.http.get('http://localhost:5000'));
    this.http.get('http://localhost:5000').subscribe( data => {
      console.log(data);
      this.list.push(data);
    })
  }

  onClick(){
    console.log(this.list);
  }
}

它将成为服务的一部分，但出于测试目的，我试图让它在组件内部运行。该模板仅包含一个调用 onClick() 的按钮。任何帮助将不胜感激。

Answer 1

在Angular中，HttpClient的请求方法旨在complete一旦Observable产生一个值。因此，一旦触发订阅回调，observable 就完成了（不会再触发）。

要实现您的要求，您需要轮询数据或Web Sockets，具体取决于您的需要。

对于网络套接字：

https://medium.com/dailyjs/real-time-apps-with-typescript-integrating-web-sockets-node-angular-e2b57cbd1ec1

https://medium.com/factory-mind/angular-websocket-node-31f421c753ff

投票：

https://nehalist.io/polling-in-angular/

Angular observable 没有从 flask 服务器捕获新值

Angular observable doesn't catch new values from flask server

angular

rxjs6

angular7