Welcome,
One of the things I love about Livewire, is the seamless integration with Laravel Echo, which makes listening to real time events a breeze.
In this tutorial, wel will see how to integrate Livewire with Ably.
NOTE: : The reason why I chose Ably, because of their generous free tier.
NOTE: : This guide will assume you have Laravel & Livewire installed and already configured.
So let's get started.
Firs thing to do is to create an account in Ably, so head there and create your account.
Then, you have to create an application, give it a name, and we are good to go.
The next thing to do, is to grab the API key.
From the Ably dashboard, head to API Keys, you will find 2 keys, we are interested in the first one
Click on Show, then click on Copy, and let's go to our project.
In your favorite text editor, open the .env
file.
At the bottom of the file, add this entry :
ABLY_KEY=UDAfQA.yFhVpQ:*************************
The API key you copied should go to ABLY_KEY.
After setting up the key, now let's install the Ably Broadcaster.
In your terminal run this command :
composer require ably/laravel-broadcaster
After installing it, in your .env
file, set BROADCAST_DRIVER
as ably
.
Then, go to config/app.php
and uncomment
App\Providers\BroadcastServiceProvider::class,
Now, let's install Ably Laravel Echo.
In your terminal, run this command
npm install @ably/laravel-echo ably
After the installation, put the following code, that will allow us to make connection to Ably SDK.
You can put this code in the bootstrap.js
file, or in any other JavaScript file
import Echo from '@ably/laravel-echo';
import * as Ably from 'ably';
window.Ably = Ably;
window.Echo = new Echo({
broadcaster: 'ably',
});
//this bit of code is optional, it's used to check the conntection to ably
window.Echo.connector.ably.connection.on(stateChange => {
if (stateChange.current === 'connected') {
console.log('connected to ably server');
}
});
After setting up everything, now let's go create our Livewire components.
We will create a Sender component, a receiver component, and an event.
We will start with the event. In your terminal, run this command
php artisan make:event TriggerEvent
The output of the command will be a class located under App/Events. Let's open the class, and edit it so it will be as follows:
class TriggerEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
/**
* Create a new event instance.
*/
public function __construct(
public string $message
) {}
/**
* Get the channels the event should broadcast on.
*
* @return array<int, \Illuminate\Broadcasting\Channel>
*/
public function broadcastOn(): array
{
return [
new Channel('public-events'),
];
}
}
The TriggerEvent
class must implement ShouldBroadcast
interface. Then in the constructor we passed a message, so we can get it later in the receiver component.
Then in the broadcastOn
function, we returned an array of channels to broadcast on.
In our example, we returned an instance of Channel
, which is a public channel, with the name of public-events
.
The name is used to listen to it whenever an event is triggered.
Now let's get to our components.
The sender component will trigger the event, and the receiver will listen to it and update the UI.
So in your terminal, run those commands to create the components.
php artisan livewire:make Sender
php artisan livewire:make Receiver
Our focus for now is the sender component. In the view file we will have an input text and button to trigger the event.
In the sender.blade.php
, put the following code :
<div>
This is the sender component, the notification will be triggered from here.
<div>
<input type="text" wire:model='message'>
</div>
<button wire:click='trigger'>Trigger</button>
</div>
In the above code, we have a model binded input to a property called message
and the button is binded to a method called trigger.
Now in the Sender.php
class, our code will be as follows :
...
public $message;
public function render()
{
return view('livewire.sender');
}
public function trigger()
{
TriggerEvent::dispatch($this->message);
}
...
Now, let's head to the Receiver component.
In the view file, we will have the following :
<div>
Breaking News :
<h1>{{ $message }}</h1>
</div>
A dead simple UI, with a message
property.
But the magic will happen, in the php class.
So open the Receiver.php
class, and let's edit it as follows:
...
protected $listeners = ['echo:public-events,TriggerEvent' => 'responseToEvent'];
public $message;
public function render()
{
return view('livewire.receiver');
}
public function responseToEvent($event)
{
$this->message = $event['message'];
}
...
The first thing to add is the $listeners
property, which is the array responsible for defining our listeners.
In that array, echo:public-events,TriggerEvent
where public-events
is the name of the channel we defined earlier, and TriggerEvent
is the name of the event, also we have responseToEvent
which is the function will be fired whenever TriggerEvent
is triggered.
Then we have a property called message which will be updated in the responseToEvent
method.
And that's it, if everything went good, we will have the following result
If you have any questions, feel free to comment here, or DM me on Twitter
Original Post
Thank you for following the tutorial, and I will see you in other ones.
Top comments (0)