On today's post we will see how to use Soketi as a WebSockets server with Laravel. this post will be using all things locally and in the Pt.2 we will deploy Soketi on EC2.
Prerequisites:
• A Laravel 9 project.
• Node js
• Python 3.x
• GIT
• The gcc
compiler and the dependencies for build
Make sure to have all above tools installed on your machine before move on.
NOTE: there are several ways to install Soketi check the official docs
NOTE2: if you are using Mac OS like in my case use brew
to install all three above packages:
brew install gcc
...
Step 1: Install & Running Soketi
Now install Soketi
globally on your machine by running:
npm install -g @soketi/soketi
After the installation is finished run:
soketi start
You should getting something like this:
Step 2: Install Laravel Related Packages(client, server)
To use pusher driver with Laravel you should install the Pusher Channels PHP SDK using the Composer package manager:
composer require pusher/pusher-php-server
To receive the event to client side you should install these two packages throw NPM:
npm install --save-dev laravel-echo pusher-js
Last thing install laravel/breeze
:
composer require laravel/breeze
php artisan breeze:install
Step 3: Configure Soketi with Laravel
First open config/broadcasting.php
file and change the pusher
driver to the following:
'connections' => [
// ...
'pusher' => [
'driver' => 'pusher',
'key' => env('PUSHER_APP_KEY', 'app-key'),
'secret' => env('PUSHER_APP_SECRET', 'app-secret'),
'app_id' => env('PUSHER_APP_ID', 'app-id'),
'options' => [
'host' => env('PUSHER_HOST', '127.0.0.1'),
'port' => env('PUSHER_PORT', 6001),
'scheme' => env('PUSHER_SCHEME', 'http'),
'encrypted' => true,
'useTLS' => env('PUSHER_SCHEME') === 'https',
],
],
],
We need to update our .env
file with the new configuration details:
PUSHER_APP_KEY=app-key
PUSHER_APP_ID=app-id
PUSHER_APP_SECRET=app-secret
PUSHER_HOST=127.0.0.1
PUSHER_PORT=6001
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
Also in the .env
change BROADCAST_DRIVER
to pusher
Now go to resources/js/bootstrap.js
file and uncomment the last lines:
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,
wsHost:
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"],
});
Step 4: Use Soketi with Laravel
Create a new event php artisan make:event OrderStatusUpdated
Open it and change make it like this:
class OrderStatusUpdated implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public function __construct()
{
}
public function broadcastOn()
{
return new Channel('orders');
}
}
Then in resources/js/bootstrap.js
at the end add this code:
window.Echo.channel("orders").listen("OrderStatusUpdated", (e) => {
console.log(e);
});
It's simple event listener to listen OrderStatusUpdated
once it's fire.
Now go to web.php
and create a new route for running the event
Route::get('/fire', function () {
OrderStatusUpdated::dispatch();
return 'Event has been sent!';
});
Step 5: Testing
Open two tabs in your browser:
First soketi.test/dashboard
and open the console to just see the event.
Second Run the event by visiting soketi.test/fire
Once you hit the second URL you should see the event in the first tab in REAL-TIME WAY :)
========== The End =============
Another useful resources:
1- Laracast course that explains in details about the Broadcasting events in Laravel.
2- Always check the official docs of Soketi for more details.
See you in PT.2 :)
Top comments (2)
for the
.env
pusher credentials, can I use any string there?No for local purpose use these: