Introduction
We have seen a popular choice for sending real time data from server to client in web application is using WebSocket in our previous tutorials Messaging with STOMP over WebSockets using Spring, Angular 8 and ActiveMQ and Spring Boot WebSocket Angular 8 Gradle Example.
WebSocket opens bidirectional connections between server and client. So both server and client can send messages.
Sometimes we face situations, where the application needs only one way communication, i.e., sending data from server to the client and for this Spring provides a simpler solution using Server Sent Events (SSE).
SSE is a technology that allows you to stream data from server to the browser (Push Notifications) within one HTTP connection in one direction.
For example, pushing stock price changes in real-time or showing progress of long-running process or real time showing of cricket or football scores on display board etc.
Browser Support
SSE are supported in most modern browsers. Only Microsoft’s IE and Edge browsers do not have a built in implementation.
But there is a way out because Server-Sent Events uses common HTTP connections and can therefore be implemented with the following libraries to support IE and Edge browsers.
https://github.com/remy/polyfills/blob/master/EventSource.js by Remy Sharp
https://github.com/rwldrn/jquery.eventsource by Rick Waldron
https://github.com/amvtek/EventSource by AmvTek
https://github.com/Yaffle/EventSource by Yaffle
Prerequisites
Eclipse 4.12, Java 12 or 8, Gradle 5.6, Spring Boot 2.1.8
Example with Source Code
In the following example we create a Spring Boot application that sends the random Java’s UUID message with timestamp as SSE to the client.
Ideally you would like to display some meaningful data to the client.
So you can always modify the code as per your requirements.
The client is a simple html page that displays these values.
Spring introduced support for Server Sent Events(SSE) with version 4.2 (Spring Boot 1.3).
Creating Gradle Project
First create a Gradle based spring boot project – spring-sse-push-notifications.
The build.gradle script is given with the following content.
buildscript {
ext {
springBootVersion = '2.1.8.RELEASE'
}
repositories {
mavenLocal()
mavenCentral()
}
dependencies {
classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
}
}
apply plugin: 'java'
apply plugin: 'org.springframework.boot'
sourceCompatibility = 12
targetCompatibility = 12
repositories {
mavenLocal()
mavenCentral()
}
dependencies {
implementation("org.springframework.boot:spring-boot-starter-web:${springBootVersion}")
}
Enabling Scheduler in Service Class
Once the project is created and build is done, create below a scheduled service that reads the greeting message every five seconds and creates an instance of the Notification class and publishes it with Spring’s event bus infrastructure.
You may change the fixed rate according to your application’s requirements.
package com.roytuts.spring.sse.push.notification.service;
import java.io.IOException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.UUID;
import java.util.concurrent.CopyOnWriteArrayList;
import org.springframework.scheduling.annotation.Async;
import org.springframework.scheduling.annotation.EnableScheduling;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Service;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
@Service
@EnableScheduling
public class SsePushNotificationService {
final DateFormat DATE_FORMATTER = new SimpleDateFormat("dd-MM-yyyy hh:mm:ss a");
final List<SseEmitter> emitters = new CopyOnWriteArrayList<>();
public void addEmitter(final SseEmitter emitter) {
emitters.add(emitter);
}
public void removeEmitter(final SseEmitter emitter) {
emitters.remove(emitter);
}
@Async
@Scheduled(fixedRate = 5000)
public void doNotify() throws IOException {
List<SseEmitter> deadEmitters = new ArrayList<>();
emitters.forEach(emitter -> {
try {
emitter.send(SseEmitter.event()
.data(DATE_FORMATTER.format(new Date()) + " : " + UUID.randomUUID().toString()));
} catch (Exception e) {
deadEmitters.add(emitter);
}
});
emitters.removeAll(deadEmitters);
}
}
We are pushing data every 5 secs to the client.
Related Posts:
- Spring Asynchronous Execution using @Async
- Messaging with STOMP over WebSockets using Spring, Angular 8 and ActiveMQ
- Spring Boot WebSocket Angular 8 Gradle Example
Spring Rest Controller
Next we create a REST Controller class that handles the EventSource
GET request from the client.
The GET handler needs to return an instance of the class SseEmitter
.
Each client connection is represented with its own instance of SseEmitter
.
Spring does not give you tools to manage these SseEmitter
instances. In this application we store the emitters in a simple list(emitters) and add handlers to the emitter’s completion and timeout event to remove them from the list.
package com.roytuts.spring.sse.push.notification.controller;
import java.io.IOException;
import java.util.List;
import java.util.concurrent.CopyOnWriteArrayList;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import com.roytuts.spring.sse.push.notification.service.SsePushNotificationService;
@RestController
public class SsePushNotificationRestController {
@Autowired
SsePushNotificationService service;
final List<SseEmitter> emitters = new CopyOnWriteArrayList<>();
@GetMapping("/notification")
public ResponseEntity<SseEmitter> doNotify() throws InterruptedException, IOException {
final SseEmitter emitter = new SseEmitter();
service.addEmitter(emitter);
service.doNotify();
emitter.onCompletion(() -> service.removeEmitter(emitter));
emitter.onTimeout(() -> service.removeEmitter(emitter));
return new ResponseEntity<>(emitter, HttpStatus.OK);
}
}
Configuring application.properties
By default, Spring Boot with the embedded Tomcat server keeps the SSE HTTP connection open for 60 seconds. An application can change that with an entry to the application.properties
file
spring.mvc.async.request-timeout=-1 #-1 means infinity
Spring Boot Main Class
Create below main class to start up the application into embedded Tomcat server.
package com.roytuts.spring.sse.push.notification;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication(scanBasePackages = "com.roytuts.spring.sse.push.notification")
public class SpringSsePushNotificationApp {
public static void main(String[] args) {
SpringApplication.run(SpringSsePushNotificationApp.class, args);
}
}
Client Part – UI
The client opens the SSE connection with
const eventSource = new EventSource('http://localhost:9999/notification');
and registers a message listener that parses the JSON and sets the innerHTML of three dom elements to display the received data.
The whole HTML file with content is given below:
<!DOCTYPE html>
<html>
<head>
<title>Spring SSE Push Notifications</title>
<script>
function initialize() {
const eventSource = new EventSource('http://localhost:8080/notification');
eventSource.onmessage = e => {
const msg = e.data;
document.getElementById("greet").innerHTML = msg;
};
eventSource.onopen = e => console.log('open');
eventSource.onerror = e => {
if (e.readyState == EventSource.CLOSED) {
console.log('close');
}
else {
console.log(e);
}
};
eventSource.addEventListener('second', function(e) {
console.log('second', e.data);
}, false);
}
window.onload = initialize;
</script>
</head>
<body>
<div id="greet"></div>
</body>
</html>
Testing the Application
Now while you run the client file in any modern browsers like Chrome, Firefox etc. then you may face below problem
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource spring boot html
Adding CORS
To resolve this issue add @CrossOrigins(origins = "*")
to the REST controller class to allow from all host. If you want to restrict to a particular host, for example, http://www.example.com then you need to put as @CrossOrigins(origins = "http://www.example.com")
.
The revised REST controller class is given as:
package com.roytuts.spring.sse.push.notification.controller;
import java.io.IOException;
import java.util.List;
import java.util.concurrent.CopyOnWriteArrayList;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import com.roytuts.spring.sse.push.notification.service.SsePushNotificationService;
@RestController
@CrossOrigin(origins = "*")
public class SsePushNotificationRestController {
@Autowired
SsePushNotificationService service;
final List<SseEmitter> emitters = new CopyOnWriteArrayList<>();
@GetMapping("/notification")
public ResponseEntity<SseEmitter> doNotify() throws InterruptedException, IOException {
final SseEmitter emitter = new SseEmitter();
service.addEmitter(emitter);
service.doNotify();
emitter.onCompletion(() -> service.removeEmitter(emitter));
emitter.onTimeout(() -> service.removeEmitter(emitter));
return new ResponseEntity<>(emitter, HttpStatus.OK);
}
}
Refresh the client file in browser, you will get uninterrupted message being displayed.
That’s all. Hope you got an idea on Server Sent Events with Spring example.
Source Code
Thanks for reading.
It s realy helpful. Thank you
Thankyou for the awesome post. Helped.
I am getting compile time error of send is not not found in emitter(NotificationService) !
I have just copy pasted your code though also it’s not working.
do you have the exact version of dependencies in build file?
Hello,
I’m getting all the time ” GET http://localhost:9999/notification net::ERR_CONNECTION_REFUSED ”
Do you know why?
Thank you very much for solution, i want to mention i had problem with class name
spring has similar file CorsFilter, so just append file name
Thank you nice tutorial, it helped me to understand better SSE
I had couple of errors which google had a fixed like timeout or 406 error
You can go pass easily Cross issue in simply adding @CrossOrigin on the controller by the way :)
I had none of the issue of the previous comments.
I am getting http 406 error. Can you please share how did you fix that?
I am getting this error “org.springframework.web.HttpMediaTypeNotAcceptableException: Could not find acceptable representation”. Antoine can help?
trying adding
spring.mvc.async.request-timeout=-1
in your application.properties.
hello ,
I am getting GET http://localhost:8088/notification 403 () error in web browser’s console. I am using google chrome Version 68.0.3440.106 (Official Build) (64-bit).
When I hit ” http://localhost:8088/notification” on browser’s address bar I get “Invalid CORS request” written in page. So please let me know if I am missing any configuration.