How messenger app updates the user activities (active, inactive, active 5 mins ago) for the mobile apps?

Question

How messenger app updates the user activities (active, inactive, active 5 mins ago) for the mobile apps?

• Web Sockets
• Server-Sent Events (SSEs)

whenever you open your messenger app you see who is active, who is not, How from the client-side (Mobile app) Facebook sends these data to the user, how keeps this list updated?

Answer 1

I've draw a system-design which you can get the basic ideas about the architecture behind chat-like apps.

Step1: Subscribe to the notifications: When a device starts, the first step is to connect to server and introduce itself, this happens using API. For example, the device sends a request to "API Server" and says, hey I'm "USER A" and I want to subscribe to the status notifications, message notifications and maybe other type of push notifications.

Step2: Connect to the hub: Then the client (Device) connects to the Web-Socket using WS protocol and listen to the events in order to get push notifications from server.

Step3: Server produce messages like Status message, chat messages and etc: An event happens, so the server produce messages like for that event, (events like Status message, chat messages and etc) and publish to message broker (Kafka).

Step4: Consume message and push the notifications to the clients: When a new message are ready in message broker (Kafka), another services consume messages from message-broker and push the notifications to the active clients through web-socket (WS protocol).

Step5: Clients update the ui: In the second part, we mentioned that client connect to the web-socket. When a new push notification received from server side, the client interpret it and update the UI.

This is the idea behind services like Facebook messenger, the they have implemented in a very big scales.