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

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

我正在编辑一个大型 vaadin Web 应用程序的一个上传页面，其中的要求基本上是上传文件并保存其内容。当它是一个小文件时，没有 UX 问题，但对于有 100 万行（当前生产平均值）的大文件，UX 体验非常糟糕，至少没有任何诸如“正在处理...请稍候”之类的文字。刚刚在“保存按钮”中使用了 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 行。

无论我做什么，我都无法在插入开始之前使标签可见。 我什至尝试添加一个带有 msg 的 50x50 小窗口，但行为是相同的，窗口在处理后出现。 谷歌搜索后无法弄清楚这一点。欢迎任何概念/建议。谢谢！

解决方法

当您执行较长的后台处理任务时，最好在单独的线程上处理这些任务以避免阻塞主线程。然后，您可以使用 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。