如何自动更新页面上的数据，Angular 7和Spring Boot

Question

我正在尝试实现页面，其中数据实时更新。我试图为这个问题实现一些Web套接字，但基本上所有示例和教程都代表，需要发送消息（我的项目中的想法是，数据将从不同的源加载，因此我没有任何帖子功能，只有获得）。情况变得越来越复杂，因为这基本上是详细信息页面，它按特定ID加载结果。

因此我的问题是 - 如何实时更新？

这是来自Controller.java

@GetMapping("data/{data_id}")
public Optional<Data> findByData_id(@PathVariable("data_id") Long data_id){
Optional<Data> data = dataRepository.findById(data_id);
return data;
}

来自data.service.ts

getDataById(data_id: number): Observable<any> {
return this.http.get<Data[]>('http://localhost:8080/data/' + data_id)
}

来自data.details.component.ts

const tracker_id = +this.route.snapshot.params["data_id"];
this.data_table.getDataById[data_id]
.subscribe(data_table=> {
this.data_table.data_table = data_table as Data[];
this.data_table_var = this.data_table.data_table;

Answer 1

如果您想实时更新数据，则需要使用Web套接字。

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration extends AbstractWebSocketMessageBrokerConfigurer{
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/socket")
                .setAllowedOrigins("*")
                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/app")
                .enableSimpleBroker("/chat");
    }
}

这是很好的参考https://medium.com/oril/spring-boot-websockets-angular-5-f2f4b1c14cee