Angular observable 没有从烧瓶服务器捕获新值
Posted
技术标签:
【中文标题】Angular observable 没有从烧瓶服务器捕获新值【英文标题】:Angular observable doesn't catch new values from flask server 【发布时间】:2019-03-18 08:45:35 【问题描述】:我的问题是我想从服务器读取数据,因为它来自 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() 的按钮。 任何帮助将不胜感激。
【问题讨论】:
到底是什么问题? 问题是在它得到第一个请求后它没有得到更新的数据。 【参考方案1】:在 Angular 中,一旦 Observable 产生一个值,HttpClient
的请求方法将用于 complete
。因此,一旦订阅回调被触发,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/
https://***.com/a/41658823/1331040
【讨论】:
谢谢,网络套接字似乎正是我所需要的。 很高兴为您提供帮助 :) 我又添加了两个链接。以上是关于Angular observable 没有从烧瓶服务器捕获新值的主要内容,如果未能解决你的问题,请参考以下文章
通过 Observable 从 Angular 向 nodejs 发送 POST 请求
Angular 2 observable 没有“映射”到模型
Angular 6 - 从 observable 获取数据我做错了啥?