Angular: To-Do List Example

Both To-do lists are built with Angular, each connected in real-time via Ably realtime messaging.

When you add, or remove by clicking a To-Do list item, a message is published to Ably using its connection. The other To-Do list is subsequently updated when it receives a message on its connection.

Enter a new to do item to see how quickly a message is sent from from your browser to Ably and back to your browser. Alternatively, send a message in your terminal via the Ably REST API:

curl -X POST \
  -u "I2E_JQ.Cw_mJQ:1zsPuXC0yKjJitdC" \
  -H "Content-Type: application/json" \
  --data '{ "name": "add", "data": { "title": "Pick up milk", "from": "curl" } }'