Before we begin, Pusher Channels (or simply Pusher) provides real-time communication between Servers and Apps. We used it when building Brunch, and it really helped us improve the overall User Experience.

What is Pusher?

With Pusher Channels you can build basically any real-time feature. To be more specific, you can do things like real-time charts, user lists, maps, notifications, multiplayer games, and many other kinds of UI updates. The possibilities are endless.

Let’s dive more into this and see how Pusher does this. When something happens on your server, it can send an update to your Web App so you can update your UI. It also works the other way around; when an event happens on your Web App, it can notify the server. Under the hood, Pusher uses WebSockets and HTTP, and provides fallbacks for devices that don’t support WebSockets.

I’ve also added a piece of code at the end of this article to help you get started with Pusher in no time.

How we use Pusher at Brunch?

To better understand Pusher and how can you use it in your own Web App, let’s take a real example of how we use it here at Brunch for delivering Notifications.

When a user goes to Brunch, it will subscribe to a Private Channel. Pusher has 4 kinds of channels: Public, Private, Encrypted, and Presence. You can read more about each of them in their documentation. We use Private Channels here because they will authenticate the user before letting him connect to the channel. Basically, it will call an endpoint in our API that will tell Pusher if the user can connect to the channel or not.

Now that we established a connection between the user and the server; when an event like “a team member creates a new project” or “a feedback is added in one of the teams I’m part of” occurs, the server will publish the notification to the user’s private channel. From there, on the Front-End, a new event is triggered, so we can update the UI and display the notification to the user.

Another example from Brunch is using Pusher Presence channels to show online members working on the same project page and keep changes in sync. When multiple users are on the same project page, you can see a list of all connected members and if a user makes an action (for example add a new feedback) the change is then pushed to the other members so their UI is also up to date with the latest change. This really helps us create a good collaborative experience.

These are only 2 examples of how we use Pusher here at Brunch. I hope this helped you understand how this kind of service can significantly improve the User Experience of a Web App in 2021.

Find below a very simple example using public channels with a NodeJS server and a Javascript client.

For a more in-depth quick start guide and more examples, check out their documentation.

If you have any questions or want to reach me, check out my website.