Server Push

When you need to update a UI from another UI, possibly of another user, or from a background thread running in the server, you usually want to have the update show immediately, not when the browser happens to make the next server request. For this purpose, you can use server push that sends the data to the browser immediately. Push is based on a client-server connection, usually a WebSocket connection, that the client establishes and the server can then use to send updates to the client.

The server-client communication is done by default with a WebSocket connection if the browser and the server support it. If not, Vaadin will fall back to a method supported by the browser. Vaadin Push uses a custom build of the Atmosphere framework for client-server communication.

Installing the Push Support

The server push support in Vaadin requires the separate Vaadin Push library. It is included in the installation package as vaadin-push.jar.

Retrieving with Ivy

With Ivy, you can get it with the following declaration in the ivy.xml:

XML

  1. <dependency org="com.vaadin" name="vaadin-push"
  2.             rev="&vaadin.version;" conf="default->default"/>

In some servers, you may need to exlude a sl4j dependency as follows:

XML

  1. <dependency org="com.vaadin" name="vaadin-push"
  2.             rev="&vaadin.version;" conf="default->default">
  3.     <exclude org="org.slf4j" name="slf4j-api"/>
  4. </dependency>

Pay note that the Atmosphere library is a bundle, so if you retrieve the libraries with Ant, for example, you need to retrieve type=”jar,bundle”.

Retrieving with Maven

In Maven, you can get the push library with the following dependency in the POM:

XML

  1. <dependency>
  2.     <groupId>com.vaadin</groupId>
  3.     <artifactId>vaadin-push</artifactId>
  4.     <version>${vaadin.version}</version>
  5. </dependency>

Enabling Push for a UI

To enable server push, you need to define the push mode either in the deployment descriptor or with the @Push annotation for the UI.

Push Modes and Transports

You can use server push in two modes: automatic and manual. The automatic mode pushes changes to the browser automatically after access() finishes. With the manual mode, you can do the push explicitly with push(), which allows more flexibility.

Sever push can use several transports: WebSockets, long polling, or combined WebSockets+XHR. WebSockets is the default transport.

The @Push annotation

You can enable server push for a UI with the @Push annotation as follows. It defaults to automatic mode ( PushMode.AUTOMATIC).

