Hello Artisan in this laravel broadcast example tutorial i am going to show you how we can create real time event broadcasting system in Laravel. The key point of this tutorial is i am going to do it without pusher. So laravel broadcast without pusher is the todays tutorial.
To do this real time event broadcasting i am going to use socket.io. Socket.IO enables real-time, bidirectional and event-based communication. It works on every platform, browser or device, focusing equally on reliability and speed. From this example you will see laravel socket.io redis example.
Laravel gives us amazing feature like event broadcasting. Event broadcasting is a very interesting and it's also difficult to implement with redis and socket.io in Laravel. But in this laravel broadcast redis i will give you step by step instruction of how to send real time message with rest and socket io in laravel 8 application.
Step 1: Install Laravel 8
First of all, we need to get fresh Laravel 8 application using following command because we are going from scratch, So open your terminal and run bellow command:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Install predis
In this second step, we have to install predis as bellow command. so let's run following command to install predis in laravel app.
composer require predis/predis
It will show the output like
Read also : Real Time Broadcasting with Laravel 8.x Vuejs and Pusher
Step 3: Make Event
For bradcasting we need Laravel event. So create it by bellow command.
php artisan make:event SendMessage
Paste below code in it
app/Events/SendMessage.php
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class SendMessage implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public function __construct()
{
//
}
public function broadcastOn()
{
return new Channel('user-channel');
}
public function broadcastAs()
{
return 'UserEvent';
}
public function broadcastWith()
{
return [
'title' => 'This notification from www.codecheef.org'
];
}
}
Step 4: Update .ENV File
In this fourth step, we have to add set configuration on env file and database configuration file. you you need to set env file with BROADCAST_DRIVER as redis and database configuration and also database redis configuration.
Let's update .env like that:
.env
BROADCAST_DRIVER=redis
DB_DATABASE=laravel
DB_USERNAME=mahedi
DB_PASSWORD=123
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
LARAVEL_ECHO_PORT=6001
And also change below file like that
config/database.php
'redis' => [
'client' => env('REDIS_CLIENT', 'predis'),
'options' => [
'cluster' => env('REDIS_CLUSTER', 'redis'),
'prefix' => env('REDIS_PREFIX', ''),
],
'default' => [
'url' => env('REDIS_URL'),
'host' => env('REDIS_HOST', '127.0.0.1'),
'password' => env('REDIS_PASSWORD', null),
'port' => env('REDIS_PORT', 6379),
'database' => env('REDIS_DB', 0),
],
'cache' => [
'url' => env('REDIS_URL'),
'host' => env('REDIS_HOST', '127.0.0.1'),
'password' => env('REDIS_PASSWORD', null),
'port' => env('REDIS_PORT', 6379),
'database' => env('REDIS_CACHE_DB', 1),
],
],
Read also : Real Time Chat App with Laravel 7.x Vue Js and Pusher
Step 5: Setup Laravel Echo Server
In tthis fifth step, we have to install laravel-echo-server in your system and in your project. so let's run following command to install laravel-echo-server and init.
Install laravel-echo-server
npm install -g laravel-echo-server
Init laravel-echo-server
laravel-echo-server init
You need to setup your configuration. you can see bellow screenshot:
After doing that it will create new file laravel-echo-server.json file as like bellow:
laravel-echo-server.json
{
"authHost": "http://localhost",
"authEndpoint": "/broadcasting/auth",
"clients": [],
"database": "redis",
"databaseConfig": {
"redis": {},
"sqlite": {
"databasePath": "/database/laravel-echo-server.sqlite"
}
},
"devMode": true,
"host": null,
"port": "6001",
"protocol": "http",
"socketio": {},
"secureOptions": 67108864,
"sslCertPath": "",
"sslKeyPath": "",
"sslCertChainPath": "",
"sslPassphrase": "",
"subscribers": {
"http": true,
"redis": true
},
"apiOriginAllow": {
"allowCors": false,
"allowOrigin": "",
"allowMethods": "",
"allowHeaders": ""
}
}
Step 6: Install aravel-echo, socket.io-client
Here, we have to install npm and also install laravel-echo, socket.io-client. also you need to configuration. so let's run following command one by one:
npm install
npm install laravel-echo
npm install socket.io-client
Now we need to create new file laravel-echo-setup.js file on assets file.
resources/assets/js/laravel-echo-setup.js
import Echo from 'laravel-echo';
window.Echo = new Echo({
broadcaster: 'socket.io',
host: window.location.hostname + ":" + window.laravel_echo_port
});
Now you need to add on mix file as like bellow:
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/assets/js/laravel-echo-setup.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Now we need to run npm run command:
npm run dev
Read also : Presence Channels and When to Use It in Laravel Broadcasting
Step 7: Create View File
Almost all are set to got. Now jsut we need to update our welcome blade file. so you can see our there code as like bellow:
resources/views/welcome.blade.php
Step 8: Fire Event
Here, we need to create new testing route for firing event. so, let's add add following route as bellow:
routes/web.php
Route::get('/test', function () {
event(new \App\Events\SendMessage());
dd('Event fired.');
});
After that you can start laravel echo server as like bellow command:
laravel-echo-server start
It will gives following output
Now you can run project using following command:
php artisan serve
Now you can fire you event by this url:
You can see output as like bellow screen shot:
Hope it can help you to learn event broadcasting using socket.io and laravel echo server using redis.
#laravel #laravel-8x #redis #socketio #packages #tutorial #broadcasting #notification #laravel-echo