Using WebSocket to Build an Interactive Web Application in Spring Boot

WebSockets enable two-way communication over a single, persistent connection, allowing for real-time, bidirectional data exchange between the client and server. Unlike traditional HTTP, which is request-response based, WebSocket communication allows for real-time, bi-directional communication between the client and the server. This makes WebSockets ideal for applications requiring immediate data updates, such as chat applications, gaming, collaborative editing, and real-time notifications. In this article, we'll explore how to use WebSocket with Spring Boot to build an interactive web application.

WebSocket in Spring Boot

WebSocket communication in Spring Boot involves using @Controller annotated classes to handle WebSocket connections. The communication protocol is defined using mappings that match client-side connections to server-side message-handling methods. A message broker is often utilized to manage message routing between clients.

The WebSocket workflow typically looks like this:

• Client Connection: The client sends a connection request to the server using the WebSocket protocol.
• Server Handshake: The server responds with the WebSocket handshake response and establishes the connection.
• Message Exchange: Once connected, the client and server can send messages to each other in real-time.
• Connection Termination: Either party can terminate the connection.

Implementation of Using WebSocket to Build an Interactive Web Application in Spring Boot

We'll build a simple chat application using WebSocket in a Spring Boot project.

Step 1: Set Up the Spring Boot Project

1. Create a new Spring Boot project using IntelliJ IDEA with the following options:
   • Name:websocket-chat-app
   • Language: Java
   • Type: Maven
   • Packaging: Jar

Click on the Next button.

Step 2: Add Dependencies

Add the following dependencies into the Spring Boot project.

• WebSocket
• Spring Web
• Spring Boot DevTools
• Thymeleaf
• Lombok

Click on the Create button.

Project Structure

Once created the project, the file structure will look like the below image.

Step 3: Configure Application Properties

Add the following property to src/main/resources/application.properties:

spring.application.name=websocket-chat-app

Step 4: Configure WebSocket

Create the WebSocketConfig configuration class to register WebSocket endpoints:

WebSocketConfig.java

Explanation:

• @EnableWebSocketMessageBroker: Enables WebSocket message handling with a message broker.
• registerStompEndpoints(): Registers the /chat endpoint for WebSocket connections and supports SockJS as a fallback option.
• configureMessageBroker(): Configures the message broker to route messages based on the destination prefixes /topic and /app."

Step 5: Create the Message Model

Create the Message class to define the structure of the messages:

Message.java

Step 6: Create the ChatController to Handle Messages

Create the ChatController class to handle incoming messages and broadcast them to connected clients:

ChatController.java

Explanation:

• @MessageMapping("/chat.sendMessage"): Maps incoming messages to the /chat.sendMessage destination.
• @SendTo("/topic/public"): Sends the returned message to all subscribers of /topic/public.

Step 7: Main class

No changes are required in the main class.

Step 8: Create the Web Page for Chat

Create the chat.html page to provide a simple chat interface:

src/main/resources/templates/chat.html

Step 9: Create the Stylesheet

Create chat.css to style the chat application:

Step 10: Create the Chat JavaScript file

Create the chat JavaScript file and this script will manage the WebSocket connections and handling the sending/receiving messages.

src/main/resources/static/js/chat.js

Explanation:

• SockJS: The JavaScript library that provides the WebSocket-like object functionality.
• STOMP: The simple text-oriented messaging protocol and it often used with the WebSocket.
• connect(): It establishes the WebSocket connection to the /chat endpoint.
• sendMessage(): It sends the message to the server via the /app/chat.sendMessae endpoint.
• showMessage(): It display the received message in the chat box.

pom.xml file

Step 10: Run the Application

Once completed the project, it will start and run at port 8080. We can run the spring boot application using the IntelliJ IDEA or with the following Maven command.

mvn spring-boot:run

Output:

Step 11: Accessing the Chat Page

Open the web browser and navigate to the below URL.

http://localhost:8080/chat.html

Video Output:

Enter the message in the input box and click the send button. We should see the message appear in the chat box and it will also broadcast to the any other open connections of the chat application.