Business Context
How to communicate to your customer and RM in real time in web/ PWA? As we were building finch product so communication was key factor to
Keep informed also to make quick response to customer RM should have real time notification. As we were building web application and PWA application for our customer and business partner so they need to aware about real time change on their leads. We also wanted to give real time
Notification to RM once we have lead in our system so that RM can have call to customer as soon as customer inquire about property and loan. So eventually we wanted to reduce response time with customer.
The Technology
We were looking at some of the pre-existing option to implement real time messaging platform. We have started with Socket.IO as our application was in react and backend was in Java spring-boot. We explored the implementation using socket IO but there was issue as once connection lost in 5 min, we were not able to make connection in same session.
We have used WebSocket protocol to handle bidirectional communications. The other alternative was long polling. We have used HTTP for initial handshake once it’s connected, the HTTP connection works with TCP/IP connection which is used by a WebSocket.
Our Challenges
To push real time message notifications, we needed to identify the active user (customer actively chatting) with an ID (unique name), and show unique messages relevant to only those users.
We have initiated the socket connection at 2 places in the code. One is in main.JS and another in axios interceptors. Since we have not used redux or any other global state management library, we need a mechanism to keep connection alive.
Since the application was creating multiple web socket connections we had to handle it in our frontend so that user wouldn’t receive multiple messages.
There are the ping/pong methods to track the change in the messages that need to be sent out,. The multiple socket connections were making it difficult to track these messages via the ping/pong methods.This was one of the challenges that we were looking to resolve.
The Solution
Our entire Tech stack is on React and JAVA. So, we wanted to have robust solution which can work across all browser even if does not have web socket support. So, after some research we wanted to go with STOMP. STOMP gives fall back in case web socket does not support. It has long polling in case of Web Socket failure.
WebSocket integration is always challenge as some browsers (e.g., IE 9) do not support WebSocket. HTTP upgrade is not possible in case of WebSocket failure it basically disconnects if it is open for long in this case SockJS helps to keep connection alive.