image - 推送图像 Vaadin Java

Question

我正在尝试在 Vaadin-Java 中创建回合制纸牌游戏，到目前为止一切进展顺利，但我在将 Vaadin 图像推送到其他 UI 时遇到问题。我确实从 Vaadin 文档中复制了 Broadcast/BroadcasterView 类，它按预期工作，但不适用于图像。

public class Broadcaster {
    static Executor executor = Executors.newSingleThreadExecutor();

    static LinkedList<Consumer<String>> listeners = new LinkedList<>();

    public static synchronized Registration register(
            Consumer<String> listener) {
        listeners.add(listener);

        return () -> {
            synchronized (Broadcaster.class) {
                listeners.remove(listener);
            }
        };
    }

    public static synchronized void broadcast(String message) {
        for (Consumer<String> listener : listeners) {
            executor.execute(() -> listener.accept(message));
        }
    }
}

@Push
@Route("broadcaster")
public class BroadcasterView extends Div {
    VerticalLayout messages = new VerticalLayout();
    Registration broadcasterRegistration;

    // Creating the UI shown separately

    @Override
    protected void onAttach(AttachEvent attachEvent) {
        UI ui = attachEvent.getUI();
        broadcasterRegistration = Broadcaster.register(newMessage -> {
            ui.access(() -> messages.add(new Span(newMessage)));
        });
    }

    @Override
    protected void onDetach(DetachEvent detachEvent) {
        broadcasterRegistration.remove();
        broadcasterRegistration = null;
    }
}

public BroadcasterView() {
    TextField message = new TextField();
    Button send = new Button("Send", e -> {
        Broadcaster.broadcast(message.getValue());
        message.setValue("");
    });

    HorizontalLayout sendBar = new HorizontalLayout(message, send);

    add(sendBar, messages);
}

上面的代码适用于字符串、Vaadin 图标等，但是当我替换 for 并自然更改广播方法时，没有任何反应。

我在整个互联网上搜索了解决方案，但似乎人们不需要推送图像，或者这里根本不可能。我认为这可能是有效负载的问题，但即使对于 5px x 5px 图像也不起作用

也许您遇到过这样的问题并找到了解决方案？

Answer 1

您需要通过广播公司传递数据，但是您所写的有关尝试的内容让我怀疑您一直在尝试传递UI组件(即com.vaadin.flow.component.html.Image)。这是行不通的，因为 UI 组件实例无法同时附加到多个位置(即本例中的多个浏览器窗口)。

您可以尝试通过广播公司传递数据(例如带有图像 URL 的字符串)，然后让每个订阅者根据收到的数据创建自己的 Image 组件。