Collaboration

Build Collaborative Applications

Oliver Carson on Dec 17, 2024
Build Collaborative Applications

Multi-User Collaboration applications enable multiple users to interact in real time. Applications like Scratchpad and ClassDojo improve productivity, efficiency, and effectiveness by working together. These multi-user apps enable users to collaborate simultaneously in documents, worksheets, and other digital workspaces by synchronizing data and delivering real-time views of projects and tasks. This also includes whiteboard applications, where users’ mouse and drawing positions need to be synchronized across all devices.

The previously mentioned collaborative applications are powered by PubNub, a real-time developer platform that enables you to build, manage, and enhance real-time interactive experiences seamlessly, no matter the app’s purpose, scale, or complexity. PubNub serves as the foundation for over 2000 customers in diverse industries, ranging from online chat, live events, geolocation, remote IoT control, and of course, collaborative, multi-user applications. With over 1B unique devices monthly, 99.999% reliability, and 3 trillion transactions monthly, you can let PubNub handle the infrastructure and security of your application, so you can focus on what matters.

Continue reading to learn more about how you can build your collaborative application using PubNub. If you’d like to immediately jump into the action, you can learn more about building a multi-user collaboration application with PubNub by following our tutorials.

Building Collaborative Applications

Although our customers building collaborative applications may have different markets, they share one key requirement: allow multiple users to collaborate simultaneously and have changes reflected across all other connected devices, in real time.

PubNub is structured based on the publish/subscribe model, which means that a publisher (source of data) pushes messages to subscribers (receivers of data) through mechanisms in which the data is transmitted from one device to another within PubNub, known as channels. These subscribers are immediately notified when new messages are published.

PubNub Platform Overview

The following scenarios are common when building multi-user collaboration applications, and how PubNub’s features can meet the specific needs of your application.

Sending Updates: Publish

When a user acts such as typing text, changing a document, or even moving their mouse cursor, you need to send updates to other users to reflect that changes are being made. PubNub’s Publish functionality is the first key pillar of PubNub. To send an update, you would construct a PubNub message that contains the information you would like to send. The messages are commonly formatted as JavaScript Object Notation (JSON), up to 32KiB in size, and guarantee that any message you send will be delivered anywhere in the world in < 30ms.

Messages are sent via channels, which are used to transmit data from one device to another. When you're sending a message, you must specify a channel to send the message. PubNub will automatically create the channel for you when you send the message. You can think of channels as separate instances, which is useful for organizing the different groups using your application.

You can capture user input, such as text updates, emoji reactions, mouse position coordinates, files, and other complex metadata, and then publish the message to the PubNub network. Any client subscribed to this specified channel will receive this message in real time.

Receiving Updates: Subscribe

Once a user has performed an action and the other connected users need to be updated, you need a way to receive and handle those changes being made.

PubNub’s Subscribe functionality is the second key pillar of the publish-subscribe model. You would subscribe users to a channel (or multiple channels) or create an entity-based subscription or a subscription set, depending on your SDK, and handle incoming messages using an event listener. Any clients subscribed to the channel(s) or entities, which are subscribable objects within a PubNub SDK that allows you to perform context-specific operations, will receive all messages sent to it, and handle them based on the received update.

Receiving text updates can be added, removed, or edited based on the submitted message property customized by the user. If a client receives mouse position coordinates from another user, it allows the subscribed client to render an image at that location on the screen, effectively creating another user’s mouse on the subscribed client’s screen.

Track User State: Presence

Multi-collaboration applications are designed with multiple users in mind. You’ll need to know when users join or leave your application, and display their online status.

PubNub Presence monitors the subscribers of channels. This means you can look up who’s currently online when a user has joined/left a channel, or which channels a user is subscribed to. Checking presence is based on receiving presence events, which are sent automatically from the PubNub servers when a user’s state changes. You would then add a presence event listener to listen for these events and handle them based on the received action (join, leave, timeout, state-change, or interval).

Once a client has come online, the presence event listener will detect this new join action. Subscribers to the channel would then know to update that user’s online status to something such as a green online circle, generating a mouse cursor to show their active status to other users, or some other kind of online indicator. Once users leave the application or timeout, you would then change that user’s online status to a grey online circle, or remove the mouse cursor for that user.

Retain and Retrieve Previous Information: Message Persistence

Even though your online users will receive data nearly instantaneously, you’ll need a way to store previous messages, document revisions, and project history for not only historical evidence but to display this information to your offline users once they come online.

PubNub’s Message Persistence feature allows you to retain and retrieve historical messages. You need to know the channel name the message was sent to and the message’s timetoken. You can control how long messages are stored, how far back you want to retrieve messages, the number of entries, and influence the return order.

Your application can then retrieve previous messages sent by users, and display them to users when they come online. You can also use Message Persistence to track project changes, document revisions, view past messages from other users, and other history-related functionality necessary for your app.

