Noob To Master Logonoob to master
HOMEAUTHOR
Home / REST with Spring Boot

Building Real-Time Communication Using WebSocket with Spring Boot

In today's fast-paced digital world, real-time communication has become a crucial feature for many applications. Whether it's a chat application, a collaborative editor, or a live data dashboard, the ability to instantly push updates to clients can greatly enhance the user experience. One popular technology for achieving this real-time communication is WebSocket.

WebSocket is a protocol that provides full-duplex communication channels over a single TCP connection. It allows both the server and the client to initiate communication, enabling instant and bidirectional data transfer. Compared to the traditional request-response model of HTTP, WebSocket offers a more efficient and low-latency solution for real-time applications.

In this article, we will explore how to build real-time communication using WebSocket with Spring Boot. Spring Boot is a popular Java framework that simplifies the development of web applications, including WebSocket-based ones. It provides excellent integration with the WebSocket protocol, making it easy to set up and use in your Spring Boot projects.

Setting up a WebSocket Server

To start building a real-time communication system with WebSocket, we need to set up a WebSocket server. In a Spring Boot application, this can be done by following a few simple steps:

  1. Add the necessary dependencies to your pom.xml file:
<dependencies>
    <!-- Other dependencies -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>
</dependencies>
  1. Create a new class annotated with @Configuration to configure WebSocket endpoints:
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myWebSocketHandler(), "/websocket").setAllowedOrigins("*");
    }

    @Bean
    public WebSocketHandler myWebSocketHandler() {
        return new MyWebSocketHandler();
    }
}

In the code above, we define a WebSocket endpoint /websocket and set the allowed origins to * (any origin). You can customize these values based on your requirements.

  1. Implement the MyWebSocketHandler class by extending TextWebSocketHandler:
public class MyWebSocketHandler extends TextWebSocketHandler {

    private final List<WebSocketSession> sessions = new CopyOnWriteArrayList<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) {
        sessions.add(session);
        // Handle connection established event
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // Handle text message received event
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) {
        sessions.remove(session);
        // Handle connection closed event
    }
}

In this handler, we maintain a list of active WebSocketSession instances to keep track of connected clients. We override the afterConnectionEstablished, handleTextMessage, and afterConnectionClosed methods to handle the corresponding WebSocket events. Feel free to add your application-specific logic to these methods.

  1. Run your Spring Boot application, and the WebSocket server will be up and running, ready to accept incoming WebSocket connections on the configured endpoint.

Connecting to the WebSocket Server

Once we have set up the WebSocket server, clients can connect to it and start sending and receiving real-time messages. WebSocket clients can be developed using various programming languages and frameworks. Here, we will demonstrate connecting to the WebSocket server using JavaScript.

<!DOCTYPE html>
<html>
<head>
    <!-- Import required JavaScript libraries -->
    <script src="/webjars/stomp-websocket/stomp.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script>
        // Create a new WebSocket connection
        var socket = new WebSocket("ws://localhost:8080/websocket");

        // Function to handle messages received from the server
        socket.onmessage = function(event) {
            var message = JSON.parse(event.data);
            // Handle received message
        };

        // Function to send a message to the server
        function sendMessage() {
            var message = "Hello, Server!";
            socket.send(JSON.stringify(message));
        }
    </script>
</head>
<body>
    <!-- Call the sendMessage function to send a test message -->
    <button onclick="sendMessage()">Send Message</button>
</body>
</html>

In the code above, we create a new WebSocket connection to ws://localhost:8080/websocket, which is the URL of the WebSocket server we set up earlier. We define an onmessage function to handle incoming messages from the server and a sendMessage function to send messages to the server. This basic example can be extended and customized based on your application's requirements.

Conclusion

WebSocket is a powerful technology that enables real-time communication between servers and clients. In this article, we explored how to build real-time communication using WebSocket with Spring Boot. We learned how to set up a WebSocket server in a Spring Boot application and how to connect to it using JavaScript as a client. By leveraging WebSocket's bidirectional and instant communication capabilities, you can develop interactive and responsive applications offering seamless real-time user experiences. So go ahead and start building your own real-time communication system with WebSocket and Spring Boot!

noob to master © copyleft