Routing Kafka messages to browser over web socket

There might be real time update use case in various applications wherein the messages received on the server side Kafka receiver topic needs to be propagated to the front end without refreshing the page.

Instead of client(ex: browser) polling for updates(ex: Ajax client call or API GET call) to fetch the server side updates and display on the page, the server can instead push the updates as and when it has any to the client using the push mechanism in the form of Web socket messaging.

An example project demonstrating the flow of receiving Kafka message on a topic and sending it to web client using web socket is located in GitHub at the following location:

https://github.com/amitdhodi/notification-service.git

Explanation of major code components of the project is as follows:

Step 1: Web socket configuration:

@EnableWebSocketMessageBroker annotation is added to @Configuration class to enable broker-backed messaging over WebSocket

enableSimpleBroker() enables a simple memory-based message broker to carry the Kafka messages back to the client on destinations prefixed with “/topic”

registerStompEndpoints() enables STOMP support and registers stomp endpoints at “/websocket”. Doing so, all the web socket messages will be channelised through STOMP

https://github.com/amitdhodi/notification-service/blob/master/src/main/java/com/example/notification/websocket/WebSocketConfig.java

Step2: Server receives Kafka message and pushes it to client:

@StreamListener annotation marks the method processMessage to be a listener on topic “inbound”. Any incoming message on “inbound” topic would invoke method processMessage

SimpMessagingTemplate uses the spring-messaging library to send message to destination ‘/topic/pushNotification’, which is where stomp web socket client is listening for messages

https://github.com/amitdhodi/notification-service/blob/master/src/main/java/com/example/notification/kafka/Listener.java

Step3: Client subscribes and receives the message:

SockJS(from sockjs-client library) and Stomp(from stomp-websocket library) allows us to open a connection to ‘/websocket’, which is where SockJS server is waiting for connections

StompClient subscribes to ‘/topic/pushNotification’, which is where our server message broker would push the message to

https://github.com/amitdhodi/notification-service/blob/master/src/main/resources/static/js/index.js

Real time push notification screenshots:

1. Once the application is up and running, browser shows an empty text area

2. Push JSON message to “inbound” Kafka topic using Kafka Tool

3. Kafka message gets pushed to browser and gets displayed inside the text area on browser

That’s all needed to display incoming Kafka messages on browser without refreshing the page. Hope it was useful.