Automatically send data to clients side without having APIs calls

Question

I am looking for a solution, where server will send data without having any APIs call from UI side. Basically, in my application there are two panel 1. Receptionist dashboard 2. Guest mobile application. If any request comes from guest app then that request should be automatically display in Receptionist dashboard without having page refresh(implicitly/explicitly).

The approaches, I tried. 1. After every minute page refresh automatically so APIs will call and get new data with old data. But in this case after every one minute server call will happen, even if there are no new request related to this. 2. I used web socket programming, but in this case code debug is main challenge.

Is there any other solution apart from these. if not, then how can I fixed the issues that I am facing.

Answer 1

TL;DR

Since you don't know when new data arrive to the server, having the client request that data is not ideal as you already mentioned. Three alternatives come to my mind, realtime databases, push notifications and WebSockets.

WebSockets seems to be a good choice, because you can easily implement it on the server side and most modern browsers already have it implemented natively. You mention that it is hard to debug, but did you knew about Chrome support for it [1]?

1. Launch Chrome Developer tools
2. Load your page and initiate the WebSocket connections
3. Click the Network Tab.
4. Select the WebSocket connection from the list on the left (it will have status of "101 Switching Protocols".
5. Click the Frames sub-tab. Binary frames will show up with a length and time-stamp and indicate whether they are masked. Text frames will show also include the payload content.

Realtime database

Firebase offers multiple services, one of them is a realtime database (old version) and firestore database (new version). Using their SDK you can update the database from the server side and listen for changes on the client side. On the client side you will be using observables and once a change happen on the database (if you are listening to changes) you will receive that data on the client without you having the perform the request. There are most likely requests being made by the SDK but honestly, I don't know how they deal with this but it lifts the burden from the developer. It is paid for many requests but it is worth to take a look at it.

Push Notifications

Similarly, Firebase (and other companies, such as Amazon) offers you a Push Notification / Cloud Messaging service which allows you to send data to the client without a request is made by the client. This works by using the Notification API and Push API that are built on top of the Service Worker API [2]. Advantage of this technique is that you can notify the user even if he have the app closed.

WebSockets

WebSockets allows you to establish a bidirectional communication which then allow for every party (client and server) to send data to each other. Some tools like Socket.IO gives you more control and features (channels/rooms, auto-reconnection, etc) than traditional WebSockets with the cost of some overhead.

Answer 2

You ca use signalR. It maintains permanent connection with web server and allow, notifications from client to server, which looks like what you need.

Answer 3

You can create a persistent response stream from your server which writes new data for every guest request in that same response stream and in front end you can establish a listener on data for this request. This way a single request will be maintained and the data will be updated timely.