Play Store Application link – Spring Boot in 13 steps – App on Google Play
This guide focuses on using WebSockets in Spring Boot for real-time communication, including setting up WebSocket endpoints, creating a simple chat application, and integrating WebSockets with STOMP for message broadcasting.
Github project link – https://github.com/kuldeep101990/Spring-Boot-WebSockets
Step 1: Setting Up a Spring Boot Project
Using Spring Initializr
- Visit https://start.spring.io/.
- Configure the project:
- Project: Maven
- Language: Java
- Spring Boot Version: 3.x.x
- Dependencies: Spring Web, Spring Boot DevTools, Spring WebSocket, Spring Messaging
- Click Generate to download the project ZIP and extract it.
Import into IDE
- Import the project into your favorite IDE (IntelliJ, Eclipse, etc.) as a Maven project.
Step 2: Enabling WebSocket Support
Enable WebSocket Configuration
Create a configuration class to enable WebSocket support:
package com.example.websocketdemo.config;
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.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/chat").withSockJS(); // WebSocket endpoint
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic"); // Enable simple broker for message broadcasting
registry.setApplicationDestinationPrefixes("/app"); // Prefix for sending messages
}
}
Step 3: Creating a Simple Chat Application
Chat Controller
Create a controller to handle WebSocket messages:
package com.example.websocketdemo.controller;
import com.example.websocketdemo.model.ChatMessage;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
@Controller
public class ChatController {
@MessageMapping("/sendMessage")
@SendTo("/topic/public") // Broadcast to all subscribers on "/topic/public"
public ChatMessage sendMessage(ChatMessage message) {
return message;
}
}
Chat Message Model
Create a simple model to represent the chat message:
package com.example.websocketdemo.model;
public class ChatMessage {
private String from;
private String text;
// Getters and Setters
public String getFrom() {
return from;
}
public void setFrom(String from) {
this.from = from;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}
Step 4: Frontend for WebSocket Communication
HTML and JavaScript for Chat UI
Create a simple HTML page to interact with the WebSocket:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat Application</title>
https://cdn.jsdelivr.net/npm/@stomp/stompjs
https://cdn.jsdelivr.net/npm/sockjs-client@1.5.1/dist/sockjs.min.js
</head>
<body>
<h2>Spring Boot WebSocket Chat</h2>
<div id="chat-room">
<div id="messages"></div>
<input type="text" id="message-input" placeholder="Enter message...">
<button id="send-button">Send</button>
</div>
<script>
var stompClient = null;
function connect() {
var socket = new SockJS('/chat');
stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
console.log('Connected: ' + frame);
stompClient.subscribe('/topic/public', function(response) {
showMessage(JSON.parse(response.body));
});
});
}
function sendMessage() {
var message = document.getElementById("message-input").value;
stompClient.send("/app/sendMessage", {}, JSON.stringify({'from': 'User', 'text': message}));
document.getElementById("message-input").value = "";
}
function showMessage(message) {
var messageElement = document.createElement('div');
messageElement.textContent = message.from + ": " + message.text;
document.getElementById("messages").appendChild(messageElement);
}
document.getElementById("send-button").addEventListener("click", sendMessage);
connect(); // Connect to WebSocket
</script>
</body>
</html>
Step 5: Running the Application
- Start the Spring Boot application.
- Open the HTML page in a web browser (you can serve it through Spring Boot or open it directly).
- Type a message in the input field and click “Send.”
- The message will be broadcast to all connected clients in real-time.
Step 6: Integrating WebSockets with STOMP for Message Broadcasting
In the previous steps, we already integrated STOMP with WebSockets. STOMP (Streaming Text Oriented Messaging Protocol) enables message broadcasting between clients. Here’s a brief summary:
- STOMP is used to send messages with destinations like
/app/sendMessageand/topic/public. - @MessageMapping is used to handle incoming messages sent by the client, and @SendTo broadcasts the message to all subscribers of a particular topic.
Conclusion
In this guide, we covered:
- Enabling WebSocket support in Spring Boot.
- Creating a simple chat application using WebSockets.
- Integrating WebSockets with STOMP for message broadcasting.
WebSockets and STOMP provide an efficient way to implement real-time communication, and this guide shows how to quickly get started with Spring Boot.