In today's remote world, collaboration in real-time via web, desktop and mobile applications has become an omnipresent requirement in all applications. At Ensolvers, we've faced the challenge of implementing real-time collaborations several times.
By using a project as an example, we are going to describe the key elements required for implementing this type of collaboration by using Websockets. In this case, the primary challenge was to ensure that communication and data exchange occurred in real time, without latency or bottlenecks, to mimic the fluidity of in-person collaboration. This was critical in maintaining the pace of work and ensuring that all team members were synchronized in their efforts.
The project we are going to refer as an example required a robust platform that could support collaborative efforts among users. To address this, we've used Java and Spring Boot and browser Websockets capabilities. Websockets provide full-duplex communication channels over a single long-lived connection, which is ideal for real-time data exchange. We decided to use the STOMP protocol and its subscription/message model primarily due to its simplicity and its native support in Spring Boot.
First of all, we need to install Spring Boot websockets started as shown below (assuming that we are using Maven)
Now, let's dig into configuration and initial setup on the server side
We started by creating a configuration class that implements WebSocketMessageBroker
We then add a method specifying the message broker destinations and application prefixes.
It is also important to register the STOMP endpoint and configure the CORS allowed origins. This is the endpoint we use to establish the websocket connection.
To ensure the authenticity of all messages, we need to implement a ChannelInterceptor
We authenticate connections when a CONNECT message is received, using tokens sent via an Authentication header to validate user identities. This ensures that every message exchanged via the WebSocket connection comes from an authenticated user, maintaining the integrity and confidentiality of the collaboration.
Once the connection is established, we no longer need to authenticate the incoming messages, but it is useful to persist the information related to the user that generated the connection, to avoid sending it on every request.
Now, the next step involves integrating a Controller to manage the flow of incoming STOMP messages.
This Controller utilizes @MessageMapping to connect client actions with the appropriate server-side handling mechanisms. When a STOMP message is dispatched from the client — for instance, as part of a collaborative editing session — it's directed to the matching method within our Controller based on the message destination header. This method, identified by its unique mapping, is then responsible for processing the message accordingly.
On the frontend (written in Typescript), our WebSocketClient class manages subscriptions, message sending, and handling of pending messages.
In this article, we explored the implementation of real-time collaboration through Websockets, addressing the need for seamless interaction in today's remote work environments. We described an end-to-end implementation using Java, Spring Boot, and Websockets to ensure fluid communication among users. We chose the STOMP protocol due to its simplicity and popularity and also demonstrated how authentication can be implemented on the top of it. This comprehensive approach allowed us to create a robust platform for real-time collaboration, ensuring synchronized efforts and efficient workflow management across diverse applications and devices.
