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.

For example

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

Install PieSocket PHP SDK

Frontend Configuration

Install Laravel Echo fork from PieSocket

Install PieSocket Javascript SDK.

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.

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.

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

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

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

Now you can create channels and listen to real-time events.

Compile frontend javascript code

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

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.

Run your project

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

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.

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

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.

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.