Asynchronous Updates

This section describes to use server push from your application code. See Server Push Configuration for an overall description on what server push means and how to configure your application to use server push.

Making changes to a UI from another thread and pushing them to the browser requires locking the user session. Otherwise, the UI update done from another thread could conflict with a regular event-driven update and cause either data corruption or deadlocks. Because of this, you may only access an UI using the access() method, which locks the session to prevent conflicts. It takes as parameter a Command to execute while the session is locked.

For example:

Java

  1. ui.access(new Command() {
  2.     @Override
  3.     public void execute() {
  4.         statusLabel.setText(statusText);
  5.     }
  6. });

You also use a simple lambda expression to define your access command.

Java

  1. ui.access(() -> statusLabel.setText(statusText));

If the push mode is manual, you need to push the pending UI changes to the browser explicitly with the push() method.

Java

  1. ui.access(() -> {
  2.     statusLabel.setText(statusText);
  3.     ui.push();
  4. });

Below is a complete example of a case where we make UI changes from another thread.

Java

  1. @Push
  2. @Route("push")
  3. public class PushyView extends VerticalLayout {
  4.     private FeederThread thread;
  6.     @Override
  7.     protected void onAttach(AttachEvent attachEvent) {
  8.         add(new Span("Waiting for updates"));
  10.         // Start the data feed thread
  11.         thread = new FeederThread(attachEvent.getUI(), this);
  12.         thread.start();
  13.     }
  15.     @Override
  16.     protected void onDetach(DetachEvent detachEvent) {
  17.         // Cleanup
  18.         thread.interrupt();
  19.         thread = null;
  20.     }
  22.     private static class FeederThread extends Thread {
  23.         private final UI ui;
  24.         private final PushyView view;
  26.         private int count = 0;
  28.         public FeederThread(UI ui, PushyView view) {
  29.             this.ui = ui;
  30.             this.view = view;
  31.         }
  33.         @Override
  34.         public void run() {
  35.             try {
  36.                 // Update the data for a while
  37.                 while (count < 10) {
  38.                     // Sleep to emulate background work
  39.                     Thread.sleep(500);
  40.                     String message = "This is update " + count++;
  42.                     ui.access(() -> view.add(new Span(message)));
  43.                 }
  45.                 // Inform that we are done
  46.                 ui.access(() -> {
  47.                     view.add(new Span("Done updating"));
  48.                 });
  49.             } catch (InterruptedException e) {
  50.                 e.printStackTrace();
  51.             }
  52.         }
  53.     }
  54. }

When sharing data between UIs or user sessions, you need to consider the message-passing mechanism more carefully, as explained in Creating Collaborative Views.