Spring Boot WebSocket with Angular 5 Client | 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. In this tutorial, we’re gonna create a Spring Boot Application that uses WebSocket protocol to communicate with Angular 5 Client.

Update: Angular 6 WebSocket example with Spring Boot WebSocket Server | SockJS + STOMP

Spring WebSocket Application

Flow of messages

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

spring-websocket-architecture-ws

– 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.

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.

We create a simple Java configuration to enable SockJS and Stomp in Spring application:

Client side

We uses {sockjs-client, stompjs} for development on Client side:

– Make a connection:

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

– Disconnection:

– Send messages:

Practice

Technologies

– Java 8
– Maven 3.3.9
– Spring Tool Suite 3.9.0.RELEASE
– Spring Boot: 2.0.2.RELEASE
– Spring WebSocket

– sockjs-client 1.1.4
– stompjs 2.3.3
– Angular 5
– Bootstrap

1. Server side

angular-6-websocket-example-spring-websocket-server-structure

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 enables WebSocket message handling, backed by a message broker.
enableSimpleBroker() enables a simple memory-based message broker.
registerStompEndpoints() is for registering the /jsa-stomp-endpoint endpoint, enabling SockJS fallback options – an alternate transports in case WebSocket is not available. We also configure allowed Origin header values for browser clients.

1.4 Create WebController

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 Angular project

– Using Angular CLI to create new Project: ng new AngularWebSocket.
– Install stompjs and socksjs:
npm install stompjs
npm install sockjs-client

2.2 Add FormsModule

app.module.ts

2.3 HTML for UI

app.component.html

2.4 WebSocket functions

app.component.ts

Run and check results

SpringBoot project with command-lines: mvn clean install and mvn spring-boot:run.
Angular project: npm install and npm start.

Open browser with url http://localhost:4200/.
Click on Connect button and send User’s Name.
Then click on Disconnect button.

spring-websocket-angular-result-final

Source code

SpringBootWebSocket
AngularWebSocket

By grokonez | May 19, 2018.

Last updated on August 28, 2018.



Related Posts


Got Something To Say:

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

*