Examples#

The examples reside in the examples folder. To build and try them all, you first need to install Yarn, Node.js and JupyterLab. Using conda, enter the following commands.

conda create -n rtc -c conda-forge jupyterlab nodejs=14 yarn && \
  conda activate rtc

You can now clone the repository and build the sources.

git clone https://github.com/jupyterlab/rtc && \
  cd rtc && \
  yarn && \
  yarn build

Lumino Example#

This simple Lumino datastore example is useful to demonstrate and understand the basics of the Lumino Datastore system.

yarn lumino-example:start

Open in browser 1 (e.g. Chrome) http://localhost:8000. Then open that same link http://localhost:8000 in browser 2 (e.g. Firefox).

Every character you input in one of the 2 browsers should be reflected in realtime in the other browser. The selections are also shared.

RTC Lumino Example

In the console, you will see logs showing the CRDT messages flowing.

...
Broadcasting transactions to: 1
Sending reply: transaction-ack
Received message of type: transaction-broadcast
Broadcasting transactions to: 1
Sending reply: transaction-ack
Received message of type: transaction-broadcast
Broadcasting transactions to: 1
Sending reply: transaction-ack
Received message of type: transaction-broadcast
Broadcasting transactions to: 1
...

The content for this example has been taken from the Lumino example-datastore folder.

To Do Example#

You can start To Do example application and the Debugger.

yarn todo-example:start-all

The example application will be available on http://localhost:3000

RTC ToDo Example

Jupyter Example#

You can also start the Jupyter example.

yarn jupyter-example:start-all

The normal JupyterLab application will be launched on http://localhost:8888. The RTC datastore will be available on http://localhost:3000. Enter hello.ipynb as Path and click on Open Notebook button. You will be shown with the details of the hello notebook located in packages/supernode folder.

RTC Jupyter Example