iOS Chat Components Release: Create a Chat App for iOS
We're excited to announce the release of our iOS Chat Components. We've created ready-to use-components for iOS developers that make it simple to add essential chat features to your app while reducing your time to market. With our iOS Chat Components you're free to focus on building what you actually care about. Sign up to learn more about our iOS Chat Components release using the form below. Then, read on to learn how you use our new iOS components in an existing open-source iOS app.
PubNub’s iOS Components for Chat enable mobile developers to create rich and flexible chat experiences without the opportunity cost of the time spent building chat features.
Don’t reinvent chat UI components and build the infrastructure yourself when PubNub has already done it for you - you could be focused on other parts of your application! No need to go through the complexity of designing the architecture of a realtime network. Instead, use our components, predefined repositories, and view models to create custom apps for a wide range of use cases.
Our set of iOS Chat Components are packed with the features you’d expect from any chat experience:
User and Channel Metadata: Fetch metadata about users, channels, and memberships from App Context storage using custom hooks.
Channel Subscription Management: Automatic subscriptions to current channel and optional subscriptions to other channels and channel groups.
Messages: Publish and listen to text messages and fetch history for each channel.
Presence: Fetch currently present users and listen to new presence events like a user subscribing or leaving.
Typing Indicators: Typing indicators displayed as text notifications or messages.
Persistent Data Storage: Store messages, channels, and users locally for offline use.
Our iOS Chat Components are modifiable to your requirements so you’re free to create chat for various use cases all with different functionalities and customizable looks.
Build a telemedicine chat app, multiplayer chat lobby, live support chat center, live event chat lobby, or another style of chat with minimal effort. Build a powerful and modular mobile chat app using these components as a starting point. Best of all: There’s no need to deal with server code at all. PubNub powers all of the messaging features: message delivery in real-time, metadata, presence, and other chat-related data to facilitate the actions within the chat UI components.
This tutorial series demonstrates how to take PubNub iOS Chat Components and integrate them into any iOS app. All the steps you need to use the components are included in this post.
For this tutorial we’ve selected a open-source iOS app we found on GitHub that could benefit from chat as an additional feature.
This post was created with Xcode Version 13.2.1 and the latest version of our Chat Components for iOS. We recommend using the latest version of Xcode available.
This weather app will be used as our starting point. We’ll begin by setting this app up and then we’ll add chat powered by PubNub iOS Chat Components.
The end goal is a weather app where users can chat about the weather based on the location of their device or the location they selected manually.
We picked this app because *it wasn't created by PubNub* and we want to show you how you can use our iOS components in real apps like this one.
The complete app with PubNub iOS Chat Components can be found in this repo. In the complete app we’ve done everything in this tutorial and refactored the app we started with to follow best Swift practices so that you can see how you would expand further.
How can you create a chat app for iOS with PubNub?
Before using PubNub iOS Chat Components, you should know why PubNub is the best choice for powering them. PubNub is used for real-time message delivery, metadata, presence, and other chat related data to facilitate the actions within the chat UI components.
PubNub is a fantastic backend API for all types of real-time chat applications because it offers a lot of functionality that never have to build yourself. Some essential advantages of PubNub are:
PubNub delivers billions of messages every day and will effortlessly scale with your application as it grows.
Presence features are built-in. Easily create online and offline indicators and typing indicators.
Storage and Playback for message persistence. Persistence is essential for a complete user experience.
Mobile Push Notifications support for iOS and Android mobile apps. Keep users online by alerting them of new messages.
PubNub iOS Chat Components have PubNub services fully incorporated and are ready to use in an existing iOS App. It’s recommended that you’re familiar with Swift and iOS development if you wish to modify the iOS components for use in your application. However, you can absolutely follow along, explore, and use these iOS Chat Components without prior experience.
Available mobile chat components to create a chat app for iOS
The following chat components are included with PubNub iOS Chat Components:
MemberList: List of users with properties like names, titles, or avatars.
MessageList: List of messages with sender details.
MessageInput: Field to send messages to chat rooms. When you type this component also triggers typing indicators for other users.
ChannelList: List of channels that represents chat rooms in the application. We won’t be using this component in this tutorial. However, it’s easy to include if it’s necessary in your application.
Now that you have an understanding of the available components for iOS, let’s explore how you set up your chat API to try them out.
Setting up a chat API for Mobile Chat Components
You’ll need to set up a PubNub account to use PubNub iOS Chat Components. The end result will be two API keys that you’ll use in your mobile chat application. A PubNub account and API keys are always free (perfect for startups).
You’ll first need to sign up for a free PubNub account.
Sign in to your PubNub Dashboard.
Go to Apps.
Click Create New App.
Give your app a name.
Click Create.
Click your new app to open its settings.
When you create a new app the first set of keys is generated automatically. However, a single app can have as many keysets as you like. PubNub recommends that you create separate keysets for production and test environments.
Select a keyset.
Enable the Channel Presence feature for your keyset. This will be used to show how many users are active.
Enable the Storage and Playback feature for your keyset. If you don’t plan to need message persistence then you can leave this off.
Enable any other functionality you plan to use (if desired).
Save the changes.
Copy the Publish and Subscribe keys for the next steps.
How to use iOS Chat Components in your application
Now that you have your PubNub API keys you can begin building with iOS Chat Components. Get started by downloading an existing weather app that we will add chat components to.
Getting Started with iOS Chat Components
Download this weather app at this commit. This was the last commit of the sample app before we added iOS Chat Components. We picked this app because *it wasn't created by PubNub* and we want to show you how you can use our iOS components in real apps like this one. We’ll start from there so you can add them yourself. If you clone the repo at the latest commit you’ll get the completed app.
Download the .zip of the commit and extract the folder. Or clone the repo and switch to this commit e9232c7. You can also use the 'Open with Xcode' button in GitHub.
Open the file ‘Sun.xcodeproj’ in Xcode.
Open ‘Supporting Files > Constants.swift’. We need to configure the Weather API and add our PubNub configuration here.
Go to https://home.openweathermap.org/users/sign_up to get an API key for fetching the weather. The account is free and you can build this app without a paid plan.
Paste your API key in the quotations beside let “apiKey =”
In the same file add the following at the bottom:
Replace “pub-c-key” and “sub-c-key” with your PubNub API keys.
Install iOS Chat Components
Inside the Xcode project, select File > Add Packages..., and enter the iOS Components repository URL:
After the package details load, click the Add Package button in the lower right corner.
For any additional questions about adding packages in Xcode, refer to Apple documentation.
Building Chat Features with iOS Chat Components in Xcode
Open ‘View Controllers > ViewController.swift’. For the rest of this tutorial we’ll be (mostly) focusing on this file. All of our chat functionality will live here.
Under “import CoreLocation” add the following to import PubNub, PubNubChat, and PubNubChatComponents:
Directly under “class ViewController: UIViewController” add the following to create a ChatProvider instance, declare the variable we’ll use for the current channel, and a UIView for our chat. After that we’ll create our PubNub configuration and a function to generate a short random string to use as the UUID and username of our chat users. You must create a UUID for each unique user. All of our users in this app will be anonymous ids.
Now we can create a function for handling a button press that’ll show our chat UIView. We’ll create a button to link this function to in a later step. Directly after that we’ll also create a function to load the data into the chatProvider for our chat app and handle subscribing to the current channel.
At the bottom of “override func viewDidLoad()” add the following code to create a new chat provider and call the function to load data:
We also need to update the provider with new channels when the user changes location. In the function “updateInterfaceWith()” add the following inside “DispatchQueue.main.async”:
Your entire “ViewController.swift” file should now look like this:
The next step is to create a button to show the chat UIView and link it to the “startChat” function.
Open “Main.storyboard”. Duplicate the search button in the view (or make a new button), change the icon to “paperplane.circle”, and position the button where you want to. You should now have something that looks like this:
Switch to the Connections inspection (last tab on the right) and remove the link on “Touch Up Inside” if you duplicated the search button. Add a second editor and open ‘View Controllers > ViewController.swift’. Create a new link between “Touch Up Inside” and the “startChat” function by dragging from the empty circle beside “Touch Up Inside” to the “startChat” function.
[Optional step] Uncomment the following lines in “ViewController.swift” to see PubNub publish events, subscribes, and messages moving through the network:
Start the app in the simulator. Allow location or search for a location. Click the chat icon to open the chat window and start chatting!
What’s Next with iOS Chat Components
In this tutorial we took a look at how PubNub iOS Chat Components can be implemented in an existing app and we configured and started customizing the iOS Chat Components.
The complete Weather-Chat app with PubNub iOS Chat Components can be found in this repo. In the complete app we’ve done everything in this tutorial and refactored the app to follow best Swift practices so that you can see how you would expand further.
With PubNub iOS chat components you can build chat in a way that’s customized perfectly for your needs. PubNub provides a real-time publish/subscribe messaging API built on a global network. PubNub has multiple points of presence on every inhabited continent, supports dozens of SDKs, and has lots of features you’ll need in a chat application use case.
PubNub iOS Chat Components make a great starting point to build chat that you can customize to your exact needs. There isn’t any one size fits all Chat Components solution, but PubNub iOS Chat Components offer the most popular chat functionality that we have seen developers implement.
Use PubNub to build features into your application like:
Need some assistance modifying or building with iOS Chat Components? Get in touch with our sales team and we’ll help you get started.
