|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- ---
- title: Enabling Server Push
- order: 10
- layout: page
- ---
-
- [[enabling-server-push]]
- = Enabling server push
-
- The traditional way of communication between client and server in Vaadin
- has been through XHR, i.e. AJAX requests. The client does a request to
- the server with information about RPC method invocations, which are
- executed on the server. As a result the state of one or several
- components is updated and the changes are sent back as a response to the
- client. Vaadin 7.1 introduces a new way of doing communications using
- server push, which enables the server to push state changes to the
- client without a request initiated by the client.
-
- To create a push enabled application you start by creating a normal
- Vaadin 7 project using Eclipse or Maven. First you need to add the
- vaadin-push package to your project, so open pom.xml or ivy.xml and add
- a vaadin-push dependency, e.g. in Ivy
-
- [source,xml]
- ....
- <dependency org="com.vaadin" name="vaadin-push" rev="&vaadin.version;" conf="default->default" />
- ....
-
- and in Maven
-
- [source,xml]
- ....
- <dependency>
- <groupId>com.vaadin</groupId>
- <artifactId>vaadin-push</artifactId>
- <version>${vaadin.version}</version>
- </dependency>
- ....
-
- Open your UI class and add a @Push annotation to enable push for the ui
-
- [source,java]
- ....
- @Push
- public class PushTestUI extends UI {
- ...
- }
- ....
-
- If you are using a servlet 3.0 compatible server, open *web.xml* and
- enable asynchronous processing by adding a
- `<async-supported>true</async-supported>` tag.
-
- Your servlet definition should look something like this:
-
- [source,xml]
- ....
- <servlet>
- <servlet-name>MyServlet</servlet-name>
- <servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
- <init-param>
- <param-name>ui</param-name>
- <param-value>org.vaadin.example.MyUI</param-value>
- </init-param>
- <async-supported>true</async-supported>
- </servlet>
- ....
-
- Your application is now setup for push and will automatically push
- changes to the browser when needed. You can test it out using e.g. the
- following UI which only adds a Label and starts a thread which does the
- real initialization:
-
- [source,java]
- ....
- @Push
- public class PushTestUI extends UI {
-
- private VerticalLayout mainLayout;
-
- @Override
- protected void init(VaadinRequest request) {
- mainLayout = new VerticalLayout();
- mainLayout.setSizeFull();
- mainLayout.setMargin(true);
- setContent(mainLayout);
-
- mainLayout.setDefaultComponentAlignment(Alignment.MIDDLE_CENTER);
- Label loadingText = new Label("Loading UI, please wait...");
- loadingText.setSizeUndefined();
- mainLayout.addComponent(loadingText);
- new InitializerThread().start();
- }
-
- class InitializerThread extends Thread {
- @Override
- public void run() {
- // Do initialization which takes some time.
- // Here represented by a 1s sleep
- try {
- Thread.sleep(1000);
- } catch (InterruptedException e) {
- }
-
- // Init done, update the UI after doing locking
- access(new Runnable() {
- @Override
- public void run() {
- // Here the UI is locked and can be updated
- mainLayout.removeAllComponents();
- mainLayout
- .addComponent(new TextArea("This is the real UI"));
- }
- });
- }
- }
- }
- ....
-
- `InitializerThread` is a `Thread` which simulates some work using a
- sleep and then updates the UI with the real content. The UI update takes
- place inside an _access_ call, which ensures the UI (actually the
- `VaadinSession`) is locked to prevent synchronizations problems.
-
- Now deploy the application to your server and open the UI in a browser.
- You will see the "Loading..." text for roughly a second and when
- the initialization is complete, the Label will be replaced by a
- `TextArea`.
-
- The changes were automatically pushed to the browser when the
- _access_-block was done running. If you want full control on when
- changes are pushed to the client, add `@Push(PushMode.MANUAL)` instead and
- call `UI.push()` to push the changes (`UI.push()` needs to be called when
- the session is locked, so run that inside the _access_ block too).
-
- You can also configure push mode for the whole application using the
- `pushmode` servlet init parameter. Possible values are `automatic`, `manual`
- and `disabled`.
-
- It is also possible to switch the push mode on the fly using
- `UI.getPushConfiguration().setPushMode()`.
|