Use Cases and Considerations When Building a Realtime Application

We are in a rapidly changing world. We rely on our smartphones, laptops, smartwatches and other gadgets to give us information on time and upon request. Data is transmitted from a data center back to us on any medium we choose to consume content. In this article, we will see how and in what cases we can implement realtime features in our application. We will consider how adding realtime features can improve your service.

These days, we do not need to refresh our browsers or reload an application to get updated information because now we have realtime communication that is fast and more importantly, instant.

What is realtime data?

Realtime data is information that is delivered after it has been processed with little or no latency. Delivery time can vary between milliseconds and microseconds.

When building applications that users consume, you might want the user to get feedback on a certain action, or see other actors that are concurrently acting on the same service. In such instances, utilizing realtime features will make your application look alive.

What are some real-world applications of realtime communication?

Instant messaging

Instant messaging apps, as the name implies, are applications that allow users to communicate with each other in realtime without any delay.

However, instant messaging applications have more features than just delivering messages in time. You can see the online status of your friends for instance. You can also see when your friend is typing a message to you in realtime.

Other realtime features that an instant messaging application can have are:

• Realtime delivery status of your messages.
• Realtime read status of your messages.
• Realtime online count of the users available to chat.

These features give an instant messaging application much more life than just promptly delivering messages.

Maps

Another way realtime technologies can be used is on maps. Maps provide a way we can see directions to a particular location. However, that’s not all a map can do. Applications like Google Maps allow users to share their live location with other users. Uber also allows users to share their live trip with other users.

The information transmitted has to be in realtime so the other user can track the details of the journey. With realtime technology, you can improve the map experience on your own application.

You can see how to create a realtime map with tracking on Android here.

Stocks

When you are looking at the stock market, numbers go up and down, so, it is very necessary to be able to see the instant the numbers change. With zero, or close to zero, latency, it will be very unwise to not add realtime features to any stocks application.

You can see how to create a stock market application using JavaScript here.

Cryptocurrency

Just like the stock market, cryptocurrency has a volatile market with prices going up and down at a moment’s notice. When creating a cryptocurrency application, it will be beneficial to add realtime features to the application. This will make it easy to know exactly when prices change and react based on the information.

You can see a demo of how we created a cryptocurrency application using Pusher Channels and Pusher Beams on iOS and Android.

News and live blogging

The news has evolved over time and now we consume most of our news content on our mobile phones. Granted you may not want the news article themselves to update in realtime, but there is a new type of news reporting called live blogging.

This kind of news is useful when you are tracking an event that is happening live like a soccer game. In this type of scenario, you need the content to be updated in realtime and without the need for a refresh on your application.

You can see how we built a live blog using Swift and Go with realtime features here.

Social media

Social platforms like Twitter absolutely rely on you, the user, seeing everything happen in realtime. Be it a like on your status, a new follower, or a retweet count, having them update in realtime is critical to social platforms.

You can see how to implement a realtime status update feature using JavaScript here.

Noteworthy considerations

When building realtime applications, there are some things to take note of:

Secure all the things

When building realtime applications, you need to consider security. The last thing any application wants is someone eavesdropping on a realtime channel and gathering data from the channel. Depending on the way your realtime solution is implemented, there might be many ways of handling security.

Pusher offers a secure way to transport your data while using Channels. A channel can either be marked as either public or private.

The difference is their accessibility. Every piece of data transmitted via a public channel is available to anyone that subscribes to that channel. And though the data is publicly accessible, the data can be encrypted for additional security.

Here’s how a typical Pusher instance may look (JavaScript):

javascript
1var Pusher = require('pusher');
2
3    var pusher = new Pusher({
4      appId: 'APP_ID',
5      key: 'APP_KEY',
6      secret: 'APP_SECRET',
7      cluster: 'APP_CLUSTER'
8    })
9
10    pusher.trigger('messages', 'new-messages', {
11      "message": "Hey, whats good?"
12    })
Copy

This will trigger a new event new-messages on the channel named messages. Along with the triggered event, it will pass the object with the message: “Hey, whats good?”.

On the client side, we can listen for this event. A thing to note is that a channel can have multiple events. Here’s how to listen to events in JavaScript:

javascript
1var pusher = new Pusher('PUSHER_APP_KEY', {
2        cluster: 'PUSHER_APP_CLUSTER',
3        encrypted: true
4    })
Copy

This will initialize Pusher on the client side with a secure connection. With this connection, we can now subscribe to the messages channel and bind or listen for the new-messages event as seen below:

javascript
1[...]
2
3    var channel = pusher.subscribe('messages');
4
5    channel.bind('new-messages', data => console.log(data))
Copy

Alternatively, you can create a private channel. This will require authentication though. You can learn more about private Pusher Channels here.

Performance

Assume you want to build a realtime dashboard to show certain details, you may have chosen to build it using AJAX and maybe some setInterval fetching logic. However, this could become a performance hit as it will keep making new requests every time to the backend server.

Services like Pusher Channels use web sockets to provide realtime updates. The sockets stay open and make it easy to transmit data on a single connection.

Pusher Channels provides realtime communication between servers, apps, and devices. Pusher Channels is used for notifications, chat, gaming, web-page updates, IoT, and many other systems requiring realtime communication.

When something happens in your system, it can update web-pages, apps, and devices. When an event happens on an app, the app can notify all other apps and your system. For example, If the price of Bitcoin changes, your system could update the display of all open apps and web-pages. Or if Bob starts typing a message, his app could tell Alice’s app to display “Bob is typing …”. – Pusher documentation.

Additionally, you can achieve more with less code using Pusher. You can even throw in a push notification while you are at it:

javascript
1const PushNotifications = require('@pusher/push-notifications-server');
2
3    let pushNotifications = new PushNotifications({
4      instanceId: 'PUSHER_BEAMS_INSTANCE_ID_HERE',
5      secretKey: 'PUSHER_BEAMS_SECRET_KEY_HERE'
6    });
7
8    let payload = {
9      apns: {
10        aps: {
11          alert: 'Hello!'
12        }
13      }
14    } 
15
16    pushNotifications.publish(['interest'], payload).then(res => console.log(res));
Copy

User experience

Making your applications realtime improves user experience overall. Seemingly small features like who’s typing or who’s online on an instant messenger application can prove to be an important factor for engagement.

Pusher offers presence channels that make it easy for you to implement the who’s currently online feature on your application. A presence channel can easily be created by prefixing the channel name with presence-.

javascript
1var presenceChannel = pusher.subscribe('presence-chat');
Copy

This feature can be used in group chat applications, multiplayer games, collaboration apps and so on.

You can learn more about presence channels via the official documentation.

Conclusion

In this article, we have considered why you should think about adding realtime features to your application. We have also seen when and when using realtime features may be appropriate.

If you would like to see more tutorials on how you can create realtime applications, check out the Pusher tutorials blog.