Laravel Broadcasting – Use Echo With PieSocket

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.

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

Edit your .env file

Set the broadcast driver to pusher

and configure the following env variables for 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

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

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.

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.

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.

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

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

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

Replace the file with the following code

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.

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.