Creating Collaborative Views

This section describes to use server push to create a view where changes made by one user is immediately shown to all users. See Server Push Configuration for an overall description on what server push means and how to configure your application to use server push.

Broadcasting messages to be pushed to UIs in other user sessions requires some sort of message-passing mechanism that sends the messages to all UIs that are registered as recipients. As processing server requests for different UIs is done concurrently in different threads of the application server, locking the data structures properly is very important to avoid deadlock situations.

The Broadcaster

The standard pattern for sending messages to other users is to use a broadcaster singleton that registers recipients and broadcasts messages to them safely. To avoid deadlocks, it is recommended that the messages should be sent through a message queue in a separate thread. Using a Java ExecutorService running a single thread is usually the easiest and safest way. The methods in the class are defined as synchronized to prevent race conditions.

Java

  1. public class Broadcaster {
  2. static Executor executor = Executors.newSingleThreadExecutor();
  3. static LinkedList<Consumer<String>> listeners = new LinkedList<>();
  4. public static synchronized Registration register(
  5. Consumer<String> listener) {
  6. listeners.add(listener);
  7. return () -> {
  8. synchronized (Broadcaster.class) {
  9. listeners.remove(listener);
  10. }
  11. };
  12. }
  13. public static synchronized void broadcast(String message) {
  14. for (Consumer<String> listener : listeners) {
  15. executor.execute(() -> listener.accept(message));
  16. }
  17. }
  18. }

Receiving Broadcasts

The receivers need register a consumer to the broadcaster to receive the broadcasts. The registration should be removed when the component is no longer attached. When updating the UI in a receiver, it should be done safely by executing the update through the access() method of the UI, as described in Asynchronous Updates.

Java

  1. @Push
  2. @Route("broadcaster")
  3. public class BroadcasterView extends Div {
  4. VerticalLayout messages = new VerticalLayout();
  5. Registration broadcasterRegistration;
  6. // Creating the UI shown separately
  7. @Override
  8. protected void onAttach(AttachEvent attachEvent) {
  9. UI ui = attachEvent.getUI();
  10. broadcasterRegistration = Broadcaster.register(newMessage -> {
  11. ui.access(() -> messages.add(new Span(newMessage)));
  12. });
  13. }
  14. @Override
  15. protected void onDetach(DetachEvent detachEvent) {
  16. broadcasterRegistration.remove();
  17. broadcasterRegistration = null;
  18. }
  19. }

Sending Broadcasts

To send broadcasts with a broadcaster singleton, such as the one described above, you would only need to call the broadcast() method as follows.

Java

  1. public BroadcasterView() {
  2. TextField message = new TextField();
  3. Button send = new Button("Send", e -> {
  4. Broadcaster.broadcast(message.getValue());
  5. message.setValue("");
  6. });
  7. HorizontalLayout sendBar = new HorizontalLayout(message, send);
  8. add(sendBar, messages);
  9. }