Vaadin Grid无法添加数据项：WebSocket自动更新报错求助

我来帮你排查下这个问题，从你给出的代码片段和描述来看，出错的核心原因主要集中在列表的可变性和Vaadin UI更新的线程安全这两个点上，下面一步步拆解解决：

1. 首先修复列表初始化的问题 #

你用Arrays.asList(...)初始化trades列表，但这个方法返回的是一个固定大小的不可变列表（它是Arrays的内部类，不支持add/remove等修改操作）。当你尝试向这个列表添加新的Trade对象时，必然会抛出UnsupportedOperationException，这应该是堆栈错误里的第一个问题。

解决方法：把列表换成可变的ArrayList：

trades = new ArrayList<>(Arrays.asList(Trade.newTrade(1,...)));

2. 确保Grid的数据绑定支持自动刷新 #

如果你的Grid直接绑定的是普通List，当列表内容变化时，Grid并不会自动感知到变更。你需要使用Vaadin提供的支持数据变更通知的数据源：

• 如果你用的是Vaadin 8及以下：可以用BeanItemContainer来包装你的Trade列表，容器会自动监听数据变化并通知Grid刷新。
• 如果你用的是Vaadin 10+：使用ListDataProvider，它可以和ArrayList配合，当列表修改后调用refreshAll()或者refreshItem()来通知Grid更新。

举个Vaadin 8的示例：

// 初始化容器和Grid
BeanItemContainer<Trade> container = new BeanItemContainer<>(Trade.class, trades);
Grid<Trade> tradeGrid = new Grid<>(Trade.class);
tradeGrid.setContainerDataSource(container);
vertmain.addComponent(tradeGrid);

3. 保证WebSocket推送时的UI线程安全 #

因为WebSocket的消息是在非UI线程中接收的，直接修改UI组件或者数据源会导致并发问题，甚至抛出异常。你需要通过UI.access()方法来包裹UI更新的代码，确保操作在UI线程中执行：

@Override
public void receiveBroadcast(String message) {
    // 解析message为Trade对象
    Trade newTrade = parseTradeFromMessage(message);
    
    // 用access()确保在UI线程中更新
    access(() -> {
        trades.add(newTrade);
        // 如果用BeanItemContainer，添加元素到容器
        container.addBean(newTrade);
        // 如果用ListDataProvider，刷新数据
        // dataProvider.refreshAll();
    });
}

完整修正后的代码片段 #

@Push
public class MyUI extends UI implements Broadcaster.BroadcastListener {
    VerticalLayout vertmain;
    List<Trade> trades;
    BeanItemContainer<Trade> tradeContainer; // Vaadin 8用这个，Vaadin 10+用ListDataProvider

    @Override
    protected void init(VaadinRequest request) {
        vertmain = new VerticalLayout();
        vertmain.addComponent(new Label("start"));
        
        // 初始化可变列表
        trades = new ArrayList<>(Arrays.asList(Trade.newTrade(1, ...)));
        // 初始化数据容器
        tradeContainer = new BeanItemContainer<>(Trade.class, trades);
        
        // 创建并配置Grid
        Grid<Trade> tradeGrid = new Grid<>(Trade.class);
        tradeGrid.setContainerDataSource(tradeContainer);
        vertmain.addComponent(tradeGrid);
        
        setContent(vertmain);
        
        // 注册广播监听
        Broadcaster.register(this);
    }

    @Override
    public void receiveBroadcast(String message) {
        // 假设你已经实现了从message解析Trade的方法
        Trade newTrade = parseTrade(message);
        
        // 在UI线程中更新数据和Grid
        access(() -> {
            trades.add(newTrade);
            tradeContainer.addBean(newTrade);
            // 如果需要滚动到最新行，可以加上
            tradeGrid.scrollToEnd();
        });
    }

    // 解析消息为Trade的方法，根据你的实际实现补充
    private Trade parseTrade(String message) {
        // 这里写你的解析逻辑，比如JSON转对象等
        return Trade.newTrade(...);
    }

    @Override
    public void detach() {
        // 移除监听，防止内存泄漏
        Broadcaster.unregister(this);
        super.detach();
    }
}

额外注意点 #

• 确保你的Trade类有正确的getter方法，Grid需要通过getter来读取属性值。
• 如果使用Vaadin 10+，建议用Grid<Trade> grid = new Grid<>(Trade.class);然后grid.setItems(trades);，但要注意每次更新后调用grid.getDataProvider().refreshAll();或者用ObservableList来自动触发刷新。
• 记得在UI detach时取消Broadcaster的注册，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Nick Friskel