Broadcasting in AdonisJS

Arthur Emanuel — Tue, 05 Oct 2021 01:12:16 +0000

In this tutorial we'll build a broadcasting module for AdonisJS which resembles Laravel Broadcasting features (you can even use Laravel Echo). This module will cover up many of the websockets use cases in a simple manner.

It is great for cases where the clients need to receive data in real-time, but don't need to send data in real-time.

Good use cases are:

Chats
Live dashboards
Sport scores

Bad use cases are:

Games
Work together platforms

Let's build it!

Scaffolding a new app

Create a new AdonisJS project

$ npm init create-adonis-ts-app broadcasting
$ yarn create adonis-ts-app broadcasting

When prompted which project structure, select web and flag

Configure webpack for compiling frontend assets? true

Setting up our Broadcast server

Our broadcast module will be based in an open-source Pusher compatible server called pWS.

First, we will install it

$ npm i @soketi/pws
$ yarn add @soketi/pws

We can start the server by running

$ npm pws-server start
$ yarn pws-server start

But we need to configure it before running, so we will make a configuration file for it in config/broadcasting.ts

// config/broadcasting.ts
import Env from '@ioc:Adonis/Core/Env'

const broadcastingConfig = {
  port: Env.get('BROADCASTING_PORT', 6001),
  appId: Env.get('BROADCASTING_APP_ID', 'app-id'),
  appKey: Env.get('BROADCASTING_APP_KEY', 'app-key'),
  appSecret: Env.get('BROADCASTING_APP_KEY', 'app-secret'),
}

export default broadcastingConfig

The configs won't get magically loaded into pWS, so we will make a command to start it. To start it we will use execa. So install it using:

$ npm i execa
$ yarn add execa

and create a command with

$ node ace make:command StartPws

The command will look like this:

// commands/StartPws.ts
import { BaseCommand } from '@adonisjs/core/build/standalone'
import execa from 'execa'

export default class StartPws extends BaseCommand {
  public static commandName = 'start:pws'
  public static description = 'Start the pWS server with Adonis Configs'
  public static settings = {
    loadApp: true,
    stayAlive: true,
  }

  public async run() {
    const broadcastingConfig = this.application.config.get('broadcasting')
    const command = `
      PORT=${broadcastingConfig.port}
      DEFAULT_APP_ID=${broadcastingConfig.appId}
      DEFAULT_APP_KEY=${broadcastingConfig.appKey}
      DEFAULT_APP_SECRET=${broadcastingConfig.appSecret}
      yarn pws-server start`
    await execa(command, { shell: true }).stdout?.pipe(process.stdout)
  }
}

After creating the command, we need to regenerate the ace manifest, so it catches our new command, do it by running:

$ node ace generate:manifest

Then you can run it with

$ node ace start:pws

Broadcasting events

As pWS is a drop-in Pusher replacement, we can interact with it using any Pusher client, as AdonisJS is a node framework, we will use the node Pusher client. Start by installing the node Pusher client:

$ npm i pusher
$ yarn add pusher

Then we will create a service to interact with the pWS server, it can be done as a simple service or as a AdonisJS provider, in this tutorial we will go the service way.

// app/Services/Broadcast.ts
import Pusher from 'pusher'
import broadcastingConfig from 'Config/broadcasting'
import Env from '@ioc:Adonis/Core/Env'

class Broadcast {
  private pusher = new Pusher({
    host: Env.get('HOST', 'localhost'),
    port: broadcastingConfig.port,
    appId: broadcastingConfig.appId,
    key: broadcastingConfig.appKey,
    secret: broadcastingConfig.appSecret,
  })

  public async broadcast(channel: string | string[], event: string, data: any) {
    const response = await this.pusher.trigger(channel, event, data)
    return response
  }
}

export default new Broadcast()

With this service we can broadcast events by simply using

import Broadcast from 'App/Services/Broadcast'

await Broadcast.broadcast('test-channel', 'event', 'data')

Listening to events

To listen to events in our frontend we can use PusherJS paired with Laravel Echo. Start by installing both:

$ npm i -D laravel-echo pusher-js
$ yarn add -D laravel-echo pusher-js

Set them up in our frontend:

// resources/js/app.js
import '../css/app.css'
import Echo from 'laravel-echo'

window.Pusher = require('pusher-js')
window.Echo = new Echo({
  broadcaster: 'pusher',
  wsHost: 'localhost',
  wsPort: 6001,
  forceTLS: false,
  disableStats: true,
  key: 'app-key',
  namespace: '',
})

Example setup

Append this to the end of resources/js/app.js

// resources/js/app.js
window.Echo.channel('messages').listen('message', (e) => {
  alert(JSON.stringify(e))
})

Paste this into the welcome view (resources/views/welcome.edge)

<!-- resources/views/welcome.edge -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AdonisJS - A fully featured web framework for Node.js</title>
    @entryPointStyles('app')
    @entryPointScripts('app')
  </head>
  <body>
    <main>
      <div>
        <!-- Just to show off how it works. You can safely ignore that -->
        <form method="POST" action="/message">
          <input name="message" type="text" />
          <button>Send Message</button>
        </form>
      </div>
    </main>
  </body>
</html>

After setting up that, we just need to setup our message route to broadcast a message event:

// start/routes.ts
import Route from '@ioc:Adonis/Core/Route'
import Broadcast from 'App/Services/Broadcast'

Route.get('/', async ({ view }) => {
  return view.render('welcome')
})

Route.post('/message', async ({ request, response }) => {
  const message = request.input('message')
  await Broadcast.broadcast('messages', 'message', { message })
  return response.redirect().back()
})

It's alive!

But it still doesn't works for private or presence channels, we will address that in next tutorial, stay tuned!

DEV Community: Arthur Emanuel