WebLogic 12c (12.1.2) has support for WebSockets. ADF 12c runs on WebLogic 12c. Therefore, we should be able to leverage that WebSockets support in an ADF application. And indeed we can, as this article describes. It will explain the creation of a simple application – the SlidePresenter – that allows users to select an image from a carousel. As soon as they make the selection, all currently connected clients are synchronized, showing the same slide:
The application uses a WebSocket endpoint – an object that acts as the server end for web socket connections. Each browser session connects to the end point and starts a new websocket connection. Whenever a slide is selected, the WebSocket endpoint is informed (on the server side) and broadcasts the slide selection to all connected clients. A brief demo of what this looks like is shown here:
The application also support an automatic slideshow: one user starts the slideshow by pushing a button. This causes a scheduled future to be instantiated in the server that fires every 3 seconds to advance the slideshow. After two minutes, the show will finish.
The application can be downloaded under Resources. It runs in JDeveloper 12.1.2 on the integrated WebLogic Server.
Steps for creating this application:
1. Create a new ADF Fusion Web Application.
2. Add the WebLogic 12.1 API library to the ViewController project (it contains the WebSocket related objects)
4. Create the WebSocket endpoint – the Java Class that acts as a WebSocket server
The class SocketMediator extends WebSocketAdapter (that in turn implements WebSocketListener). The annotation
is added to have the WebLogic container create a WebSocket endpoint – accessible at ws://host:port//web-context-root/mediatorendpoint .
The class implements several methods – onOpen, onMessage – but the only one that matters for this example is the broadcast method. This method is invoked with a string and will go on to send that string as message to all WebSocket clients that currently have open connections with the server:
This method is used to broadcast the slide selection.
5. Create the ImageManager class
This class is the brains of the applications. It contains a list of the images to be presented, it handles slide selection events (and broadcasts them through the SocketMediator) as well as start-slide-show-events.
6. Create the JSF page – as a facelet for example
It has some simple layout components – including the carousel for the images and the popup window to display the selected slide:
Sends an event to the server. The event is called processImageSelectEvent and it is processed by a serverListener on the carousel. This listener is associated with the processImageSelection method on the ImageManager bean that we saw before. The name of the selected image is taken from the clientAttribute imageSource and passed as payload in the server event.
locates the popup, sets the source of the image component and brings up the popup.
The button to start the slideshow:
sends a server event through/to the serverListener defined on the button that is associated with the slideShow method on the ImageManager bean. This method creates the Scheduled Future that will start after 3 seconds, change the slide selection every three seconds and stop after 2 minutes.
7. Add the images to the application:
8. Run the application.
Open the application in multiple browser clients. Select a slide in one browser and see it popping up in the other browsers. Start the slideshow and see all slides popping up in all browser windows, perfectly synchronized. Notice that there is no hourglass or ever present load indication on your tab. WebSocket is true background, asynchronous interaction, independent of HTTP connections between browser and server.
Source code in GitHub repository: https://github.com/lucasjellema/ADF12c-WebSockets-SlidePresenterDemo .
Download JDeveloper 12.1.2 Application: PushyOnSockets.
Oracle Documentation: Using WebSockets in WebLogic Server – http://docs.oracle.com/middleware/1212/wls/WLPRG/websockets_sse.htm