PieSocket Laravel Integration

Laravel Echo is (a frontend library) used to listen to message broadcasts from the Laravel backend. PieSocket is compatible with Laravel Echo, using pusher-js.

Server Side Configuration

Laravel Echo comes with built-in support for Pusher SDKs, and PieSocket plugs in easily with those SDKs.

Get started by installing the backend libraries required for Laravel broadcasting

composer require pusher/pusher-php-server

Edit your .env file

Set the broadcast driver to pusher

BROADCAST_DRIVER=pusher

and configure the following env variables for PieSocket

PUSHER_APP_ID=your-piesocket-app-id
PUSHER_APP_KEY=your-piesocket-api-key
PUSHER_APP_SECRET=your-piesocket-secret
PUSHER_HOST=your-piesocket-cluster-id.piesocket.com
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=piesocket

You can find your PieSocket app-id, api-key, cluster id, and secret inside the PieSocket cluster dashboard.

Front-end configuration

Install Laravel Echo and supporting packages

npm install --save-dev laravel-echo pusher-js

Edit the resources/js/bootstrap.js file to include the following code

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
window.Pusher = Pusher;
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
    wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});
//Subscribe to orders channel and listen for NewOrder events
window.Echo.channel(`orders`)
    .subscribed(() => {
        console.log("Echo connected to PieSocket channel!");
    })
    .listen('NewOrder', (data) => {
        alert("New Order Received");
        console.log("New Order Data", data);
    });

Making sure the frontend setup works

Refresh your Laravel website and check the browser console, if you see the following log, all is good!

if you do not see this, add the following line inside the section of your welcome.blade.php file.

@vite('resources/js/app.js', 'vendor/courier/build')

Make sure npm run dev is running in a terminal and refresh the website, it should work now.

Publish Events From the Backend

Here is how to send an event to the Echo channel from the backend.

We can do so by creating a Laravel event.

php artisan make:event NewOrder

A new event should be created.

Open app/Events/NewOrder.php and modify the NewOrder class to implement ShouldBroadcast.

Following is the complete code for a public event class.

<?php
namespace AppEvents;
use IlluminateBroadcastingChannel;
use IlluminateBroadcastingInteractsWithSockets;
use IlluminateBroadcastingPresenceChannel;
use IlluminateBroadcastingPrivateChannel;
use IlluminateContractsBroadcastingShouldBroadcast;
use IlluminateFoundationEventsDispatchable;
use IlluminateQueueSerializesModels;
class NewOrder implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    
    private $order;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($data=[])
    {
        $this->order = $data;
    }
    public function broadcastWith()
    {
        return $this->order;
    }
    /**
     * Get the channels the event should broadcast on.
     *
     * @return IlluminateBroadcastingChannel|array
     */
    public function broadcastOn()
    {
        return new Channel('orders');
    }
}

Disable Authentication

If you are just testing and wish to remove the authentication (for non-logged users), replace PrivateChannel with Channel in broadcastOn() method of the NewOrder class.

That is it.

This event will be broadcasted to the Echo channel when you call

NewOrder::dispatch();

Prepare to test

Now that our backend is ready, we should test it by dispatching an event from the backend. You can dispatch events from a Controller and point to them via a web or API route.

For simplicity, we will create an artisan command instead, which dispatches the NewOrder event.

Let’s create an artisan command

php artisan make:command DispatchOrder

This should create a class DispatchOrder inside appConsoleCommands

Replace the file with the following code

<?php
namespace AppConsoleCommands;
use IlluminateConsoleCommand;
use AppEventsNewOrder;
class DispatchOrder extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'dispatch:neworder';
    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Broadcast new order';
    /**
     * Create a new command instance.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }
    /**
     * Execute the console command.
     *
     * @return int
     */
    public function handle()
    {
        echo "Dispatching event...n";
        NewOrder::dispatch([
            "id" => 1
        ]);
        echo "Event dispatched!n";
    }
}

Moment of truth

Now that we have our event class ready and a console command to dispatch it.

We can publish the NewOrder event from the backend.

php artisan  dispatch:neworder

Check your browser, you should have an alert and a console log.

If you are having difficulties setting up Laravel Echo as described in this tutorial, create a support ticket, and we will help you setup.