Angular 6 WebSocket example with Spring Boot WebSocket Server | 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 an Angular 6 WebSocket Client to send/receive message with a Spring Boot Server.

WebSocket Application

Flow of messages

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


– WebSocket clients connect to the WebSocket endpoint at /gkz-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 /gkz/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 /gkz-stomp-endpoint, which is where our SockJS server is waiting for connections.

– Disconnection:

– Send messages:



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

– sockjs-client 1.1.5
– @stomp/stompjs 4.0.7
– Angular 6
– 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 enables WebSocket message handling, backed by a message broker.
enableSimpleBroker() enables a simple memory-based message broker.
registerStompEndpoints() is for registering the /gkz-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 /gkz/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 Angular6WebSocket.
– Install @stomp/stompjs and socksjs:
npm install @stomp/stompjs
npm install sockjs-client

– Add this code in the first line of polyfills.ts file:

2.2 Add FormsModule


2.3 HTML for UI


2.4 WebSocket functions


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.


Source code


By grokonez | August 28, 2018.

Related Posts

3 thoughts on “Angular 6 WebSocket example with Spring Boot WebSocket Server | SockJS + STOMP”

  1. Hi,
    This is a very helpful post for spring boot + angular integration.

    I want to share some thing :
    I have implemented you example but I want to run this application on same server so I build angular code and add that in to my spring project. Now this application starts running over http://localhost:8080.

    But when I replace “localhost” with my machine’s IPaddress (eg. : http://:8080) then application works properly but websocket do not publish over new URL but it working fine with localhost.

    Please provide some help.

Got Something To Say:

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