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.

npm install ably

Copy
Copied!

JavaScript
JavaScript v2.9

import * as Ably from 'ably';
import Objects from 'ably/objects';

Copy
Copied!

<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>

Copy
Copied!

JavaScript
JavaScript v2.9

const realtimeClient = new Ably.Realtime({ key: '<loading API key, please wait>', plugins: { Objects } });

API Key:
Demo Only
Copy
Copied!

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
JavaScript v2.9

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

Copy
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
JavaScript v2.9

await channel.attach();

Copy
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
JavaScript v2.9

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

Copy
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
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);

Copy
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
JavaScript v2.9

visitsCounter.subscribe(() => {
  console.log('Visits counter updated:', visitsCounter.value());
});


reactionsMap.subscribe(() => {
  console.log('Reactions map updated:', [...reactionsMap.entries()]);
});

Copy
Copied!

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

JavaScript
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]]"

Copy
Copied!

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

• Read more about LiveCounter and LiveMap.
• Learn about Batching Operations.
• Learn about Objects Lifecycle Events.
• Add Typings for your LiveObjects.