Server-Sent Event (SSE) Chat Application using Spring Boot and React Js

Hello and Namaste !

Hope everything is alright !

Server-Sent Event (SSE) is a technology that enables server to push data via stream of generated events, allowing clients subscribed to that event to receive data in real-time (whenever server pushes data to that event). Once the initial connection with server is established, client will not have to request server to receive updated data. Server can send data to client anytime.

SSE uses traditional HTTP, only has one-way communication (server to client) and is much simpler to implement.

SSE can be used in simple use cases such as weather updates, forex updates, etc. where two-way communications are not involved.

Web API called EventSource interface powers SSE.

Source: https://javascript.info/server-sent-events

WebSocket adds a bit of complexity but has a wide extensibility.

Check out my other story for WebSocket Implementation:
Real Time Application using WebSocket (Spring Boot (JAVA), React.Js, Flutter)

This story briefly explains a demo project; Chat Application built using SSE in Spring Boot (Server) and React.js (Client).

Demo Project Communication Flow Diagram

Few things to know about this project:

1. Two way communication is achieved by HTTP post request. Client communicates with Server via HTTP post request.
2. There is no use of database. Data are just stored in variables. Once server is stopped or restarted, all the data will be lost.
3. This project is solely for demo; showcase use of SSE. There are always better ways to do stuff.
4. Project design is based on Neumorphism UI.

Prerequisites for Spring Boot Application (Server):

We need Spring WebFlux dependency.
I recommend using ≥ Spring Boot 2.6.x.

implementation 'org.springframework.boot:spring-boot-starter-webflux'

Spring WebFlux, reactive-stack web framework was introduced in Spring 5 (Spring Framework).

For more: https://docs.spring.io/spring-framework/docs/current/reference/html/web-reactive.html

Prerequisites for React.js Application (Client):

Any JS application can use EventSource API without use of any new dependencies.

We have to make sure that our browser supports EventSource API:
https://developer.mozilla.org/en-US/docs/Web/API/EventSource#browser_compatibility

Spring Boot Application (Server)

We do not have reactive database implemented in our application. If it was implemented, we would receive changes from reactive database and send updates to Client.

In our case, we have used built-in method from Flux (provided by Spring Webflux) that push in data to event at specified time interval.

Here, in every second, updated “users” list is published to “user-list-event”.

Spring WebFlux internally uses Project Reactor and its publisher implementations, Flux and Mono.

Spring WebFlux has support annotation-based configuration allowing reactive REST controller to be similar to traditional REST controller.

React.js Application (Client)

Our demo project uses React Hooks. All of our event source APIs (connection, listening to event, error handling) are used inside Effect Hook.

Github repo:
https://github.com/umes4ever/sse-implementation

If your application is not working in Mobile browser, please use IP address in ServerUrl instead of localhost.

Happy Learning !