So I made a react chat app but the unread-messages-counter (just like on facebook) only updates when I refresh the app and fetch data again from the server. What is the best way to do this? I am using a .NET Core API and MS SQL Server. I could theoretically check every 10 seconds for new messages via fetch but that does not sound like the smartest option to me. Thank you!
Question posted in Facebook API
The official documentation for the Facebook APIs can be found here.
2
Answers
You can use websockets or like you said, poll the information every n seconds. Intergrating websockets may require a redesign of your app architecture however it will provide better performance and ux since updates will be real-time.
Websockets: https://en.wikipedia.org/wiki/WebSocket#:~:text=WebSocket%20is%20a%20computer%20communications,WebSocket%20is%20distinct%20from%20HTTP.
ASP.NET Core SignalR can be used to add real-time web functionality to apps easily, and real-time chat application is often used as an example in doc.
To achieve your requirement, you can add a hub server and call client method to push messages to all client users or specific user(s), then you can dynamically update UI to change unread-messages-counter on react client side. To get started with ASP.NET Core SignalR, you can check following documents.
https://learn.microsoft.com/en-us/aspnet/core/signalr/introduction?view=aspnetcore-3.1
https://learn.microsoft.com/en-us/aspnet/core/signalr/javascript-client?view=aspnetcore-3.1