WebSocket – Create Spring WebSocket Application with SpringBoot + SockJS + STOMP

The WebSocket protocol provides new capability for web applications: full-duplex, two-way communication. So in the system where the client and server need to exchange data at high frequency and with low latency, WebSocket is the best solution. That is the reason for us to create a Spring WebSocket Application with JavaSampleApproach.

I. Spring WebSocket Application

1. Flow of messages

We create a Spring WebSocket Application with the below flow of messages:

spring websocket architecture - new ws

Detail explanations:
– WebSocket clients connect to the WebSocket endpoint at ‘/jsa-stomp-endpoint’
– Subscriptions to ‘/topic/hi’ pass through the response channel, then are forwarded to the In-memory broker (Simple Broker).
– User objects sent to ‘/jsa/hello’ pass through the request channel then are forwarded to the spring WebController. WebController will handle User objects by @MessageMapping and transform to Hello messages then use @SendTo returns the messages to ‘/topic/hi’ through the brokerChannel.

– The Simple Broker broadcasts messages to subscribers through the response channel.

2. Server side

In server side, we use SockJS and STOMP for our application.

What is SockJS?
-> SockJS lets applications use a WebSocket API but falls back to non-WebSocket alternatives when necessary at runtime, without the need to change application code.

Simple Java configuration to enable SockJS and Stomp in Spring application:

3. Client side

About client side, we uses {sockjs-client, stomp-websocket} libs for development:

– Make a connection:

The connect() function uses SockJS and stomp.js to open a connection to /jsa-stomp-endpoint, which is where our SockJS server is waiting for connections.

– Dis-Connection:

– Send messages:

II. Practice

0. Technologies

– Java 8
– Maven 3.6.1
– Spring Tool Suite: Version 3.8.4.RELEASE
– Spring Boot: 1.5.4.RELEASE
– Spring WebSocket
– SockJS
– Stomp
– JQuery
– Bootstrap

1. Server side
1.1 Create SpringBoot project

Using Spring Tool Suite to create a Spring Starter Project, then add dependencies:

1.2 Create models

Create 2 message models {User, Hello}

– User:

– Hello:

1.3 Configure SockJS and STOMP messaging

@EnableWebSocketMessageBroker is used to enable WebSocket message handling, backed by a message broker.
enableSimpleBroker() is used to enable a simple memory-based message broker.
registerStompEndpoints() is used to register the /jsa-stomp-endpoint endpoint, enabling SockJS fallback options – an alternate transports in case WebSocket is not available.

1.4 Create WebController

As above explanation, User objects are sent to /jsa/hello pass through the request channel then are forwarded to the Spring WebController.

WebController will handle User objects by @MessageMapping and transform to Hello messages then use @SendTo to return the messages to ‘/topic/hi’ through the brokerChannel.

2. Client side
2.1 Create index.html

2.2 Implement WebSocket javascript functions

We implement 3 main functions for connection, disconnection and send messages:

3. Run and check results

Build and Run the SpringBoot project with command-lines: mvn clean install and mvn spring-boot:run

3.1 Make a connection

Make a request at http://localhost:8080/

-> Result:

spring websocket application- index

3.2 Send messages

Press Connet button, and input JavaSampleApproach, then press Send button:

-> Result:

spring websocket application - index - first send

Open a new tab, make a request http://localhost:8080/, press Connet button, input JSA, then press Send button:

-> Result:

3.3 Dis-connection

Press Disconnect a client, all greetings messages at the client are removed.

-> Result:

spring websocket architecture - index - 3 send.png

III. Source code

SpringWebSocket


Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*