如何通知 Web 界面变量的状态？答案

【问题标题】：How to inform a web interface about the status of a variable?如何通知 Web 界面变量的状态？
【发布时间】：2017-12-14 10:22:21
【问题描述】：

我正在将 Spring MVC 用于 Web 应用程序（使用 JQuery 作为前端）。我有一个服务，它的状态变量会根据某个方法的进度而变化。

代码如下所示：

@Service
public class PatchGenerationService {
 private String status;

 public String getStatus() {
     return status;
 }

 public void generatePatch(){
      status = STATUS_PREPARE;
      //some code 
      status = STATUS_LOOKUP;
      //and so on
      status = STATUS_FINISHED;
 }
}

有多个异步线程同时运行此服务，由不同的客户端创建。我希望能够通知每个客户为他创建的线程的状态。

这里是创建PatchGenerationService 的服务：

@Async
public static void createPatchFromSelectedCommits(String branch, String tagName, List<Commit> commits) {
    log.info("generating a new patch");
    PatchGenerationService patchGenerationService = new PatchGenerationService();
    patchGenerationService.generatePatch(/*attributes*/);
    log.info("patch generation ended");
}

如何在每次该变量发生变化时将带有状态变量值的信息发送给客户端？

【问题讨论】：

应该是setInterval(getGenerationProgress, 100)
谢谢，纠正错字

标签： javascript java spring spring-mvc spring-boot

【解决方案1】：

你应该看看这个文档：Using WebSocket to build an interactive web application

使用 WebSocket 构建交互式 Web 应用程序

本指南将引导您完成创建“hello world”的过程在浏览器和浏览器之间来回发送消息的应用程序服务器。 WebSocket 是 TCP 之上的一个非常轻薄的层。它非常适合使用“子协议”来嵌入消息。在本指南我们将深入研究并使用 Spring 的 STOMP 消息传递来创建一个交互式网络应用程序。

简单来说，你的后端会向你的前端发送一条消息，通知他状态的变化。

【讨论】：

好的我已经实现了这个，但问题是我的服务是@Async，并且创建了许多 PatchGenerationService 实例，每个实例都有自己的状态，我怎样才能将特定的传递给控制器？
我不明白你的意思。您没有跟踪您创建的 PatchGenerationService，这对我来说似乎是个问题。
这是我的问题，我不知道如何跟踪该对象
好吧，您可以在每个对象上使用带有 ID 的 List 或 Map。您的来电。
我将编辑我的问题，以便更清楚

【解决方案2】：

我终于在这个项目中找到了答案：Github Link

事实上，检索特定的PatchGenerationService 对象相当困难。因此，我修改了该类，使其实现Runnable。

我现在重写 PatchGenerationService 中的 run 方法：

@Override
public void run() {
    generatePatch( patchName,  branchName,  tagName,  version,  author,  applierRelease,  selectedCommits);
}

我将 STOMP 与 SockJS 一起使用，以便在每次 statuts 变量更改时向客户端发送消息：

public void sendProgress(String exception){
    logger.info("status:" +status);
    Status statusWithException=new Status(status,exception);
    template.convertAndSend("/generationStatus/status", statusWithException);
}

public void generatePatch(String patchName, String branchName, String tagName, String version, String author, String applierRelease, List<Commit> selectedCommits) {

    //String status;
    status = STATUS_PREPARE;
    sendProgress("");
}

连接由代理管理：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

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

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/status").withSockJS();
    }

}

客户端的connect方法订阅generationStatus/status url：

function connect() {
    console.log('connecting to generation status');
    var socket = new SockJS('/status');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        console.log('Connected: ' + frame);
        stompClient.subscribe('/generationStatus/status', function (data) {
            console.log(data);
        });
    });
}

【讨论】：