Run the application

After entering the workspace, it is very simple to run our application:

HOST=localhost PORT=1234 npx y-websocket-server & yarn start

HOST=localhost PORT=1234 npx y-websocket-server opens a local WebSocket server, so that each textbox (a.k.a room) in our application can be connected with ws://localhost:1234/${room_name}. And yarn start invokes our application.

Then open your browser, and enter "localhost:{your-docker-container-port}" (if you are running docker on node-1, you need to use "node-1.cse.cuhk.edu.hk:{your-docker-container-port}") to see your application. (Note that the your-docker-container-port is the port you use when starting your docker container, in our example, it is 3000.)

Demo Video

This video demonstrates how we collaborate across different webpages. There are three textboxes now, each connected via a unique WebSocket connection.

Then, the second demo video shows how CRDTs enable the text to auto-merge. We can temporarily disconnect textboxes from the connection, thus the later changes in these textboxes will be local. After re-connecting, there will be some conflicts. With the help of CRDT, we don't have to handle these conflicts by hand:

Customization

You are encouraged to customize the application to make it more full-fledged. For example, highlighting the cursor movements of different users as in Google Doc, supporting versioning, etc.