In modern web applications, real-time communication between the server and clients is becoming increasingly important. Traditional HTTP request-response communication is not suitable for scenarios where data needs to be pushed from the server to clients in real-time. This is where WebSocket comes into play. WebSocket is a protocol that provides full-duplex communication channels over a single TCP connection, allowing for bi-directional data flow between the server and clients.
Spring Boot provides excellent support for WebSocket through its spring-websocket module. In this blog post, we'll explore how to build a real-time notification system using WebSocket in a Spring Boot application.
Prerequisites
Before we dive in, ensure you have the following:
- Basic knowledge of Spring Boot and Java
- Understanding of the WebSocket protocol
- Familiarity with front-end technologies like JavaScript and HTML
Setting Up the Spring Boot Application
1. Add Dependencies
First, create a new Spring Boot project or add the following dependencies to your existing pom.xml:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
2. Enable WebSocket Support
Enable WebSocket support by adding the @EnableWebSocketMessageBroker annotation to your main application class or a dedicated configuration class.
Creating the WebSocket Configuration
1. Define WebSocket Configuration
Create a configuration class to set up WebSocket:
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/websocket").withSockJS();
}
}
2. Explanation
-
@EnableWebSocketMessageBrokerenables WebSocket message handling. -
setApplicationDestinationPrefixesmaps incoming messages to@MessageMappingmethods. -
enableSimpleBrokersets up an in-memory message broker.
Implementing the WebSocket Handler
1. Create a Message Controller
Create a controller to handle incoming WebSocket messages:
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
@Controller
public class NotificationController {
@MessageMapping("/send")
@SendTo("/topic/notifications")
public String sendNotification(String message) {
return message;
}
}
2. Explanation
-
@MessageMapping("/send")maps to/app/send. -
@SendTo("/topic/notifications")sends the message to/topic/notifications.
Sending Notifications
1. Inject SimpMessagingTemplate
Inject SimpMessagingTemplate to send messages:
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Service;
@Service
public class NotificationService {
@Autowired
private SimpMessagingTemplate template;
public void sendNotification(String message) {
template.convertAndSend("/topic/notifications", message);
}
}
2. Explanation
-
convertAndSendsends a message to the specified destination.
Building the Front-End
1. Create HTML File
Create an HTML file with a WebSocket connection:
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Notifications</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.1/sockjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>
<div id="notifications"></div>
<script>
var socket = new SockJS('/websocket');
var stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
stompClient.subscribe('/topic/notifications', function(notification) {
var notifications = document.getElementById('notifications');
var message = document.createElement('p');
message.appendChild(document.createTextNode(notification.body));
notifications.appendChild(message);
});
});
</script>
</body>
</html>
2. Explanation
- Connect to the WebSocket endpoint.
- Subscribe to
/topic/notifications. - Display received messages in the browser.
Example Implementation
Here is a complete example implementation with the server-side and client-side components we discussed.
Server-Side Code
WebSocketConfig.java
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/websocket").withSockJS();
}
}
NotificationController.java
@Controller
public class NotificationController {
@MessageMapping("/send")
@SendTo("/topic/notifications")
public String sendNotification(String message) {
return message;
}
}
NotificationService.java
@Service
public class NotificationService {
@Autowired
private SimpMessagingTemplate template;
public void sendNotification(String message) {
template.convertAndSend("/topic/notifications", message);
}
}
Client-Side Code
index.html
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Notifications</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.1/sockjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>
<div id="notifications"></div>
<script>
var socket = new SockJS('/websocket');
var stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
stompClient.subscribe('/topic/notifications', function(notification) {
var notifications = document.getElementById('notifications');
var message = document.createElement('p');
message.appendChild(document.createTextNode(notification.body));
notifications.appendChild(message);
});
});
</script>
</body>
</html>
Conclusion
In this blog post, we learned how to implement real-time notifications using WebSocket in a Spring Boot application. We covered the setup, configuration, and implementation of the server-side and client-side components. WebSocket provides a powerful mechanism for real-time communication, enabling applications to deliver timely and relevant notifications to users.
By following this guide, you can create a robust real-time notification system that enhances user experience and engagement in your web applications.
Top comments (1)
how to use of external html pages like reactjs,angular etc............... its working only for internal static file in springboot project