> For the complete documentation index, see [llms.txt](https://hantsy.gitbook.io/java-ee-8-by-example/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hantsy.gitbook.io/java-ee-8-by-example/jsf/jsf-websocket.md).
# 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*.
```markup
javax.faces.ENABLE_WEBSOCKET_ENDPOINTtrue
```
## Hello WebSocket
Let's start with a simple example.
```java
@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.
```markup
JSF 2.3: Websocket Sample
JSF 2.3: Hello Websocket
Input text is :: #{helloBean.message}
```
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 .
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.
```java
@ViewScoped
@Named("scopeBean")
public class ScopeBean implements Serializable {
private static final Logger LOG = Logger.getLogger(ScopeBean.class.getName());
@Inject
@Push
PushContext applicationChannel;
@Inject
@Push
PushContext sessionChannel;
@Inject
@Push
PushContext viewChannel;
@Inject
@Push
PushContext userChannel;
public void pushToApplicationChannel() {
applicationChannel.send("sent to applicationChannel at ::" + LocalDateTime.now());
}
public void pushToSessionChannel() {
sessionChannel.send("sent to sessionChannel at ::" + LocalDateTime.now());
}
public void pushToViewChannel() {
viewChannel.send("sent to viewChannel at ::" + LocalDateTime.now());
}
public void pushToUserChannel() {
userChannel.send("sent to userChannel at ::" + LocalDateTime.now(), "user");
}
public void pushToMultiUsersChannel() {
userChannel.send("sent to userChannel at ::" + LocalDateTime.now(), Arrays.asList("user", "hantsy"));
}
}
```
To demonstrate different cases, we defined a series of `PushContext` in the backing bean.
```markup
JSF 2.3: Websocket Sample
JSF 2.3: Websocket Scopes
```
Run the application on Glassfish, open your browser and navigate to .
## 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).
```java
@ApplicationScoped
public class WebsocketObserver {
@Inject
Logger LOG;
public void onOpen(@Observes @Opened WebsocketEvent opened) {
LOG.log(Level.INFO, "event opend::{0}", opened);
}
public void onClose(@Observes @Closed WebsocketEvent closed) {
LOG.log(Level.INFO, "event closed::{0}", closed);
}
}
```
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.
```java
@ViewScoped
@Named("eventBean")
public class EventBean implements Serializable {
private static final Logger LOG = Logger.getLogger(EventBean.class.getName());
@Inject
@Push
PushContext eventChannel;
public void sendMessage() {
eventChannel.send("event message was sent at::" + LocalDateTime.now());
}
}
```
The facelets template file:
```markup
JSF 2.3: Websocket Sample
JSF 2.3: Websocket Events
```
When you run this application on Glassfish, open your browser and navigate to .
You can see the logs in your browser console.
And the IDE console, you can see the log from `WebsocketObserver`.
```
Info: event opend::WebsocketEvent[channel=eventChannel, user=null, closeCode=null]
...
Info: event closed::WebsocketEvent[channel=eventChannel, user=null, closeCode=NORMAL_CLOSURE]
```
## Ajax
`f:websocket` can be bridged with `f:ajax` event attribute, and allow you trigger ajax event from web socket.
```java
@ViewScoped
@Named("ajaxBean")
public class AjaxBean implements Serializable {
private static final Logger LOG = Logger.getLogger(AjaxBean.class.getName());
@Inject
@Push
PushContext ajaxChannel;
@Inject
@Push
PushContext ajaxListenerChannel;
@Inject
@Push
PushContext commandScriptChannel;
private List messages = new ArrayList<>();
public void ajaxPushed(AjaxBehaviorEvent e) throws AbortProcessingException{
LOG.log(Level.INFO, "ajax pushed: " + e.toString());
messages.add("ajaxListenerEvent is sent at: " + LocalDateTime.now());
}
public void commandScriptExecuted() {
LOG.log(Level.INFO, "commandScriptExecuted pushed.");
messages.add("commandScriptExecuted message is sent at: " + LocalDateTime.now());
}
public void pushToAjaxChannel() {
messages.add("ajaxEvent is sent at: " + LocalDateTime.now());
ajaxChannel.send("ajaxEvent");
}
public void pushToAjaxListenerChannel(){
ajaxListenerChannel.send("ajaxListenerEvent");
}
public void pushToCommandScriptChannel() {
commandScriptChannel.send("onCommandScript");
}
public List getMessages() {
return messages;
}
public void setMessages(List messages) {
this.messages = messages;
}
}
```
And facelets template.
```markup
JSF 2.3: Websocket Sample
JSF 2.3: Websocket and Ajax
#{m}
```
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, set`onmessage` handler as the name attribute of `h:commandScript`.
Run this application on Glassfish, open your browser and navigate to .
## 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.
```markup
Restrict access to role USER./user/*/javax.faces.push/fooUSER
```
## Source codes
Grab the [source codes](https://github.com/hantsy/ee8-sandbox) from my GitHub account, and have a try.