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

【问题标题】：Nothing changes on the client side until server side processing is finished在服务器端处理完成之前，客户端没有任何变化
【发布时间】：2021-04-17 01:42:03
【问题描述】：

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

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

【问题讨论】：

标签： vaadin

【解决方案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。

【讨论】：

嗨，谢谢你的回答，解决了我的部分问题。但我的应用程序使用的是 vaadin 6.8.4。可以在上面实现push吗？仅针对一种需求进行升级可能不会获得批准，希望您理解。
Push 不是 Vaadin 6 中的功能，它是在 Vaadin 7.x 中期引入的。但是，Vaadin 6 有一些附加组件可以提供某种推送解决方案，例如 vaadin.com/directory/component/icepush 框架的最新版本中的推送功能要好得多。
注意，Vaadin 6.8.4 甚至不是最新的 Vaadin 6 系列，我建议升级到最新版本。另请注意，不再维护 Vaadin 6，因此没有新版本来修复错误或任何东西。
感谢@TatuLund，我使用了 vaadin 7，根据发布的答案，它可以完美运行