- Add live cursors for collaborative multiplayer experiences
Add live cursors for collaborative multiplayer experiences
What do we mean by a live cursor?
Live cursors, or live mouse 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.
Where can I use live mouse cursors?
Live mouse 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
Advanced live cursor functionality
You can incorporate more functionality within your live mouse 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
How to add live cursors to your product
With Ably, it is easy to add live cursor functionality to an existing product.
Step 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.
Step 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
Step 3: Implement the UI
Now all you need to do is implement the UI for the live cursor - and you're ready to go!
Discover more collaborative features
Discover the other features you could use to deliver a world-class collaborative experience, including:
Activity Feeds: Explanation, benefits and how to get started
Discover what activity feeds and streams are, their use cases and benefits, and how to use Ably APIs and SDKs to set up an activity feed.
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.
Realtime data visualization
Discover how to power live charts and metrics for data visualization using Ably APIs and SDKs.