--- title: Server Push order: 16 layout: page --- [[advanced.push]] = 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 link:https://github.com/Atmosphere/atmosphere[Atmosphere framework] for client-server communication. [[advanced.push.installation]] == Installing the Push Support The server push support in Vaadin requires the separate Vaadin Push library. It is included in the installation package as [filename]#vaadin-push.jar#. [[advanced.push.installation.ivy]] === Retrieving with Ivy With Ivy, you can get it with the following declaration in the [filename]#ivy.xml#: [source, xml] ---- ---- In some servers, you may need to exlude a [literal]#++sl4j++# dependency as follows: [source, xml] ---- ---- Pay note that the Atmosphere library is a bundle, so if you retrieve the libraries with Ant, for example, you need to retrieve [literal]#++type="jar,bundle"++#. [[advanced.push.installation.maven]] === Retrieving with Maven In Maven, you can get the push library with the following dependency in the POM: [source, xml] ---- com.vaadin vaadin-push ${vaadin.version} ---- [[advanced.push.enabling]] == Enabling Push for a UI To enable server push, you need to define the push mode either in the deployment descriptor or with the [classname]#@Push# annotation for the UI. [[advanced.push.enabling.pushmode]] === Push Modes and Transports You can use server push in two modes: [literal]#++automatic++# and [literal]#++manual++#. The automatic mode pushes changes to the browser automatically after access() finishes. With the manual mode, you can do the push explicitly with [methodname]#push()#, which allows more flexibility. Sever push can use several transports: WebSockets, long polling, or combined WebSockets+XHR. [literal]#++WebSockets++# is the default transport. [[advanced.push.enabling.pushmode]] === The [classname]#@Push# annotation You can enable server push for a UI with the [classname]#@Push# annotation as follows. It defaults to automatic mode ( [parameter]#PushMode.AUTOMATIC#). [source, java] ---- @Push public class PushyUI extends UI { ---- To enable manual mode, you need to give the [parameter]#PushMode.MANUAL# parameter as follows: [source, java] ---- @Push(PushMode.MANUAL) public class PushyUI extends UI { ---- To use the long polling transport, you need to set the transport parameter as [parameter]#Transport.LONG_POLLING# as follows: [source, java] ---- @Push(transport=Transport.LONG_POLLING) public class PushyUI extends UI { ---- [[advanced.push.enabling.servlet]] === Servlet Configuration You can enable the server push and define the push mode also in the servlet configuration with the [parameter]#pushmode# parameter for the servlet in the [filename]#web.xml# deployment descriptor. If you use a Servlet 3.0 compatible server, you also want to enable asynchronous processing with the [literal]#++async-supported++# parameter. Note the use of Servlet 3.0 schema in the deployment descriptor. [subs="normal"] ---- <?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" version="**3.0**" xmlns="**http://java.sun.com/xml/ns/javaee**" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="**http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd**"> <servlet> <servlet-name>Pushy UI</servlet-name> <servlet-class> com.vaadin.server.VaadinServlet</servlet-class> <init-param> <param-name>UI</param-name> <param-value>**com.example.my.PushyUI**</param-value> </init-param>  <init-param> <param-name>pushmode</param-name> <param-value>**automatic**</param-value> </init-param> <async-supported>**true**</async-supported> </servlet> </web-app> ---- [[advanced.push.running]] == Accessing UI from Another Thread Making changes to a [classname]#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 [methodname]#access()# method, which locks the session to prevent conflicts. It takes a [interfacename]#Runnable# which it executes as its parameter. For example: [source, java] ---- ui.access(new Runnable() { @Override public void run() { series.add(new DataSeriesItem(x, y)); } }); ---- In Java 8, where a parameterless lambda expression creates a runnable, you could simply write: [source, java] ---- ui.access(() -> series.add(new DataSeriesItem(x, y))); ---- If the push mode is [literal]#++manual++#, you need to push the pending UI changes to the browser explicitly with the [methodname]#push()# method. [source, java] ---- ui.access(new Runnable() { @Override public void run() { series.add(new DataSeriesItem(x, y)); ui.push(); } }); ---- Below is a complete example of a case where we make UI changes from another thread. [source, java] ---- public class PushyUI extends UI { Chart chart = new Chart(ChartType.AREASPLINE); DataSeries series = new DataSeries(); @Override protected void init(VaadinRequest request) { chart.setSizeFull(); setContent(chart); // Prepare the data display Configuration conf = chart.getConfiguration(); conf.setTitle("Hot New Data"); conf.setSeries(series); // Start the data feed thread new FeederThread().start(); } class FeederThread extends Thread { int count = 0; @Override public void run() { try { // Update the data for a while while (count < 100) { Thread.sleep(1000); access(new Runnable() { @Override public void run() { double y = Math.random(); series.add( new DataSeriesItem(count++, y), true, count > 10); } }); } // Inform that we have stopped running access(new Runnable() { @Override public void run() { setContent(new Label("Done!")); } }); } catch (InterruptedException

/*!
 * jQuery UI Effects Drop @VERSION
 * https://jqueryui.com
 *
 * Copyright OpenJS Foundation and other contributors
 * Released under the MIT license.
 * https://jquery.org/license
 */

//>>label: Drop Effect
//>>group: Effects
//>>description: Moves an element in one direction and hides it at the same time.
//>>docs: https://api.jqueryui.com/drop-effect/
//>>demos: https://jqueryui.com/effect/

( function( factory ) {
	"use strict";

	if ( typeof define === "function" && define.amd ) {

		// AMD. Register as an anonymous module.
		define( [
			"jquery",
			"../version",
			"../effect"
		], factory );
	} else {

		// Browser globals
		factory( jQuery );
	}
} )( function( $ ) {
"use strict";

return $.effects.define( "drop", "hide", function( options, done ) {

	var distance,
		element = $( this ),
		mode = options.mode,
		show = mode === "show",
		direction = options.direction || "left",
		ref = ( direction === "up" || direction === "down" ) ? "top" : "left",
		motion = ( direction === "up" || direction === "left" ) ? "-=" : "+=",
		oppositeMotion = ( motion === "+=" ) ? "-=" : "+=",
		animation = {
			opacity: 0
		};

	$.effects.createPlaceholder( element );

	distance = options.distance ||
		element[ ref === "top" ? "outerHeight" : "outerWidth" ]( true ) / 2;

	animation[ ref ] = motion + distance;

	if ( show ) {
		element.css( animation );

		animation[ ref ] = oppositeMotion + distance;
		animation.opacity = 1;
	}

	// Animate
	element.animate( animation, {
		queue: false,
		duration: options.duration,
		easing: options.easing,
		complete: done
	} );
} );

} );