Real-Time Web Communication With Pusher (Part 1: The Server Side)

Many modern web applications today use real-time communication to interact between client and server. Web socket is the most popular protocol for web and mobile, they allow a long-held single TCP socket connection to be established between the client and server which allows for bi-directional, full duplex, messages to be instantly distributed with little overhead resulting in a very low latency connection.

In this article we’ll talk about how to work with Pusher, one of my favourite SaaS for real-time web communication. In this example I’m using Laravel Lumen 7.0.3 for server side and Angular for client side.

Generate Pusher App Keys

You’ll need a Pusher account to generate app keys that we’ll be used in the application. Please register your self at https://pusher.com/ and then login into pusher dashboard.

Pusher Dashboard

Click on Channels then app keys, you’ll see list of key’s if you have created them before.

App Keys

Click button Create new keys and secret if you have no any.

The Server Side

Install pusher-php-server dependency:

composer require pusher/pusher-php-server

Store pusher app keys into .env

PUSHER_APP_KEY=[your-app-key]
PUSHER_APP_SECRET=[your-app-secret]
PUSHER_APP_ID=[your-app-id]
PUSHER_APP_CLUSTER=[your-app-cluster]

Create event PusherEvent:

<?php
namespace App\Events;
use Pusher\Pusher;
class PusherEvent extends Event
{
   /**
   * Create a new event instance.
   *
   * @return void
   */
   public function __construct($event, $message)
   {
      $pusher = new Pusher(
         env('PUSHER_APP_KEY'),
         env('PUSHER_APP_SECRET'),
         env('PUSHER_APP_ID'),
         [
            'cluster' => env('PUSHER_APP_CLUSTER'),
            'useTLS'=> TRUE
         ]
      );
      $pusher->trigger( 'my-channel', $event, $message );
   }
}

Create listener PusherListener for PusherEvent:

<?php
namespace App\Listeners;
use App\Events\PusherEvent;
class PusherListener
{
   /**
   * Create the event listener.
   *
   * @return void
   */
   public function __construct() { }
  /**
   * Handle the event.
   *
   * @param  PusherEvent  $event
   * @return void
   */
   public function handle(PusherEvent $event) { }
}

Now register PusherEvent into EventServiceProvider:

<?php
namespace App\Providers;
use Laravel\Lumen\Providers\EventServiceProvider as ServiceProvider;
class EventServiceProvider extends ServiceProvider
{
   protected $listen = [
      'App\Events\PusherEvent' => [
         'App\Listeners\PusherListener',
      ]
   ];
}

Call PusherEvent from your controller:

<?php
namespace App\Http\Controllers;
class MyController extends Laravel\Lumen\Routing\Controller
{
   public function index()
   {
      event(
        new \App\Events\PusherEvent('notification', 'hello world')
      );
   }
}

Create route for MyController:

# routes/web.php
Route::get('publish', [
   'uses' => 'MyController@index'
]);

Testing

Open Debug Console in Pusher dashboard to see if there are any events triggered

Pusher Debug Console

As you can see it’s still empty because we haven’t made any request yet. Now make HTTP get request to your application route:

curl -X GET http://localhost/publish

note: you can also use Postman or any other tool.

Now open Pusher debug console, you’ll see the event we’ve just published.

Pusher Debug Console