Websocket support
One of the most attractive features is JSF 2.3 added native web socket support, it means you can write real-time applications with JSF and no need extra effort.
To enable web socket support, you have to add javax.faces.ENABLE_WEBSOCKET_ENDPOINT in web.xml.
<context-param>
<param-name>javax.faces.ENABLE_WEBSOCKET_ENDPOINT</param-name>
<param-value>true</param-value>
</context-param>Hello WebSocket
Let's start with a simple example.
@ViewScoped
@Named("helloBean")
public class HelloBean implements Serializable {
private static final Logger LOG = Logger.getLogger(HelloBean.class.getName());
@Inject
@Push
PushContext helloChannel;
String message;
public void sendMessage() {
LOG.log(Level.INFO, "send push message");
this.sendPushMessage("hello");
}
private void sendPushMessage(Object message) {
helloChannel.send("" + message + " at " + LocalDateTime.now());
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public void sendMessage2() {
// log.log(Level.INFO, "send push message from input box::" + this.message);
this.sendPushMessage(this.message);
}
}In the backing bean, inject a PushContext with @Push qualifier.
The first button sends a fixed hello string, and the second button accepts user custom message.
sendMessage and sendMessage2 will call sendPushMessage which utilizes the injected pushContext to send messages to the defined channel.
In the facelets template, onmessage indicates which handlers(onMessage method) will be used when messages is coming from the specified channel(helloChannel).
onMessage method will add the message body from web socket channel and put it into the content of message block.
Run this application on Glassfish, open your browser and navigate to http://localhost:8080/jsf-websocket/hello.faces.
Try click first button or input some messages and click the second button, the response message from server side will be displayed.
Scope
f:websocket has an attribute scope which accepts application, session, or view as its value, it is not difficult to understand.
Another attribute user can be used for identifying different client users, it can be a user id or serializable object that stands for a user. It is useful to communicate with a specific user.
Create a backing bean.
To demonstrate different cases, we defined a series of PushContext in the backing bean.
Run the application on Glassfish, open your browser and navigate to http://localhost:8080/jsf-websocket/scope.faces.
Event
JSF 2.3 provides a WebsocketEvent, in the backend codes, you can observe it when it is opened (via CDI @Opened qualifier) or closed(via CDI @Closed qualifier).
Besides onmessage attribute of f:websocket, it also provides other two attributes onopen and onclose to listen the web socket connection when it is opened or closed. connected allow you set it disconnected by default, and use JSF built-in jsf.push.open() to connect to server side manually.
Create a simple backing bean.
The facelets template file:
When you run this application on Glassfish, open your browser and navigate to http://localhost:8080/jsf-websocket/event.faces.
You can see the logs in your browser console.
And the IDE console, you can see the log from WebsocketObserver.
Ajax
f:websocket can be bridged with f:ajax event attribute, and allow you trigger ajax event from web socket.
And facelets template.
In the backend codes, use pushContext send the f:ajax event name as content.
Another alternative here, use h:commandScript(newly added in JSF 2.3) with f:websocket instead, setonmessage handler as the name attribute of h:commandScript.
Run this application on Glassfish, open your browser and navigate to http://localhost:8080/jsf-websocket/ajax.faces.
Security
In JSF internally, JSF expose a default endpoint(/javax.faces.push/channelName) to serve the web socket connections. You can protect it as other web resources.
Source codes
Grab the source codes from my GitHub account, and have a try.
Last updated
Was this helpful?