Real-Time Collaboration with Replicache and Fly-Replay

Summary

Distributed real-time collaboration becomes difficult when a single server coordinating document changes is overloaded and documents must be split across machines without exposing routing complexity to clients. This demo combines Replicache, a custom WebSocket endpoint, Fly Machines, and the Fly-Replay header to route each document’s connection through a shared router to the machine responsible for that document. The server keeps connections by spaceID, sends initial and incremental state, and tracks messages already delivered; the client overrides Replicache’s push and pull handlers to exchange data through the persistent socket. The resulting application has React frontend, Express router, and Replicache/WebSocket backend layers, with each todo list assigned to one backend machine. The author cautions that the approach is demonstrated only in a basic demo and should receive serious production testing and tuning.

Takeaways

1. 1

   The backend sends a client’s complete initial state, then tracks delivered messages so later updates can contain only changes the client has not already seen.

2. 2

   The demo uses three layers: a React frontend, an Express router, and a Replicache/WebSocket backend running across Fly Machines.

3. 3

   The author says the implementation has only been tested within the basic demo and should not be used in production without serious thought and tuning.