- Add live cursors for collaborative multiplayer experiences
Add live cursors for collaborative multiplayer experiences
Copy link to clipboardWhat do we mean by a live cursor?
Live cursors show where other users’ cursors are in a virtual space, such as a digital board. It allows users to see where people are when collaborating online. It gives a sense of togetherness in a digital world.
Copy link to clipboardWhere can I use live cursors?
Live cursors can add value to a range of multiplayer collaboration experiences. Some example use cases are:
Tracking multiple cursor movements on a digital board
Showing cursors when annotating during a screen share
Adding audience engagement functionality using cursors
Copy link to clipboardAdvanced live cursor functionality
You can incorporate more functionality within your live cursors such as:
Showing mouse interaction, such as clicks, mouse drag etc.
Allowing users to annotate and draw on the board
Adding emotions to a cursor
Copy link to clipboardHow to add live cursors to your product
With Ably, it is easy to add live cursor functionality to an existing product.
Copy link to clipboardStep 1: Sign up to Ably for free
Visit our sign up page to start using Ably for free. Simply upgrade when you need to ramp up usage past 6M Monthly messages, 200 Peak concurrent channels, 200 Peak concurrent connections. Once you are signed up, download one of our SDKs to get started.
Copy link to clipboardStep 2: Start using Ably Channels and Pub/Sub
Channel is the unit of distribution of messages. Channels can be used to segment the data. For example, cursors in different boards, different rooms in audience engagement tools etc. Users or their devices can subscribe to a specific or multiple channels.
channels.get- to get an existing or create a new channel
Ably Pub/Sub Messaging
Pub/Sub is an architectural pattern used to distribute realtime information, such as messages. Messages can be of any format. For Live Cursors, the data will represent a cursor position. Publishing multiple messages allows the cursor to be tracked.
channel.subscribe- to subscribe to messages on a channel
channel.publish(data)- to publish a message on a channel
Copy link to clipboardStep 3: Implement the UI
Now all you need to do is implement the UI for the live cursor - and you're ready to go!
Copy link to clipboardDiscover more collaborative features
Discover the other features you could use to deliver a world-class collaborative experience, including:
How to implement a typing awareness indicator
Discover how to add a realtime typing indicator to your live chat, or other collaborative experiences, using Ably APIs and SDKs.
Ably provides simple APIs to help you build live charts, that support insight and analysis.
Ably provides simple APIs to help you build and add emoji reactions to your chat application, allowing users to react to messages in realtime.