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
1 2 3 4 5 6 |
"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.
1 2 3 4 5 6 |
'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.
1 2 3 4 5 6 7 |
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
1 2 3 4 5 6 7 8 9 10 |
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.
1 2 3 4 5 6 7 8 |
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
1 2 3 4 5 6 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<?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.