In this post, we'll be looking at how to build a chat application with Spring Boot and WebSockets.
WebSockets are a bi-directional, full-duplex, persistent connection between a web browser and a server. They allow for real-time communication between the two.
Spring Boot is a Java-based framework that makes it easy to create stand-alone, production-grade Spring-based applications.
We'll be using the Spring Initializr to set up our project. Go to https://start.spring.io/ and select the following:
Name the project "chat-application" and click "Generate Project."
Spring Boot will automatically configure the necessary dependencies for our project.
WebSockets are handled by a controller. In our project, we'll create a controller named ChatController.java
.
@Controller
public class ChatController {
@MessageMapping("/chat")
@SendTo("/topic/messages")
public String sendMessage(String message) {
return message;
}
}
The @MessageMapping
annotation maps a specific URL to the controller method. The @SendTo
annotation specifies the URL of the WebSocket server endpoint. The message is then broadcasted to all the clients connected to that endpoint.
In our HTML file, we'll add a form with an input field and a submit button. The form will POST to the /chat
endpoint.
<form action="/chat" th:action="@{/chat}" th:object="${message}" method="post">
<input type="text" th:field="*{text}"/>
<input type="submit" value="Send"/>
</form>
The input field is bound to the text
property of the message
object. When the form is submitted, the message
object is passed to the sendMessage
method of the ChatController
and the text
property is used as the message to be broadcasted.
We can use the SimpMessagingTemplate
to broadcast messages to a specific destination.
@Autowired
private SimpMessagingTemplate template;
@MessageMapping("/chat")
@SendTo("/topic/messages")
public String sendMessage(String message) {
this.template.convertAndSend("/topic/messages", message);
return message;
}
The convertAndSend
method converts the message to JSON and sends it to the specified destination.
We can use the @SubscribeMapping
annotation to map a specific URL to a method. The method will be invoked when a client subscribes to the URL.
@Controller
public class ChatController {
@Autowired
private SimpMessagingTemplate template;
@MessageMapping("/chat")
@SendTo("/topic/messages")
public String sendMessage(String message) {
this.template.convertAndSend("/topic/messages", message);
return message;
}
@SubscribeMapping("/topic/messages")
public List<String> subscribe() {
List<String> messages = new ArrayList<>();
messages.add("Hello");
messages.add("Welcome");
return messages;
}
}
The subscribe
method returns a list of messages that will be sent to the client when it subscribes to the /topic/messages
destination.
We can test our application by running it and going to http://localhost:8080/. We should see the form and the list of messages.
We can also open the browser's developer tools and go to the Network tab. We should see the WebSocket connection being established.
In this post, we've seen how to build a chat application with Spring Boot and WebSockets.