Spring WebSocket

last modified October 18, 2023

Spring WebSocket tutorial shows how to work with WebSocket in a Spring web application.

Spring is a popular Java application framework for creating enterprise applications.

WebSocket

WebSocket is a computer communications protocol, providing full-duplex communication channels over a single TCP connection. WebSockets are used in highly interactive applications such as games, chats, or stock markets.

TextWebSocketHandler

Spring uses WebSocketHandler to handle WebSocket messages and lifecycle events. TextWebSocketHandler is a WebSocketHandler implementation which processes text messages.

Spring TextWebSocketHandler example

The following application uses TextWebSocketHandler to process text messages via WebSocket.

web.xml
src
├───main
│ ├───java
│ │ └───com
│ │ └───zetcode
│ │ ├───config
│ │ │ MyWebInitializer.java
│ │ │ WebConfig.java
│ │ │ WebSocketConfig.java
│ │ └───handler
│ │ MyWebSocketHandler.java
│ ├───resources
│ └───webapp
│ │ index.html
│ └───WEB-INF
└───test
 └───java

This is the project structure.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>com.zetcode</groupId>
 <artifactId>textwebsocketex</artifactId>
 <version>1.0-SNAPSHOT</version>
 <packaging>war</packaging>
 <properties>
 <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
 <maven.compiler.source>17</maven.compiler.source>
 <maven.compiler.target>17</maven.compiler.target>
 <spring-version>5.3.23</spring-version>
 </properties>
 <dependencies>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-webmvc</artifactId>
 <version>${spring-version}</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-websocket</artifactId>
 <version>${spring-version}</version>
 </dependency>
 <dependency>
 <groupId>javax.servlet</groupId>
 <artifactId>javax.servlet-api</artifactId>
 <version>4.0.1</version>
 <scope>provided</scope>
 </dependency>
 </dependencies>
 <build>
 <plugins>
 <plugin>
 <groupId>org.apache.maven.plugins</groupId>
 <artifactId>maven-war-plugin</artifactId>
 <version>3.3.2</version>
 </plugin>
 <plugin>
 <groupId>org.eclipse.jetty</groupId>
 <artifactId>jetty-maven-plugin</artifactId>
 <version>9.4.49.v20220914</version>
 </plugin>
 </plugins>
 </build>
</project>

In the pom.xml file we have the following dependencies: spring-webmvc, javax.servlet-api, and spring-websocket.

package com.zetcode.config;
import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;
public class MyWebInitializer extends
 AbstractAnnotationConfigDispatcherServletInitializer {
 @Override
 protected Class<?>[] getRootConfigClasses() {
 return null;
 }
 @Override
 protected Class<?>[] getServletConfigClasses() {
 return new Class[]{WebConfig.class, WebSocketConfig.class};
 }
 @Override
 protected String[] getServletMappings() {
 return new String[]{"/"};
 }
}

MyWebInitializer initializes Spring web application. It provides two configuration classes: WebConfig and WebSocket.

package com.zetcode.config;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.DefaultServletHandlerConfigurer;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
@EnableWebMvc
@ComponentScan("com.zetcode")
public class WebConfig implements WebMvcConfigurer {
 @Override
 public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
 configurer.enable();
 }
}

The WebConfig configures the DefaultServlet. In our application, we have a static index.html page, which is processed by the DefaultServlet.

package com.zetcode.config;
import com.zetcode.handler.MyWebSocketHandler;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
 @Autowired
 private MyWebSocketHandler myWebSocketHandler;
 @Override
 public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
 registry.addHandler(myWebSocketHandler, "/socketHandler");
 }
}

WebSocketConfig configures WebSocket in a Spring web application with @EnableWebSocket.

@Autowired
private MyWebSocketHandler myWebSocketHandler;

We inject our MyWebSocketHandler. It is registered with registerWebSocketHandlers.

package com.zetcode.handler;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import java.time.LocalTime;
@Component
public class MyWebSocketHandler extends TextWebSocketHandler {
 @Override
 protected void handleTextMessage(WebSocketSession session, TextMessage message)
 throws Exception {
 var clientMessage = message.getPayload();
 if (clientMessage.startsWith("hello") || clientMessage.startsWith("greet")) {
 session.sendMessage(new TextMessage("Hello there!"));
 } else if (clientMessage.startsWith("time")) {
 var currentTime = LocalTime.now();
 session.sendMessage(new TextMessage(currentTime.toString()));
 } else {
 session.sendMessage(new TextMessage("Unknown command"));
 }
 }
}

In the MyWebSocketHandler, we react to the socket messages.

var clientMessage = message.getPayload();

With the getPayLoad method, we get the client message.

if (clientMessage.startsWith("hello") || clientMessage.startsWith("greet")) {
 session.sendMessage(new TextMessage("Hello there!"));
} else if (clientMessage.startsWith("time")) {
 var currentTime = LocalTime.now();
 session.sendMessage(new TextMessage(currentTime.toString()));
} else {
 session.sendMessage(new TextMessage("Unknown command"));
}

Depending on the message, we send a TextMessage back to the client.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Home page</title>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css"
 rel="stylesheet">
</head>
<body>
<div class="ui container">
 <h1>Spring MVC 5 WebSocket</h1>
 <div class="two column grid">
 <div class="row">
 <div class="column">
 <label for="myMessage">Message</label>
 </div>
 <div class="column">
 <div class="ui input">
 <input type="text" id="myMessage">
 </div>
 </div>
 </div>
 <div class="row">
 <div class="column">
 <label for="output">Response from Server</label>
 </div>
 <div class="column">
 <textarea rows="8" cols="50" id="output" readonly="readonly"></textarea>
 </div>
 </div>
 <div class="row">
 <button class="ui button" onclick="send()">Send</button>
 </div>
 </div>
</div>
<script>
 const socketConn = new WebSocket('ws://localhost:8080/socketHandler');
 function send() {
 const clientMsg = document.getElementById('myMessage');
 if (clientMsg.value) {
 socketConn.send(clientMsg.value);
 }
 }
 socketConn.onmessage = (e) => {
 const output = document.getElementById('output');
 output.value += `${e.data}\n`;
 }
</script>
</body>
</html>

The index.html contains a client interface to the application.

const socketConn = new WebSocket('ws://localhost:8080/socketHandler');

In JavaScript, we create a socket connection.

function send() {
 const clientMsg = document.getElementById('myMessage');
 if (clientMsg.value) {
 socketConn.send(clientMsg.value);
 }
}

Upon button click, we send a text message with send.

socketConn.onmessage = (e) => {
 const output = document.getElementById('output');
 output.value += `${e.data}\n`;
}

The onmessage event handler is called upon receiving a response. We get the response data and add it to the text area.

In this article we have created a simple Spring web application with support for WebSocket.

Author

My name is Jan Bodnar, and I am a passionate programmer with extensive programming experience. I have been writing programming articles since 2007. To date, I have authored over 1,400 articles and 8 e-books. I possess more than ten years of experience in teaching programming.

List all Spring tutorials.