When building an application it's often useful to know when certain events take place. This enables your application to respond in realtime and can be used in a number of ways. In this article, we will focus on how to implement message delivery status in an iOS application.
This tutorial assumes you already have knowledge of Swift and Xcode, and does not go into too much detail on how to use Xcode or the Swift syntax.
The application will be an iOS chat application, and the application will allow you to post messages and see the delivery status of the message once it has been sent. This feature is similar to what you can find in chat applications like WhatsApp, Facebook Messenger, BBM and others.
Note: You will need a Pusher account to work with this tutorial. You can create one for free by clicking here. Create a new application and note your cluster, app ID, secret and key; they will all be needed for this tutorial.
Now that you have that installed, launch Xcode and create a new project. We are calling ours Anonchat.
What we have done above is create a the first ViewController which will serve as our welcome ViewController, and we have added a button which triggers navigation to the next controller which is a Navigation Controller. This Navigation Controller in turn has a View Controller set as the root controller.
Now that we have created that, we create another controller called the ChatViewController, which will be the main power house and where everything will be happening. The controller will extend the JSQMessagesViewController so that we automatically get a nice chat interface to work with out of the box, then we have to work on customising this chat interface to work for us.
In the class above we have extended the JSQMessage class and we have also added some new properties to track; the id and the status. We also added an initialization method so we can specify the new properties before instantiating the JSQMessage class properly. We also added an enum that contains all the statuses the message could possibly have.
For the last piece of the puzzle, we want to create the method that listens for Pusher events and fires a callback when an event trigger is received.
let message = self.addMessage(senderId: author, name: author, text: text) as! AnonMessage?
So in this method, we have created a Pusher instance, we have set the cluster and the key. We attach the instance to a chatroom channel and then bind to the new_message event on the channel. Remember to replace the key and cluster with the actual value you have gotten from your Pusher dashboard.
Now that we are done with the iOS and Xcode parts, we can create the NodeJS back end for the application. We are going to be using Express so that we can quickly whip something up.
Once you have your local node web server running, you will need to make some changes so your application can talk to the local web server.
In this tutorial, we have explored how to create an iOS chat application with a message delivery status message after the message is sent to other users. For practice, you can expand the statuses to support more instances.
Have a question or feedback on the tutorial? Please ask below in the comment section. The repository for the application and the Node backend is available here.