Skip to content

Spring Boot Kafka Websocket notification to ReactJS front-end

Notifications You must be signed in to change notification settings

vballada/react-cloud-synoptic

Repository files navigation

react-cloud-synoptic

This project is a proof of concept testing the Spring Cloud Stream capabilites combined with WebSockets to push real time information from a microservice to a web client application. This is the early stage to build a real time dashboard (synoptic) where events are pushed from the microservice to the front-end.

ReactJS will be used for the front-end part.

synoptic-service

This Spring Boot microservice hosts the source sending events through the streams binded thanks to Spring Cloud Stream:

@InboundChannelAdapter(Source.OUTPUT)
public SynopticEvent sendEvent() {
	return new GenericSynopticEvent("Event " + System.currentTimeMillis());
}

synoptic-client

This is the client part, it receives the event on the inbound channel, and forwards it to a STOMP WebSocket:

@EnableBinding(Sink.class)
public class SynopticEventSink {

	/**
	 * Websocket Messaging Template
	 */
	private final SimpMessagingTemplate websocket;

	/**
	 * @param websocket
	 *            Autowired Websocket Messaging Template
	 */
	@Autowired
	public SynopticEventSink(SimpMessagingTemplate websocket) {
		this.websocket = websocket;
	}

	/**
	 * Receive an event and forwarding to a web client with a websocket
	 * 
	 * @param event
	 *            The receveid event from the synoptic-service source
	 */
	@StreamListener(Sink.INPUT)
	public void receive(SynopticEvent event) {
		websocket.convertAndSend("/topic/synop", event);
	}
}

Running the demo

  • First, you will need a kafka broker running somewhere, for instance in a Docker container:

$ docker run -p 2181:2181 -p 9092:9092 --env ADVERTISED_HOST=localhost --env ADVERTISED_PORT=9092 spotify/kafka

  • Launch the SynopticServiceApplication (running on port 8090),

  • Launch the SynopticClientApplication (running on port 8080).

  • You can see the streamed events at http://localhost:8080

Running the demo within Docker

You can deploy docker images for synoptic-client and synoptic-service as Dockerfiles are provided, use the docker-compose.yml file to launch the following within your Docker engine:


$ docker-compose up

About

Spring Boot Kafka Websocket notification to ReactJS front-end

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published