-
Notifications
You must be signed in to change notification settings - Fork 91
Real‐Time Push Notifications Using WebSocket
This guide explains how to set up real-time push notifications in a JSF/PrimeFaces application using WebSocket, without relying on p:poll. By following these steps, you will be able to push messages from the server to the browser efficiently.
- Java EE 7 or higher
- JSF 2.2 or higher
- PrimeFaces 6.2 or higher
- A web server that supports WebSockets (e.g., Payara, TomEE)
Create a WebSocket server endpoint in your JSF application.
Create a new class named WebSocketEndpoint in your project.
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
@ServerEndpoint("/websocket")
public class WebSocketEndpoint {
private static final CopyOnWriteArraySet<Session> sessions = new CopyOnWriteArraySet<>();
@OnOpen
public void onOpen(Session session) {
sessions.add(session);
}
@OnClose
public void onClose(Session session) {
sessions.remove(session);
}
@OnMessage
public void onMessage(String message, Session session) {
// Handle incoming messages if necessary
}
public static void sendMessage(String message) {
for (Session session : sessions) {
if (session.isOpen()) {
try {
session.getBasicRemote().sendText(message);
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}Add a WebSocket client in your XHTML page using JavaScript.
Edit your XHTML page to include the WebSocket client script.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>WebSocket Example</title>
<h:outputScript>
var websocket = new WebSocket('ws://' + window.location.host + '/yourApp/websocket');
websocket.onmessage = function(event) {
// Handle incoming messages and update the UI accordingly
alert('Received message: ' + event.data);
// You can also update the PrimeFaces components here
};
websocket.onclose = function() {
console.log('WebSocket connection closed');
};
</h:outputScript>
</h:head>
<h:body>
<h:form id="form">
<!-- Your PrimeFaces components here -->
</h:form>
</h:body>
</html>Send messages to the WebSocket client from your server-side code.
Create a managed bean to handle message sending.
import javax.enterprise.context.ApplicationScoped;
import javax.inject.Named;
@Named
@ApplicationScoped
public class MessageBean {
public void sendMessageToClient(String message) {
WebSocketEndpoint.sendMessage(message);
}
}Invoke the sendMessageToClient method from your business logic whenever you want to push a message to the client.
import javax.inject.Inject;
public class SomeService {
@Inject
private MessageBean messageBean;
public void someBusinessMethod() {
// Your business logic here
messageBean.sendMessageToClient("Hello, this is a push notification!");
}
}By following these steps, you have set up real-time push notifications in your JSF/PrimeFaces application using WebSocket. This approach provides a more efficient way to push messages from the server to the client compared to using p:poll.