Real Time Application using WebSocket (Spring Boot (JAVA), React.Js, Flutter)

Hope you are doing well !

Here, we will build a real time application that will send a text message from Backend in Sprint Boot (Java) via websocket to Frontend in React.Js and Flutter. Text message to backend will be sent via POST request.

Please note that we will only send message from Server (Backend) to Clients (Frontend) and not receive any message from Clients.

Let’s start with Backend on Spring Boot (Server)

1. Create Sprint Boot Application

We can create sample spring boot application using Spring Boot Starter.

Spring Initializr

2. Add two dependencies

Spring Web
Build web, including RESTful, applications using Spring MVC. Uses Apache Tomcat as the default embedded container.
WebSocket
Build WebSocket applications with SockJS and STOMP.

For Gradle Project:

Want to read this story later? Save it in Journal.

For Maven Project:

3. Configure Web Socket

Let’s create a configuration for web socket.

Inside configureMessageBroker method, enableSimpleBroker() enables simple memory based message broker to carry message to client on destinations with “/topic”. setApplicationDestinationPrefixes() adds prefix for server to receive message from client.

registerStompEndpoints method registers “/ws-message” endpoint. We can register with or without SockJs.

SockJS is a browser JavaScript library that provides a WebSocket-like object. SockJS gives you a coherent, cross-browser, Javascript API which creates a low latency, full duplex, cross-domain communication channel between the browser and the web server.

4. Create DTO (Data Transfer Object)

We will use this to receive message from POST request and transfer them to WebSocket Clients.

5. Work on Controller

Here, we have 3 methods.

sendMessage handles POST request sent to server. It uses SimpMessagingTemplate to pass message to “/topic/message” destination.

receiveMessage is called whenever message is sent from client to “/app/sendMessage”. Here, “/app” prefix is from WebSocket Configuration. Please make note of annotations; MessageMapping and Payload.

broadcastMessage method just return payload received from “/send” POST request. Returned value is received by clients register at “/topic/message”.

6. Run the application

React.Js (Client)

1. Create React.Js app

You can follow steps from this link:

Create a New React App - React

Or

npm install --g create-react-app
create-react-app text-message-app
cd text-message-app

2. Add packages

npm i sockjs react-stomp

3. Configure Client for Websocket SockJs Protocol

Here, we have SockJsClient. This connects with Server’s STOMP endpoint (in websocketconfig) and listens message on “/topic/message”. After connection is established, message sent to “/topic/message” is received and handled by onMessageReceived method.

If WebSocket at server is configured without SockJs, we need to add another package.

npm i @stomp/stompjs

App.js for STOMP only protocol server

Keep in mind that SOCKET_URL has changed to ws from http.

4. Run the app

npm start

Flutter (Client)

1. Create Flutter App

Test drive

2. Add dependency

stomp_dart_client: ^0.3.8

3. main.dart

For more on dependency used,

stomp_dart_client | Dart Package

If Server is not using SockJs,

final socketUrl = 'ws://10.0.2.2:8080/ws-message';

and when configuring StompClient on initState method, we do not need SockJs. For more on this, refer doc from dependency developer.

4. Run the app

Demo

1. Open POSTMAN or any of such application to test API.
2. POST request to Server

3. Real Time Message at React App

4. Real Time Message at Flutter App

Things to work on:

1. Making websocket connection more secure. Adding token, password, etc.
2. User specific messages.
3. Sending message from Client to Server. Just need to add few more functions in code.
4. Full fledge Chat Application or so.

📝 Save this story in Journal.