Laravel Broadcasting With Echo – The Easy Way

Hello and welcome to another tutorial on PieSocket. This time we are talking about Laravel Echo and the easiest way to set it up.

Laravel Echo is (a frontend library) used to listen to message broadcasts from the Laravel backend. While Laravel has detailed documentation for it, we will have a look at just the essentials required to set you up in under 5 minutes with Laravel Broadcasting using PieSocket driver.

Laravel supports other drivers such a Pusher and Ably, we chose to use the PieSocket driver for the following reasons.

PieSocket has larger free quota for daily messages.
PieSocket offers same SLA and features at about half the cost.
PieSocket presence channels allow unauthenticated/anonymous users.
PieSocket supports client-to-client communications.
It is quicker to setup PieSocket, thanks to this guide!

Why Use Laravel Broadcast

Chances are you already know Laravel Broadcast or Laravel Echo is used to integrate real-time communication into your applications.

The objective of this tutorial is to help you set up Laravel Broadcasting using Laravel echo in under 5 minutes so you can perform the following:

Receive real-time events when someone registers on your website.
Update a list of all users without refreshing the page.
Anything of this sort: i.e build realtime chat room, update status of an order when it is shipped/delivered, track real-time location, etc.

1. Laravel Echo Configuration

Quick Start

TLDR;

If you are looking to set up Laravel Broadcasting for a new project, use the laravel-broadcasting-starter project to get started and skip to step 3. This package has all the configurations we are going to make in this step.

Follow along with this step if you wish to set up Ping and Pong on an existing Laravel project.

Backend Configuration

Let’s begin with installing the required SDKs and libraries.

In composer.json add the following post-autoload-dump script at the top.

1	\\PieSocket\\Integrations\\Installer::setupLaravel

For example

"scripts": {

"post-autoload-dump": [

"\\PieSocket\\Integrations\\Installer::setupLaravel",

"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",

"@php artisan package:discover --ansi"

]

Add piesocket driver in config/broadcasting.php in connections array.

'piesocket' => [

'driver' => 'piesocket',

'key' => env('PIESOCKET_API_KEY'),

'secret' => env('PIESOCKET_API_SECRET'),

'cluster_id' => env('PIESOCKET_CLUSTER_ID'),

]

Install PieSocket PHP SDK

1	composer require piesocket/piesocket-php

Frontend Configuration

Install Laravel Echo fork from PieSocket

1	npm install https://github.com/piesocket/echo.git

Install PieSocket Javascript SDK.

1	npm i piesocket-js@1

It is very important to use version 1 of PieSocketJS, until version 2 is updated to support Laravel echo.

That is it, you have installed and configured all that is needed!

Let’s move on to the next step.

2. Setup Environment

You have made it to this setup.

By now, you should have a clone of piesocket-broadcasting-starter or a similar project with PieSocket Broadcasting driver enabled and ready to rock.

You need to set up your API Keys in the .env file of the Laravel project. Create the .env file if it does not exist already.

1	cp .env.example .env

Get your API keys here: https://www.piesocket.com/settings/api

You need to create an account, PieSocket offers a free account you can use to get started.

Once you have acquired your keys and secrets, put the following in your .env file.

PIESOCKET_API_KEY=

PIESOCKET_API_SECRET=

PIESOCKET_CLUSTER_ID=

PIESOCKET_FORCE_AUTH=false

MIX_PIESOCKET_API_KEY="${PIESOCKET_API_KEY}"

MIX_PIESOCKET_CLUSTER_ID="${PIESOCKET_CLUSTER_ID}"

In the same file, find and change the BROADCAST_DRIVER driver variable

1	BROADCAST_DRIVER=piesocket

3. Setup Frontend – Laravel Echo

With all the SDKs and configurations in place, we are ready to set up Laravel Echo.

Open resources/js/bootstrap.js and add the following code at the bottom

import Echo from 'laravel-echo';

window.PieSocket = require('piesocket-js');

window.Echo = new Echo({

broadcaster: 'piesocket',

key: process.env.MIX_PIESOCKET_API_KEY,

cluster: process.env.MIX_PIESOCKET_CLUSTER_ID,

forceAuth: false

});

For a complete list of configurable options, see: piesocket-js

Now you can create channels and listen to real-time 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);

});

Compile frontend javascript code

1	npm run dev

If the above command returns any errors, make sure you are using Node version >= 10, recompile Laravel Echo using the command below and retry.

1	cd node_modules/laravel-echo && npm i

Once the JS code has complied,

Open resource/views/welcome.blade.php and add the following in the head section of the page (skip if using the starter repository).

You can add this to any view file you wish to use for testing.

1	<script src="/js/app.js"></script>

Run your project

1	php artisan serve

And wait for the backend to sent an event.

Making sure the frontend setup works

Check your browser console, if you see the following log, all is good!

If you get the following error

This is because your process.env is not set and PieSocket does not detect your API Key and Cluster ID correctly.

You can pass your API key and cluster ID directly to the Echo instance to fix this.
In resources/js/bootstrap.js

window.Echo = new Echo({

broadcaster: 'piesocket',

key: "xxxxxxxKEY",

cluster: "xx-nyc",

forceAuth: false

});

Don’t forget to run npm run dev after this.

4. Setup Backend – Laravel Broadcasting

Our front end is ready to show an alert on new orders.

The last remaining part is sending an event to the Echo channel from the backend.

We can do so by creating a Laravel event.

1	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 App\Events;

use Illuminate\Broadcasting\Channel;

use Illuminate\Broadcasting\InteractsWithSockets;

use Illuminate\Broadcasting\PresenceChannel;

use Illuminate\Broadcasting\PrivateChannel;

use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

use Illuminate\Foundation\Events\Dispatchable;

use Illuminate\Queue\SerializesModels;

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 \Illuminate\Broadcasting\Channel|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

1	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. (This command is already available in the laravel-broadcasting-starter/issues repository)

Let’s create an artisan command

1	php artisan make:command DispatchOrder

This should create a class DispatchOrder inside app\Console\Commands

Replace the file with the following code

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;

use App\Events\NewOrder;

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.

1	php artisan dispatch:neworder

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

Note: If you broadcast on new Channel('orders'), under the hood a channel named public-orders will be used for the communication.

Feel free to share what exciting things you build with Laravel Broadcasting in the comments below.

Errors got you? If you are having difficulties setting up Laravel Echo as described in this tutorial, ask in the community or leave a comment.