Build Collaborative Applications

Collaborative applications enable multiple users to interact with one another in real-time. Applications like Scratchpad and ClassDojo improve productivity, efficiency, and effectiveness by working together in virtual spaces. These multiuser apps enable any number of users to collaborate simultaneously in documents, worksheets, and other digital workspaces by synchronizing data and delivering real-time views of projects and tasks.

The aforementioned collaborative applications are powered by PubNub, a developer API platform that enables these applications to receive real-time updates at a massive, global scale. 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, multiuser spaces.

Continue reading to learn more about how you can build your collaborative application using PubNub.

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 takes care of the infrastructure needed for this real-time communication, so you can focus on designing your application. PubNub is structured based on the publish/subscribe model, which means that a publisher (source of data) pushes messages to subscribers (receivers of data) via live-feed data streams known as channels (topics). These subscribers are immediately notified when new messages are published.

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

When a user performs an action 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 under 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 to. PubNub will then 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 then receive this message in real-time.

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), and handle incoming messages using an event listener. Any clients subscribed to the channel(s) will receive all messages sent to it, and handle it 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.

Collaborative 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 that 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 would 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 for that user 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.

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, also known as History, 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.

PubNub’s History function is 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 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.

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.

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 Object feature provides easy-to-use, serverless storage to store metadata for users, channels, and memberships without the need of setting up your own database. You can optionally store metadata, including custom properties, for your users in applications. PubNub triggers events when object data is set 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 the Object feature 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 own 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.

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.

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.

At this point, you can send and receive messages in real-time, notify offline users, and track user state. 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 own 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’ve learned about PubNub’s key features and how you can use them to create your unique collaborative 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 the 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 updates, demos, tutorials, and documentation.

• Interact with our real-time demos covering our diverse industry use cases, including our CoDoodler collaborative app, in which you can draw with other users in real-time.

• Follow our step-by-step tutorials to create different applications powered by PubNub, including the CoDoodler collaborative app.

You can also take a look at our other resources that discuss how to enhance or create other industry applications using PubNub.

• How-to guides on how to create or handle different situations when building applications using PubNub.

• Documentation for over 50+ SDKs, so you can build your application in your favorite language.