Many realtime systems use WebSockets to push live updates to clients. This has performance benefits, but comes at a steep operational cost. WebSocket-based services are more complex to scale because they have to keep state in memory for each connected client.
Replicache instead uses WebSockets only to hint the client that it should pull again. No data is sent over the socket. This enables developers to build their realtime web applications in the standard stateless request/response style. You can even build Replicache-enabled apps serverlessly (as we are here with Next.js)! We have found that we can get most of the performace back with HTTP/2, anyway.
For this sample, we'll use Pusher. Get thee to pusher.com and setup a free project with client type "React" and server type "Node.js".
Store the settings from the project in the following environment variables:
Then install the client and server Pusher libs:
Import the library into
Typically you'll establish one WebSocket channel per-document or whatever the unit of collaobration is in your application. For this simple demo, we just create one channel,
Replace the implementation of
Then on the client, in
index.js, import the client library:
... and replace the implementation of
listen() to tell Replicache to
pull() whenever a poke is received:
Restart the app, and make a change, and you should see it propagate live between browsers: