Spring Boot is a microservice-based Java framework used to create web application. WebSocket API is an advanced technology that provides full-duplex communication channels over a single TCP connection. This article explains about how to implement WebSocket using Spring Boot.

WebSocket implementation with Spring Boot

<a href="https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#boot-documentation" target="_blank" rel="noopener">Spring Boot</a> is a microservice-based Java framework used to create web application. It provides radically faster and widely accessible getting-started experience for the development along with ready to use non functional features. It is licensed under Apache License 2.0.
WebSocket
The WebSocket API is an advanced technology that provides full-duplex communication channels over a single TCP connection. The WebSocket protocol was standardized by the IETF as RFC 6455 in 2011, and the WebSocket API in Web IDL is being standardized by the W3C.
It will be persistent connection to send and receive messages quickly between client and server without much overhead.It can be used for Chat Applications, Long Polling Applications, Multi-player Game Applications, Send live Analytics data.
Getting Started
In this article we will create a spring boot application using Maven and send some sample messages from client and server and receive vice versa. Create pom.xml with following dependencies inside the project dir
<pre class="language-bash"><code>mkdir springwebsocket

cd springwebocket</code></pre>
&nbsp;
In the pom.xml, we need to keep spring boot starter parent to create a spring boot project. We would require spring boot starter web for having the http endpoints. It will initially do a handshake on the http endpoints and then web socket protocol is used for future communications. Websocket related dependency are also added for sending and receiving the message in the back end.
Also spring boot maven plugin to make compile and executable jar.
&nbsp;
<pre class="language-markup"><code> &lt;?xml version="1.0" encoding="UTF-8"?&gt;
 &lt;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 https://maven.apache.org/xsd/maven-4.0.0.xsd"&gt;
 &lt;modelVersion&gt;4.0.0&lt;/modelVersion&gt;
 &lt;groupId&gt;com.nagappan&lt;/groupId&gt;
 &lt;artifactId&gt;springwebsocket&lt;/artifactId&gt;
 &lt;version&gt;0.0.1-SNAPSHOT&lt;/version&gt;
 &lt;parent&gt;
 &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
 &lt;artifactId&gt;spring-boot-starter-parent&lt;/artifactId&gt;
 &lt;version&gt;2.2.5.RELEASE&lt;/version&gt;
 &lt;/parent&gt;
 &lt;licenses&gt;
 &lt;license/&gt;
 &lt;/licenses&gt;
 &lt;!-- Additional lines to be added here... --&gt;
 &lt;dependencies&gt;
 &lt;dependency&gt;
 &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
 &lt;artifactId&gt;spring-boot-starter-web&lt;/artifactId&gt;
 &lt;/dependency&gt;
 &lt;dependency&gt;
 &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
 &lt;artifactId&gt;spring-boot-starter-websocket&lt;/artifactId&gt;
 &lt;/dependency&gt;
 &lt;/dependencies&gt;
 &lt;!-- Package as an executable jar --&gt;
 &lt;build&gt;
 &lt;plugins&gt;
 &lt;plugin&gt;
 &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
 &lt;artifactId&gt;spring-boot-maven-plugin&lt;/artifactId&gt;
 &lt;/plugin&gt;
 &lt;/plugins&gt;
 &lt;/build&gt;
&lt;/project&gt;</code></pre>
&nbsp;
Now we will create the spring boot application starter in the main class using <code>SpringApplication.run(classname)</code>. This will create the spring web context with the tomcat as embedded server container.
<pre class="language-java"><code> @RestController
 @EnableAutoConfiguration
 @ComponentScan(basePackages= {"com.nagappan.springwebsocket"})
 public class SpringWebsocket {

 @RequestMapping("/")
 public String home() {
 return "hello world";
 }

 public static void main(String args[]) {
 SpringApplication.run(SpringWebsocket.class, args);
 }
 }</code></pre>
 Component package scan has been added for the configuration of those packages automatically. We will now create websocket endpoint ("/my-websocket-endpoint") and register handler for the endpoint with websockethandler registry. The handler should be a sub class extended from WebSocketHandler.
