Real-Time Chat App with Combine and WebSockets

Project roadmap

1. 01

   Build a server and connect

   ~2h

   Write a small WebSocket chat server (for example in Node.js with the ws package, or Swift with Vapor) that relays JSON messages to everyone and acknowledges each message by its client id. Define the message types in PROTOCOL.md: chat (id, sender, text, time), ack (id), typing (sender). In the app, open a URLSessionWebSocketTask and read messages in a loop with receive(). Done when: the app connects and prints messages from the server.

2. 02

   Expose Combine publishers

   ~2h

   Create a ChatConnection class that publishes incoming messages through a PassthroughSubject and the connection state (connecting, connected, disconnected) through a CurrentValueSubject, exposed as AnyPublisher. Decode JSON into Codable types, and report decoding errors without closing the connection. Done when: subscribers receive messages and state changes.

3. 03

   Build the chat screen

   ~2.5h

   Build a ChatViewModel (ObservableObject) that subscribes to the publishers with sink and receive(on: DispatchQueue.main), storing the subscriptions in a set of AnyCancellable. Show messages in a scrolling list with bubbles for you and others, an input bar, and the connection state at the top. Scroll to the newest message automatically. Done when: two simulators can chat through the server.

4. 04

   Reconnect automatically

   ~2h

   When the connection fails or closes, reconnect after 1, 2, 4 and up to 30 seconds plus jitter, resetting after a successful connection. Send pings every 20 seconds to detect dead connections. Pause while the app is in the background and reconnect when it returns. Done when: restarting the server makes the app reconnect by itself, with the state shown on screen.

5. 05

   Add typing indicators and delivery status

   ~2.5h

   Send a typing event when the user types, at most once every 3 seconds (use Combine's throttle), and show Name is typing… for 5 seconds after receiving one. Give every sent message a status: sending until the ack arrives, sent after it, and failed after a timeout or disconnect, with a tap to retry. Resend pending messages after reconnecting, using the same id so the server ignores duplicates. Done when: statuses update correctly, even across a disconnect.

6. 06

   Test with a fake transport

   ~2h

   Put the WebSocket behind a protocol so tests can use a fake that delivers messages, fails and closes on demand. Test the reconnection timing (with an injectable scheduler, such as a test scheduler from the Combine Schedulers library), delivery statuses and retries, the typing throttle, and decoding errors. Done when: the unit tests pass without a real server.

Resources

• DocsCombine documentation
• DocsURLSessionWebSocketTask documentation
• DocsUsing Combine (free online book)
• Docscombine-schedulers (test schedulers)
• Docsws: Node.js WebSocket library (for the server)