在服务器端处理完成之前，客户端没有任何变化

Question

我正在编辑大型 vaadin 网络应用程序的一个上传页面，该页面的要求基本上是上传文件并保存其内容。当它是一个小文件时，没有用户体验问题，但对于有 100 万行（当前生产平均值）的大文件，用户体验非常糟糕，至少没有任何文本，如“正在处理......请稍候”。刚刚在“保存按钮”中使用了 Button.setDisabledOnClick，但还不够。用户将不知道发生了什么，是否有任何错误，他应该取消等等

这是方法代码片段（方法saveFile的相关部分）：-

    progressmsg.setVisible(true); // progressmsg is a label, initially setVisible(false)
    boolean msisdnInserted = rows.saveContent(); // inserts rows in batch in DB

这个调用没有不恰当的方式:-

    btnSave.addListener(new ClickListener() {
        
        @Override
        public void buttonClick(ClickEvent event) {
            saveFile();
        }
    });

问题是 progressmsg.setVisible(true) 在 rows.saveContent() 之后反映在浏览器上，它在大文件中插入 1M 行。

无论我做什么，我都无法在插入开始之前让标签可见。我什至尝试添加带有消息的 50x50 小 window，但行为是相同的，window 在处理后出现。在谷歌搜索了很多之后无法弄清楚这一点。欢迎任何 concept/suggestion。谢谢！

Answer 1

当您执行较长的后台处理任务时，最好在单独的线程中处理这些任务以避免阻塞主线程。然后，您可以使用 WebSocket 连接并在后端任务完成时异步更新 UI。这里有一些相关的文档 https://vaadin.com/docs/v14/flow/advanced/tutorial-push-access. This video also covers some good pointers on how to build performant UIs with Vaadin when you have long-running background tasks https://youtu.be/7Mr_pQc_rxA.

本质上，您要做的是在单独的线程中进行处理，然后在完成后使用 ui.access() 更新 UI。您需要使用 @Push 在没有活动请求的情况下从服务器更新 UI。

在服务器端处理完成之前，客户端没有任何变化

Nothing changes on the client side until server side processing is finished

vaadin