<pre class="language-java"><code> @Configuration
 @EnableWebSocket
 public class WebSocketConfiguration implements WebSocketConfigurer {

 @Bean
 public WebSocketHandler myMessageHandler() {
 return new MyMessageHandler();
 }

 @Override
 public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
 System.out.println("websocket endpoint handler");
 registry.addHandler(myMessageHandler(), "/my-websocket-endpoint");
 }
 }</code></pre>
&nbsp;
The <code>MyMessageHandler</code> is responsible to send and receive text messages so we need to extend the handler from <code>TextWebSocketHandler</code> which has listeners for Connection establishment, Closing connections and Handling text messages. Once the connection is established it sends a message to client "You are now connected to the server. This is the first message".
<pre class="language-java"><code> public class MyMessageHandler extends TextWebSocketHandler {

 @Override
 public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
 
 System.out.println("web socket has been closed");
 }

 @Override
 public void afterConnectionEstablished(WebSocketSession session) throws Exception {
 /* The WebSocket has been opened
 I might save this session object so that I can send messages to it outside of this method
 Let's send the first message */ 
 System.out.println("web socket connection established");
 session.sendMessage(new TextMessage("You are now connected to the server. This is the first message."));
 }

 @Override
 protected void handleTextMessage(WebSocketSession session, TextMessage textMessage) throws Exception {
 
 System.out.println("Message received: " + textMessage.getPayload());
 }

}</code></pre>
&nbsp;
Client can now connect to websocket with WebSocket Javascript API. Javascript websocket API has event handlers for socket open and message handler. Create a websocket and connect to the websocket endpoint (<code>/my-websocket-endpoint</code>).
When client connection is establised, In Server <code>afterConnectionEstablished</code> function will get called and it will send message "You are now connected to the server. This is the first message." to the client.
In this example, an input field is provided where user enters the message which will received by the server and it sends back the message to the client. Server will receive the data in <code>handleTextMessage</code> function and it will send the same text back to the client. Client <code>socket.onmessage</code> handler will receive message from the server.
<pre class="language-html"><code> &lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;Spring web socket tutorial&lt;/title&gt;
 &lt;script&gt;
 var socket = new WebSocket('ws://' + window.location.host + '/my-websocket-endpoint');

 &lt;!-- Add an event listener for when a connection is open --&gt;
 socket.onopen = function() {

 console.log('WebSocket connection opened. Ready to send messages.');

 &lt;!-- Send a message to the server --&gt;

 socket.send('Hello, from WebSocket client!');

 };

 &lt;!-- Add an event listener for when a message is received from the server --&gt;
 socket.onmessage = function(message) {
 console.log('Message received from server: ');
 console.log(message);
 document.getElementById("displaymsg").innerText += "\n" + message.data;
 };

 function sendbtn() {
 let textmsg = document.getElementById("msgtext").value;
 console.log("goint to send message");
 console.log(textmsg);
 socket.send(textmsg);
 }

 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;input id="msgtext" type="text"&gt;&lt;/input&gt;
 &lt;button onclick="sendbtn()"&gt;Send&lt;/button&gt;

 &lt;h1&gt;Messages received from server&lt;/h1&gt;
 &lt;div style="border-style: solid; border-width: 2px;"&gt;
 &lt;label id="displaymsg"&gt;&lt;/label&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;</code></pre>
 Start the application using "<code>mvn spring-boot:run</code>". Then web client ui show all the message send to server in the below label html element.
&nbsp;
<img src="https://assets.blackslate.io/posts/01/xED32dGdaVBohD2.png" alt="Websocket implementation using spring boot" width="750">
&nbsp;
Reference:
Source code : <a href="https://github.com/nagappan080810/springwebsockets" target="_blank" rel="noopener">https://github.com/nagappan080810/springwebsockets</a>

Newsletter

Related Articles

Suggested keywords:

Newsletter

Related Articles