Scalable Real-time Communication With Pusher (2024)

What and why?

Pusher is a hosted API service which makes adding real-time data and functionality to web and mobile applications seamless.

Pusher works as a real-time communication layer between the server and the client. It maintains persistent connections at the client using WebSockets, as and when new data is added to your server. If a server wants to push new data to clients, they can do it instantly using Pusher. It is highly flexible, scalable, and easy to integrate. Pusher has exposed over 40+ SDKs that support almost all tech stacks.

In the context of delivering real-time data, there are other hosted and self-hosted services available. It depends on the use case of what exactly one needs, like if you need to broadcast data across all the users or something more complex having specific target groups. In our use case, Pusher was well-suited, as the decision was based on the easy usage, scalability, private and public channels, webhooks, and event-based automation. Other options which we considered were Socket.IO, Firebase & Ably, etc.

Pusher is categorically well-suited for communication and collaboration features using WebSockets. The key difference with Pusher: it’s a hosted service/API. It takes less work to get started, compared to others, where you need to manage the deployment yourself. Once we do the setup, it comes to scaling, that reduces future efforts/work.

Some of the most common use cases of Pusher are:

1. Notification: Pusher can inform users if there is any relevant change. Notifications can also be thought of as a form of signaling, where there is no representation of the notification in the UI. Still, it triggers a reaction within an application.

2. Activity streams: Stream of activities which are published when something changes on the server or someone publishes it across all channels.

3. Live Data Visualizations: Pusher allows you to broadcast continuously changing data when needed.

4. Chats: You can use Pusher for peer to peer or peer to multichannel communication.

In this blog, we will be focusing on using Channels, which is an alias for Pub/Sub messaging API for a JavaScript-based application. Pusher also comes with Chatkit and Beams (Push Notification) SDK/APIs.

• Chatkit is designed to make chat integration to your app as simple as possible. It allows you to add group chat and 1 to 1 chat feature to your app. It also allows you to add file attachments and online indicators.
• Beams are used for adding Push Notification in your Mobile App. It includes SDKs to seamlessly manage push token and send notifications.

Step 1: Getting Started

Image Source: Pusher

1. Click on Channels
2. Create an App. Add details based on the project and the environment
3. Click on the App Keys tab to get the app keys.
4. You can also check the getting started page. It will give code snippets to get you started.
   

Add Pusher to your project:

CODE: https://gist.github.com/velotiotech/f09f14363bacd51446d5318e5050d628.js

or using npm

CODE: https://gist.github.com/velotiotech/423115d0943c1b882c913e437c529d11.js

Step 2: Subscribing to Channels

There are three types of channels in Pusher: Public, Private, and Presence.

• Public channels: These channels are public in nature, so anyone who knows the channel name can subscribe to the channel and start receiving messages from the channel. Public channels are commonly used to broadcast general/public information, which does not contain any secure information or user-specific data.
• ‍Private channels: These channels have an access control mechanism that allows the server to control who can subscribe to the channel and receive data from the channel. All private channels should have a private- prefixed to the name. They are commonly used when the sever needs to know who can subscribe to the channel and validate the subscribers.
• ‍Presence channels: It is an extension to the private channel. In addition to the properties which private channels have, it lets the server 'register' users information on subscription to the channel. It also enables other members to identify who is online.
  

In your application, you can create a subscription and start listening to events on:

CODE: https://gist.github.com/velotiotech/d8c27960e2fac408a8db57b92f1e846d.js

Step 3: Creating Channels

For creating channels, you can use the dashboard or integrate it with your server. For more details on how to integrate Pusher with your server, you can read (Server API). You need to create an app on your Pusher dashboard and can use it to further trigger events to your app.

or

Integrate Pusher with your server. Here is a sample snippet from our node App:

CODE: https://gist.github.com/velotiotech/6f5b0f6407c0a74a0bce4b398a849410.js

Step 4: Adding Security

As a default behavior, anyone who knows your public app key can open a connection to your channels app. This behavior does not add any security risk, as connections can only access data on channels.

For more advanced use cases, you need to use the "Authorized Connections" feature. It authorizes every single connection to your channels, and hence, avoids unwanted/unauthorized connection. To enable the authorization, set up an auth endpoint, then modify your client code to look like this.

CODE: https://gist.github.com/velotiotech/9369051e5661a95352f08b1fdd8bf9ed.js

For more details on how to create an auth endpoint for your server, read this. Here is a snippet from Node.js app

CODE: https://gist.github.com/velotiotech/fb67d5efe3029174abc6991089a910e1.js

Step 5: Scale as you grow

Pusher comes with a wide range of plans which you can subscribe to based on your usage. You can scale your application as it grows. Here is a snippet from available plans for mode details you can refer this.

Image Source: Pusher

Conclusion