# 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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://hantsy.gitbook.io/java-ee-8-by-example/jsf/jsf-websocket.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.