Laravel Event Broadcasting Using Socket.io with Redis

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.