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

Question

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

这是方法代码片段(方法保存文件的相关部分)：-

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 小窗口，但行为相同，窗口在处理后出现。 谷歌搜索了很多后无法弄清楚这一点。欢迎任何概念/建议。谢谢！

Answer 1

当您执行较长的后台处理任务时，最好在单独的线程上处理这些任务，以避免阻塞主线程。然后，可以使用 WebSocket 连接，并在后端任务完成时异步更新 UI。以下是一些 https://vaadin.com/docs/v14/flow/advanced/tutorial-push-access 的相关文档。此视频还介绍了一些很好的指导，说明当您 https://youtu.be/7Mr_pQc_rxA 长时间运行的后台任务时，如何使用 Vaadin 构建高性能 UI。

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