How to use Pusher Channels with Adonis

Introduction

In this tutorial, I’ll show you how to integrate Pusher Channels into an existing Adonis application of yours. In my opinion Adonis is a must-have tool for a dev for its simplicity and efficiency but coupled with the power of Pusher Channels, the combo could not be more astonishing 😍. You can really come up with very awesome apps.

Prerequisites

This tutorial assumes you have an existing Adonis project already set up with all the required dependencies. I’ll guide you through the steps involved in integrating Pusher Channels to your project.

Set up Pusher

To get started with Pusher Channels, create a free sandbox Pusher account or sign in.

Next, you should create a new Pusher Channels app instance. This registration provides credentials which can be used to communicate with the created Pusher instance. Copy the App ID, Key, Secret, and Cluster from the App Keys section and put them in the .env file located at your project root:

bash
1//.env
2        PUSHER_APP_KEY=<APP_KEY>
3        PUSHER_APP_SECRET=<APP_SECRET>
4        PUSHER_APP_ID=<APP_ID>
5        PUSHER_APP_CLUSTER=<APP_CLUSTER>
Copy

We’ll use those keys further in this tutorial to link Pusher with our Adonis project.

If you complete this step you’ll now need to install the Pusher SDK as well as other necessary dependencies. We won’t use the Pusher SDK directly but instead use a Pusher provider for Adonis. This provider acts as an interface between the Pusher SDK and the Adonis.js ecosystem. But we should first install the Pusher SDK by running this command:

bash
1#if you want to use npm
2    npm install pusher
3
4    #or if you prefer Yarn
5    yarn add pusher
Copy

Now, you can install the Pusher provider for Adonis with this command:

bash
1#if you want to use npm
2    npm install adonis-pusher
3    
4    #or if you prefer Yarn
5    yarn add adonis-pusher
Copy

Last you will need to add the provider to AdonisJS at start/app.js:

javascript
1const providers = [
2        ...
3        'adonis-pusher/providers/Pusher'
4    ]
Copy

How to emit events

This section will focus on emitting server-side events with data. With Pusher Channels, you can open a bidirectionnal connection between your browser or client and your backend in such a way that they can communicate easily and with no interruption. So all data sent to this open channel is received by the other part involved in this communication. Let’s see how we can implement this in practice. First we have to fire events with Adonis.js and then tell what to do when those events are fired.

          Event.fire('new::event', data)

This simple line of code tells your Adonis app to emit/fire the new::event event and with it any data you want to send throughout your Adonis channel, as it happens data . You can fire your event from any controller function of your project provided you define your event name and the data you want it to carry 🙂 . But the event you submit above doesn’t have any listener, so you have to define a listener for it. Inside the listener we’ll trigger a new channel from our backend every time our new::event is emit. That’s the mechanism.

Emit events with Pusher Channels

Create a file named event.js in the start directory of your project. In this file, we’ll define our event that will be fired every time we need to send a message via Pusher Channels.

javascript
1//events.js
2    
3    const Pusher = use('Pusher')
4    const Event = use('Event');
5    const Env = use('Env');
6    
7    // set up Pusher
8    let pusher = new Pusher({
9      appId: Env.get('PUSHER_APP_ID'),
10      key: Env.get('PUSHER_APP_KEY'),
11      secret: Env.get('PUSHER_APP_SECRET'),
12      cluster: Env.get('PUSHER_APP_CLUSTER'),
13      encrypted: false
14    });
15    
16    //fire new event
17    Event.when('new::event', async (comment) => {
18      pusher.trigger('new-channel', 'pusher-event', {
19        comment
20      })
21    });
Copy

First, we need to pull in the Event, Pusher (using the adonis-pusher package we installed earlier) and Env service providers.

Next, we registered a listener for the new::event event, after which we initialize and configure Pusher.

When we are done with the Pusher configuration, we trigger a pusher-event event on our new-channel with the trigger method. The new-channel (a Pusher channel) as I said above is an open bidirectionnal connection between your browser(client) and your backend to enable realtime exchanges of data. Great isn’t it? 😎

Subscribe to your Pusher channel

From your client, you can simply subscribe to your channels with the following block of code:

javascript
1//main.js for example
2    let pusher = new Pusher(`YOUR_PUSHER_APP_ID`, {
3            cluster: `YOUR_PUSHER_CLUSTER`,
4            encrypted: false
5          });
6    
7          //Subscribe to the channel we specified in our Adonis Application
8          let channel = pusher.subscribe('new-channel')
9    
10          channel.bind('pusher-event', (data) => {
11                //do here any process you want with the data retrieved
12          })
Copy

First we declare a new instance of Pusher using our credentials. Then we simply subscribe to our channel we defined from our backend, and last we can listen to our pusher-event.

Conclusion

We’re done for this tutorial. I do hope you’ve understood how you can integrate Pusher Channels to your Adonis project. If you enjoy the lesson, I think you can build great apps with this nice combo. You can take a look at the Github repo if you want, it depicts a real word use case of what we’ve seen in this tutorial.