[Chat App] Architecture - Message Syncer and Optimistic Update

Message Syncer and Optimistic Update

When the user sends out a message (or any update made by the user in general), we want to reflect the changes immediately. It is poor user experience to wait for the server's confirmation before showing an updated UI.

Hence outgoing chat messages/user actions are

1. inserted into the Client side storage instead and then marked as pending.
2. Pending messages are also reflected immediately in the UI.
3. And we can utilize the message status to indicate the various message delivery statuses.

Here are the message statuses:

Message Status	Description	Messenger	WhatsApp
Sending	Application is attempting to send the message	Empty circle	Clock icon
In-Flight	Message was sent to the server successfully	Checkmark in outline circle	Single gray checkmark
Success	Message delivered to the recipients and stored in the server	Checkmark in filled circle	Double gray checkmark
Failed	Message failed to send	Exclamation icon in circle	Exclamation icon in circle

Message Syncing process

Here are the message syncer components:

• 👤 Client： The user device or app.
• 💬 Raw message： The original message before processing.
• ⏱️ Message with status： A message marked as pending, in-flight, success, or failed.
• 🔄 Message Syncer： The component that syncs messages with the server.
• 🗄️ Client Storage： Local storage used to persist message states.
• 🖥️ Server： The backend server that processes and stores the messages.

⏳Pending message

1. The Client sends a raw message.
2. It is forwarded to the Message Syncer.
3. The Syncer wraps it with a "pending" status.
4. It is stored in the Client Storage.
5. The Syncer prepares to sync the message with the Server.

🕒 In-Flight message

1. The Message Syncer process the message which is sent back from Server.
2. The Message Syncer then get the "pending" message in the Client Storage by the message id.
3. The Message Syncer then update the message status to "in-flight" in the Client Storage.
4. The Message status is updated as "in-flight".
5. The Client sees the message as "in-flight" status.

✅ Success message

1. The Message Syncer process the message which is sent back from Server.
2. The Message Syncer then get the "in-flight" message in the Client Storage by the message id.
3. The Message Syncer then update the message status to "success" in the Client Storage.
4. The Message status is updated as "success".
5. The Client sees the message as "success" status.

❌ Failed message

1. The Message Syncer process the message which is sent back from Server.
2. The Message Syncer then get the "in-flight" message in the Client Storage by the message id.
3. The Message Syncer then update the message status to "failed" in the Client Storage.
4. The Message status is updated as "failed".
5. The Client sees the message as "failed" status.

Reference

• GreatFrontend - Chat App