Notify Offline Users: Push Notifications

Message Persistence is a great to store and obtain previous information sent on that channel for users that were not online. While the information will be waiting for them as soon as they come online (caught by Presence detection), what if you wanted to notify offline users immediately that new document, project, or message updates occurred?

PubNub’s Mobile Push Notifications feature provides a method to deliver messages quickly and reliably, regardless of whether the application is in the foreground or background on iOS and Android devices. The feature bridges native PubNub publish with different notification service providers like Firebase Cloud Messaging and Apple Push Notification Service by sending updates in one message call - this means you don’t need to use and handle the SDK for each device platform.

PubNub Mobile Push Notifications Gateway

Most applications support web and mobile devices. Users who are using your application on Android and iOS devices can benefit from mobile push notifications to alert them whenever new information is available. This can be missed messages from other users, project updates, or even application news or updates required.

Store Device and User Metadata: App Context

Most applications display users’ information to them in the way of application settings. This information could include the user’s name, nickname, username, email address, notification updates, friend list, and other account information.

PubNub’s App Context feature provides easy-to-use, serverless storage to store metadata for users, channels, and memberships (relationship between a user and a channel) without the need to set up your database. You can optionally store metadata, including custom properties, for your users in applications. PubNub triggers events when object data is set, updated, or removed from the database, which means that you can receive these events in real time and update your front-end application accordingly.

You can use App Context to store any attributes about your user in one place and can then easily present this data in your application, without the need of setting up your database. You can use membership metadata to display channel membership lists for a user or even give them the possibility to join or leave groups, rooms, or organizations. You could manage the metadata via API calls or utilize BizOps Workspace to gain real-time control over your app through an intuitive, no-code interface.

Organize and Protect Your Users: Access Manager

Although you want your users to be able to join or leave groups, rooms, or channels and access information, you need to ensure you limit a user’s access depending on their permission rights (you wouldn’t want a new user to have admin privileges). Perhaps they need a password to join a specific group or don’t have the read/write permissions to a document.

PubNub’s Access Manager controls client access to resources using restricted permission tokens and allows you to regulate clients’ access to PubNub resources, such as channels, channel groups, and UUIDs.

PubNub Access Manager Authorization Flow

If you have a document that’s only meant to be shared by a certain group of users, you would use the Access Manager to restrict access to only these specified clients. You can make a one-to-one chat room private by only allowing two users read and write access, or make a room public by giving all users access to it. You could also deny access to users who are no longer allowed to access your app.

Ensure a Great User Experience: Functions

At this point, you can send and receive messages in real time, notify offline users, and track user states. But what if you want to do something with a message before or after a user sends it?

PubNub’s Functions feature is used to capture events happening in your PubNub channels and enables you to perform an action based on that event. It enables you to write code to address your business needs and allows you to capture events before and after publishing messages. This means that you don’t need to create and set up your servers or incur increased latency to external servers to translate messages or censor inappropriate messages.

You can notify other users as soon as they are mentioned (i.e. @Jane.Doe), or announce to a channel when someone joins/leaves. You can connect users to chatbots, or have a system add letters to a dictionary for automatic suggestion/completion functionality. You can even route messages and files to a moderator channel if the service marks them as inappropriate.

You can utilize your code or easily integrate it with one of our third-party services.

Analyze and Make Instant Data-Driven Decisions: Insights and Illuminate

Understanding the data and ensuring your users are having a positive experience is the key success factor for any application.

PubNub Insights allows you to dive into your current PubNub implementation to view turnkey analytics based on your messages, users, and channels, all through an intuitive GUI without any code required. You can utilize this data to implement Illuminate alongside Insights to not only understand your data but also make real-time decisions without the need for long iteration cycles.

PubNub Illuminate is a real-time decisioning and analytics product that is customizable to an organization’s unique use case. The product is designed with the product managers and analysts in mind, allowing them to define conditions based on your data metrics, which, when triggered, will perform dynamic actions based on that data. You can then see your application respond in real time to improve business KPIs and iterate as events happen.

What’s Next

You’ve learned about PubNub’s key features and how you can use them to create your unique multi-user collaboration application to suit your users. Whether you’re building virtual whiteboards or classrooms for eLearning platforms or enabling multiple users to collaborate simultaneously in documents or worksheets, PubNub can deliver real-time communication updates, so you can focus on your unique application needs. If you would like to learn more about how to get started building your collaborative, multiuser space application, take a look at our growing collection of demos, documentation, and tutorials:

  • Understand the PubNub platform through our interactive tour and then jump into the documentation to understand how to utilize the APIs for your desired SDK.

  • Interact with our real-time multi-user collaboration demos and enhance them with your own implementations.

  • Follow our step-by-step tutorials to understand how the demos just mentioned were created.

Feel free to reach out to the Developer Relations Team at devrel@pubnub.com for any questions or concerns or contact our Support team for help with any aspect of your PubNub development.