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 the PieSocket driver.
Laravel supports other drivers such as Pusher and Ably, we chose to use the PieSocket driver for the following reasons.
- PieSocket has a larger free quota for daily messages.
- PieSocket offers the 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 set up PieSocket, thanks to this guide!
Why Use Laravel Broadcast
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 a real-time chat room, update the status of an order when it is shipped/delivered, track real-time location, etc.
PieSocket is now Pusher compatible, which means you can use the PieSocket driver without installing any extra libraries or SDKs.
1. Setup a Laravel Project
Let’s create a fresh new Laravel application to use with PieSocket broadcasting.
Make sure you have Composer installed in your system and then run the following command to create an empty Laravel project.
|
1 |
composer create-project laravel/laravel laravel-piesocket |
Run the following commands to setup Laravel
- cd laravel-piesocket
- composer install
- cp .env.example .env
- php artisan key:generate
- npm i
- npm run dev
- php artisan serve
Laravel should be up and running on port 8000.
2. Server Side Configuration
Laravel Echo comes with inbuilt support for Pusher SDKs and PieSocket plugs in easily with those SDKs.
Get started by Installing the backend libraries required for Laravel broadcasting
|
1 |
composer require pusher/pusher-php-server |
Edit your .env file
Set the broadcast driver to pusher
|
1 |
BROADCAST_DRIVER=pusher |
and configure the following env variables for PieSocket
|
1 2 3 4 5 6 7 |
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 Channels cluster you create from PieSocket dashboard.
2. Front-end configuration
Install Laravel Echo and supporting packages
|
1 |
npm install --save-dev laravel-echo pusher-js |
Edit the resources/js/bootstrap.js file to include 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 |
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 <head> section of your welcome.blade.php file.
|
1 |
@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.
3. Publish Events From the Backend
Your 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.
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.
Feel free to share what exciting things you build with Laravel Broadcasting in the comments below.
If you are having difficulties setting up Laravel Echo as described in this tutorial, leave a comment and we will get back.
For more information follow the official Laravel Broadcasting docs.
