Quickstart

This guide shows how to integrate Ably LiveObjects into your application.

You will learn how to:

  • Create an Ably account and get an API key for authentication.
  • Install the Ably Pub/Sub SDK.
  • Create a channel with LiveObjects functionality enabled.
  • Create, update and subscribe to changes on LiveObjects data structures: LiveMap and LiveCounter.

An API key is required to authenticate with Ably. API keys are used either to authenticate directly with Ably using basic authentication, or to generate tokens for untrusted clients using token authentication.

Sign up for a free account and create your own API key in the dashboard or use the Control API to create an API key programmatically.

API keys and tokens have a set of capabilities assigned to them that specify which operations can be performed on which resources. The following capabilities are available for LiveObjects:

  • object-subscribe – grants clients read access to LiveObjects, allowing them to get the root object and subscribe to updates.
  • object-publish – grants clients write access to LiveObjects, allowing them to perform mutation operations on objects.

To use LiveObjects, an API key must have at least the object-subscribe capability. With only this capability, clients will have read-only access, preventing them from calling mutation methods on LiveObjects.

For the purposes of this guide, make sure your API key includes both object-subscribe and object-publish capabilities to allow full read and write access.

LiveObjects is available as part of the Ably Pub/Sub SDK via the dedicated Objects plugin.

Install the Ably Pub/Sub SDK as an NPM module

npm install ably
Copied!

Import the SDK and the Objects plugin into your project:

JavaScript v2.9
import * as Ably from 'ably'; import Objects from 'ably/objects';
Copied!

Reference the Ably Pub/Sub SDK and the Objects plugin within your HTML file:

<script src="https://cdn.ably.com/lib/ably.min-2.js"></script> <script src="https://cdn.ably.com/lib/objects.umd.min-2.js"></script> <script> // Objects plugin is now available on the global object via the `AblyObjectsPlugin` property const Objects = window.AblyObjectsPlugin; </script>
Copied!

Instantiate an Ably Realtime client from the Pub/Sub SDK, providing the Objects plugin:

JavaScript v2.9
const realtimeClient = new Ably.Realtime({ key: '<loading API key, please wait>', plugins: { Objects } });
Demo Only
Copied!

A ClientOptions object may be passed to the Pub/Sub SDK instance to further customize the connection, however at a minimum you must set an API key and provide an Objects plugin so that the client can use LiveObjects functionality.

LiveObjects is managed and persisted on channels. To use LiveObjects, you must first create a channel with the correct channel mode flags :

  • OBJECT_SUBSCRIBE – required to access objects on a channel.
  • OBJECT_PUBLISH – required to create and modify objects on a channel.

JavaScript v2.9
const channelOptions = { modes: ['OBJECT_SUBSCRIBE', 'OBJECT_PUBLISH'] }; const channel = realtimeClient.channels.get('my_liveobjects_channel', channelOptions);
Copied!

Next, you need to attach to the channel. Attaching to a channel starts an initial synchronization sequence where the objects on the channel are sent to the client.

JavaScript v2.9
await channel.attach();
Copied!

The channel.objects property gives access to the LiveObjects API for a channel.

Use it to get the root object, which is the entry point for accessing and persisting objects on a channel. The root object is a LiveMap instance that always exists on a channel and acts as the top-level node in your object tree. You can get the root object using the getRoot() function of LiveObjects:

JavaScript v2.9
// The promise resolves once the LiveObjects state is synchronized with the Ably system const root = await channel.objects.getRoot();
Copied!

You can create new objects using dedicated functions of the LiveObjects API at channel.objects. To persist them on a channel and share them between clients, you must assign objects to a parent LiveMap instance connected to the root object. The root object itself is a LiveMap instance, so you can assign objects to the root and start building your object tree from there.

JavaScript v2.9
const visitsCounter = await channel.objects.createCounter(); const reactionsMap = await channel.objects.createMap(); await root.set('visits', visitsCounter); await root.set('reactions', reactionsMap);
Copied!

Subscribe to realtime updates to objects on a channel. You will be notified when an object is updated by other clients or by you.

JavaScript v2.9
visitsCounter.subscribe(() => { console.log('Visits counter updated:', visitsCounter.value()); }); reactionsMap.subscribe(() => { console.log('Reactions map updated:', [...reactionsMap.entries()]); });
Copied!

Update objects using mutation methods. All subscribers (including you) will be notified of the changes when you update an object:

JavaScript v2.9
await visitsCounter.increment(5); // console: "Visits counter updated: 5" await visitsCounter.decrement(2); // console: "Visits counter updated: 2" await reactionsMap.set('like', 10); // console: "Reactions map updated: [['like',10]]" await reactionsMap.set('love', 10); // console: "Reactions map updated: [['like',10],['love',5]]" await reactionsMap.remove('like'); // console: "Reactions map updated: [['love',5]]"
Copied!

This quickstart introduced the basic concepts of LiveObjects and demonstrated how it works. The next steps are to:

Select...