How to Build Cross-Platform Chat Applications with PubNub

If your team is developing a cross-platform application you have a number of options to choose from and which approach you take will depend on your team’s skill-set, how much time & budget your project has and what sort of experience you want for your end users.

In general there are three approaches to create a cross-platform application:

• Only create a web app which will run within the browser on any platform.

• A mixed approach, developing separate apps for the web and native environments.  This is especially popular where teams choose to develop native Android and iOS applications and rely on a third web-based application to serve all other users.

• A framework that supports compilation to different platforms and architectures, e.g. Flutter or React Native 

Regardless of which approach you choose, PubNub has a solution to add chat to your application.

Let’s look at each approach in turn:

Web technologies are ubiquitous, web developers are plentiful, nearly all platforms support a web browser and a web app provides a true ‘write once, run anywhere’ application.  For these reasons, many teams will choose to forgo the effort of native development entirely and only provide a web app.  

The arguments against web development mostly cluster around performance and end-user experience, for example the user expects to download your app from the App Store or Play Store.  To provide a more native-feeling experience for users, teams might choose to wrap their application in technologies like Electron or Ionic, essentially packaging the web application to run like a native application on any platform.

Web applications in any form can take advantage of the PubNub JavaScript SDK which provides the ability to send and receive messages, notifies you when users go online or offline, supports message persistence and much more.  Please see our JavaScript SDK documentation to learn more or follow along with our JavaScript SDK Tutorial to build a simple application:

To communicate cross-platform with the JavaScript SDK, just make sure the following are true:

• You use the same publish and subscribe keys for each device, that way PubNub knows the devices should be able to communicate with each other.

• You use the same message format, defined as a JSON object, on each device, so devices understand each other.

If you are using React to develop your web-based application there is another option for running cross-platform, our PubNub Chat Components.  Chat components provide reusable UI and data components like ‘MessageList’ and ‘MessageInput’ to easily add chat capabilities to any application.  To see the React Chat Components in action please see our Group Chat demo. 

Chat Components also support platforms other than React, which will be discussed in the next section.

Many teams require support for at least one native platform, often this is because they need to take advantage of platform features only available in a native SDK or because a web application cannot offer their users the required performance.  This is particularly true both in gaming and on mobile.

Our chat components are cross-platform by design and are the quickest way to get up and running with a cross-platform solution for web and mobile.

If you would like to learn more about using Chat Components to create a cross-platform application then please follow the cross-platform tutorial for Telehealth which walks you through our ‘Telehealth’ application and shows it running on web, Android and iOS.

To understand the differences between chat components and PubNub SDKs, please see our sdk vs. components how-to guide.

PubNub supports many native SDKs and almost certainly we support the platforms you intend on targeting.  From Java to C#, from Dart to Swift, from PHP to Ruby and Python the list goes on.

Because PubNub does not impose any structure on the messages it delivers it is by design inherently cross-platform assuming the following:

• You use the same pub/sub keys for each device.

• You use the same message format, defined as a JSON object.

As long as the recipient knows the format of the message they have been sent, they will be able to parse it and respond in kind regardless of which SDK they are using.  In addition, most of our SDKs provide additional features like presence, persistence, objects and files which are interoperable between SDKs, so for example a Kotlin user can be notified when a Swift user goes online and offline.

To see cross-platform communication using our SDKs in action, please see the SDK Getting Started Tutorial where any of the Android, iOS, Flutter or React Native tutorials will communicate between each other, providing you use the same publish and subscribe keys.

There are many frameworks that support multiple platforms, allowing you to build native binaries for different platforms from the same code-base.  These frameworks include but are not limited to Flutter, React Native and Xamarin.

Again, PubNub will support most cross-platform frameworks:

• Flutter developers can use our Dart SDK to create apps that work across any platform Flutter supports.

• React Native developers can use a combination of our React and JavaScript SDKs to create iOS and Android applications.

• Xamarin developers can use our C# SDK to target iOS and Android.

Because you are using the same PubNub SDK on every platform, each app will be functionally identical and will interoperate.  One caveat: be sure to provide the same publish and subscribe key on each device so PubNub knows you want the devices to be able to communicate with each other.

To learn more about developing a cross-platform application with React Native, please see our React Native Getting Started Tutorial that runs on both Android and iOS.

To learn more about developing a cross-platform application in Flutter, please see our Flutter chat demo and Flutter Getting Started Tutorial where you can see the application running on Android, iOS, Windows desktop, Mac, Linux and the browser.

If you would like to see this Flutter application running on more platforms, I recorded an informal video available on YouTube

PubNub runs cross-platform and whatever your use case or architecture we have a solution for you.  Please reach out to us if you would like to discuss your solution with one of our technical experts.

Samples, Demos and Links given in this guide:

Web application-only approach:

• JavaScript SDK documentation

• JavaScript SDK tutorial

• React Group Chat demo

A mixture of web app plus native applications:

• PubNub Chat Components

• Cross-Platform tutorial using Chat Components

• Android and iOS SDK tutorial that intercommunicate

A framework that supports compilation to different platforms:

• Dart SDK (for Flutter apps)

• The React and JavaScript SDKs (for React Native apps)

• The C# SDK (for Xamarin apps)

• React Native tutorial

• Flutter chat demo

• Flutter tutorial