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:
Creating a web application to run everywhere
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.
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.
Web applications using React
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.
The tutorial app for React Chat Components, running in Safari
Chat Components also support platforms other than React, which will be discussed in the next section.
A mixed approach, developing separate apps for web and native environments
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.
Web application plus any native SDK
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.
The getting started tutorial application for both Android and iOS, communicating cross-platform
A framework that supports compilation to different platforms and architectures
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.
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.
The SDK getting started tutorial application for React Native, compiled for Android and iOS, communicating cross-platform
The getting started tutorial application for Flutter, compiled for the web and running in Chrome
The getting started tutorial application for Flutter, running on Ubuntu Linux
The getting started tutorial application for Flutter, running as a Windows desktop app communicating with the same app running in the browser, on Ubuntu, and on Android
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:
A mixture of web app plus native applications:
Android and iOS SDK tutorial that intercommunicate
A framework that supports compilation to different platforms: