MetaImage

How to Build Medium’s Real-Time Applause Feature With Angular and Pusher

In this article, you’ll learn how to code real-time Angular apps with Pusher. We’ll make an app that gives real-time feedback when a post is clicked—just like Medium’s applause feature!

What Is Pusher?

Pusher is a service that provides developers with APIs which enable them to integrate real-time functionalities in web, mobile, and back-end applications. To learn more about Pusher, check out this tutorial video for an introduction.

  • Cloud Services
    Get Started With Pusher: Introducing Channels
    Jeremy McPeak

Getting Started With Pusher in Angular

As mentioned at the beginning of this tutorial, our app will give real-time feedback whenever someone clicks a post. 

For starters, make sure you have Node and npm installed on your machine. You’ll also need Angular CLI to quickly bootstrap our app, so make sure you have it installed as well. If you don’t have Angular CLI installed, simply issue the following command.

Next, use Angular CLI to create the Angular app.

The UI of our app will be very simple. It will have a post, an applause button which will be represented by a hand icon, and a counter of the number of claps the post has garnered. Open app.component.html and add the following code, in which we tie the click event to the Applause() function.

Adding Pusher to Your App

We will first need to install the Pusher library with the npm install command. 

Next, load the Pusher Library by adding the following script in the angular.json file.

You will also need to have Pusher credentials, which can be obtained from the Pusher dashboard.

To obtain the credentials, log in to the Pusher dashboard and click Create new app. You will then fill out some details about your application and finally click on Create my app. Pusher also gives you some code to get started according to the technology you have chosen. The most important aspect of this process is the app credentials, which can be found on the App Keys tab.

Integrate the Pusher Service

We will then create our PusherService by running the command:

The above command will create two files, namely pusher.service.ts and pusher.service.spec.ts, which contain some boilerplate code to get started

Now import the service in the main module and include it as a provider as follows:

Angular also provides an environment file for storing credentials for security purposes: include your pusher key in environment.ts.

Next, import the environment module for use, declare Pusher as an import from the script we added earlier in angular.json, and declare a Pusher constant in the PusherService file as follows:

We want to make a request containing the number of claps to the server whenever a person likes a post and also subscribe to our Pusher channel. Go ahead and include the HttpClient in the constructor of the PusherService. Your pusher.service file should now look like this:

Next, create a function that sends the number of claps to the server when the applause button is clicked.

Still on the client side, we will write a function that listens for click events from the angular application and increments the number of claps. We will also bind the Pusher service to our event.

Building the Node.js Server

A server will be used to receive the data requests from the Angular app—we’ll build it using Express, a simple and fast Node.js framework.

Create a directory named server, and run the following commands.

This creates all the necessary files to bootstrap a Node.js application. Next, install the Pusher, Express, and body-parser modules.

Next, create a file index.js and import all the required modules:

The next step is to initialize Pusher by instantiating Pusher with the necessary credentials. You can obtain the credentials from the Pusher dashboard.

Define middleware, CORS headers, and the rest of the Node application configurations.

We will then create the endpoint that will listen to any incoming requests from our Angular app. The endpoint will get the number of claps from the client and then trigger a messaging event.

Our server is now complete; you can start listening to incoming subscriptions by running npm start.

Testing Our App

Now run the client and server at the same time by issuing ng serve for the Angular app and npm start for the Express Server.

Ensure you have enabled client events on the Pusher dashboard, as shown below.

Enable Client events

Navigate to http://localhost:4200 and start interacting with the app by clicking on the applause button. Ensure you have two tabs side by side so that you can observe in real time how the number of claps increases when a post is liked.

Real time Pusher

Another cool feature of Pusher is that you can view all the connections and messages sent by using the dashboard. Here’s a screenshot of the dashboard for this app.

Pusher Activity

Conclusion

As you have seen, it’s very easy to integrate Pusher with an Angular app. This makes it possible to add functionality like real-time data sharing and push notifications to your app.

Pusher is also available for different platforms, so head over to the site and discover the magic of Pusher.

Powered by WPeMatico

Leave a Comment

Scroll to Top