Java

  1. @Push
  2. public class PushyUI extends UI {

To enable manual mode, you need to give the PushMode.MANUAL parameter as follows:

Java

  1. @Push(PushMode.MANUAL)
  2. public class PushyUI extends UI {

To use the long polling transport, you need to set the transport parameter as Transport.LONG_POLLING as follows:

Java

  1. @Push(transport=Transport.LONG_POLLING)
  2. public class PushyUI extends UI {

Servlet Configuration

You can enable the server push and define the push mode also in the servlet configuration with the pushmode parameter for the servlet in the web.xml deployment descriptor. If you use a Servlet 3.0 compatible server, you also want to enable asynchronous processing with the async-supported parameter. Note the use of Servlet 3.0 schema in the deployment descriptor.

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app
  3.   id="WebApp_ID" version="3.0"
  4.   xmlns="http://java.sun.com/xml/ns/javaee"
  5.   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  6.   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  7.   <servlet>
  8.     <servlet-name>Pushy UI</servlet-name>
  9.     <servlet-class>
  10.         com.vaadin.server.VaadinServlet</servlet-class>
  12.     <init-param>
  13.         <param-name>UI</param-name>
  14.         <param-value>com.example.my.PushyUI</param-value>
  15.     </init-param>
  17.     <!-- Enable server push -->
  18.     <init-param>
  19.       <param-name>pushmode</param-name>
  20.       <param-value>automatic</param-value>
  21.     </init-param>
  22.     <async-supported>true</async-supported>
  23.   </servlet>
  24. </web-app>

Accessing UI from Another Thread

Making changes to a UI object from another thread and pushing them to the browser requires locking the user session when accessing the UI. 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 a Runnable which it executes as its parameter.

For example:

Java

  1. ui.access(new Runnable() {
  2.     @Override
  3.     public void run() {
  4.         series.add(new DataSeriesItem(x, y));
  5.     }
  6. });

In Java 8, where a parameterless lambda expression creates a runnable, you could simply write:

Java

  1. ui.access(() ->
  2.         series.add(new DataSeriesItem(x, y)));

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(new Runnable() {
  2.     @Override
  3.     public void run() {
  4.         series.add(new DataSeriesItem(x, y));
  5.         ui.push();
  6.     }
  7. });

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

Java

  1. public class PushyUI extends UI {
  2.     Chart chart = new Chart(ChartType.AREASPLINE);
  3.     DataSeries series = new DataSeries();
  5.     @Override
  6.     protected void init(VaadinRequest request) {
  7.         chart.setSizeFull();
  8.         setContent(chart);
  10.         // Prepare the data display
  11.         Configuration conf = chart.getConfiguration();
  12.         conf.setTitle("Hot New Data");
  13.         conf.setSeries(series);
  15.         // Start the data feed thread
  16.         new FeederThread().start();
  17.     }
  19.     class FeederThread extends Thread {
  20.         int count = 0;
  22.         @Override
  23.         public void run() {
  24.             try {
  25.                 // Update the data for a while
  26.                 while (count < 100) {
  27.                     Thread.sleep(1000);
  29.                     access(new Runnable() {
  30.                         @Override
  31.                         public void run() {
  32.                             double y = Math.random();
  33.                             series.add(
  34.                                 new DataSeriesItem(count++, y),
  35.                                 true, count > 10);
  36.                         }
  37.                     });
  38.                 }
  40.                 // Inform that we have stopped running
  41.                 access(new Runnable() {
  42.                     @Override
  43.                     public void run() {
  44.                         setContent(new Label("Done!"));
  45.                     }
  46.                 });
  47.             } catch (InterruptedException e) {
  48.                 e.printStackTrace();
  49.             }
  50.         }
  51.     }
  52. }

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

Broadcasting to Other Users

Broadcasting messages to be pushed to UIs in other user sessions requires having some sort of message-passing mechanism that sends the messages to all UIs that register as recipients. As processing server requests for different UIs is done concurrently in different threads of the application server, locking the threads 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 the UIs 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 in a single thread is usually the easiest and safest way.

Java

  1. public class Broadcaster implements Serializable {
  2.     static ExecutorService executorService =
  3.         Executors.newSingleThreadExecutor();
  5.     public interface BroadcastListener {
  6.         void receiveBroadcast(String message);
  7.     }
  9.     private static WeakHashMap<BroadcastListener, Object> listeners =
  10.         new WeakHashMap<BroadcastListener, Object>();
  12.     public static synchronized void register(
  13.             BroadcastListener listener) {
  14.         listeners.put(listener, null);
  15.     }
  17.     public static synchronized void unregister(
  18.             BroadcastListener listener) {
  19.         listeners.remove(listener);
  20.     }
  22.     public static synchronized void broadcast(
  23.             final String message) {
  24.         for (final BroadcastListener listener: listeners.keySet())
  25.             executorService.execute(new Runnable() {
  26.                 @Override
  27.                 public void run() {
  28.                     listener.receiveBroadcast(message);
  29.                 }
  30.             });
  31.     }
  32. }

In Java 8, you could use lambda expressions for the listeners instead of the interface, and a parameterless expression to create the runnable:

Java

  1. for (final Consumer<String> listener: listeners)
  2.     executorService.execute(() ->
  3.             listener.accept(message));

Receiving Broadcasts

The receivers need to implement the receiver interface and register to the broadcaster to receive the broadcasts. A listener should be unregistered when the UI expires. When updating the UI in a receiver, it should be done safely as described earlier, by executing the update through the access() method of the UI.

Java

  1. @Push
  2. public class PushAroundUI extends UI
  3.        implements Broadcaster.BroadcastListener {
  5.     VerticalLayout messages = new VerticalLayout();
  7.     @Override
  8.     protected void init(VaadinRequest request) {
  9.         ... build the UI ...
  11.         // Register to receive broadcasts
  12.         Broadcaster.register(this);
  13.     }
  15.     // Must also unregister when the UI expires
  16.     @Override
  17.     public void detach() {
  18.         Broadcaster.unregister(this);
  19.         super.detach();
  20.     }
  22.     @Override
  23.     public void receiveBroadcast(final String message) {
  24.         // Must lock the session to execute logic safely
  25.         access(new Runnable() {
  26.             @Override
  27.             public void run() {
  28.                 // Show it somehow
  29.                 messages.addComponent(new Label(message));
  30.             }
  31.         });
  32.     }
  33. }

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. final TextField input = new TextField();
  2. sendBar.addComponent(input);
  4. Button send = new Button("Send");
  5. send.addClickListener(new ClickListener() {
  6.     @Override
  7.     public void buttonClick(ClickEvent event) {
  8.         // Broadcast the message
  9.         Broadcaster.broadcast(input.getValue());
  11.         input.setValue("");
  12.     }
  13. });