Optimistic send, retry with the same client id, ordering by seq
The message shows instantly with a clock, fails, and is retried with the same clientId. Ravi's messages arrive as seq 5 then 4, but the list orders by seq, so they read in the right order, and the retried message takes seq 6 after them.
A chat client keeps a live two-way connection, shows your message instantly and then confirms it, orders messages by the server's sequence number rather than by arrival, keeps the scroll where the reader expects, counts unread messages, queues sends while offline and shows who is online and typing.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Show a delivery tick for delivered (✓✓) when a fake receipt event arrives for a message.
Add a typing indicator: when a fake typing event arrives, show Ravi is typing… and hide it 2 seconds after the last event.
Explain it without notes
How do you order chat messages correctly?
Walk through what happens when a user sends a message on a flaky connection.
How would you handle scrolling in a chat view?
How do unread counts and read receipts work?
What happens when the WebSocket disconnects and reconnects?
Preview
Console
Nothing logged yet.Expected console output
c1 Yes, 1 pm?: sending
c1 Yes, 1 pm?: failed
retry
c1 Yes, 1 pm?: sending
c1 Yes, 1 pm?: sent as seq 6
order: Hey! | Hi Ravi | Lunch? | Canteen | Or 2 pm | Yes, 1 pm?