Hai Dev,

Dalam tutorial ini, saya akan memandu Anda langkah demi langkah cara menggunakan event broadcasting menggunakan redis, socket.io dan laravel-echo-server di aplikasi laravel 8/7. Saya akan memberi Anda contoh pesan broadcasting realtime dengan soket io di laravel 8/7/6. kita akan menggunakan predis, queue, socket.io, laravel-echo-server dan event broadcasting di laravel 7/6.

Anda dapat dengan mudah melakukannya, Anda hanya perlu mengikuti beberapa langkah untuk membuat pengiriman event menggunakan realtime broadcasting di laravel 7.

Laravel menyediakan topik event broadcast. Event broadcast sangat menarik dan juga sulit untuk diimplementasikan dengan redis dan socket.io secara khusus. tetapi saya akan memberi Anda petunjuk langkah demi langkah tentang cara mengirim pesan realtime dengan redis dan soket io di aplikasi laravel 6.

Anda hanya perlu mengikuti beberapa langkah untuk melakukan hal berikut ini. jadi mari ikuti langkah-langkah di bawah ini dan lakukan sebagai notifikasi realtime dengan laravel.

Langkah 1: Instal Laravel 6

Pertama-tama, kita perlu mendapatkan aplikasi Laravel 6 versi baru menggunakan perintah di bawah karena kita akan dari awal, Jadi buka terminal OR command prompt dan jalankan perintah di bawah ini:

composer create-project --prefer-dist laravel/laravel blog

Langkah 2: Instal predis

Pada langkah ini, kita perlu menginstal predis sebagai perintah di bawah ini. jadi mari kita jalankan perintah berikut untuk menginstal predis di aplikasi laravel.

composer require predis/predis

Langkah 3: Buat Event

Di sini, kita perlu membuat event untuk broadcast. Dalam file event kita perlu mengatur channel dan mengirim  pesan array dengan key. Jadi, mari kita jalankan perintah berikut untuk membuat event.

php artisan make:event SendMessage

app/Events/SendMessage.php

<?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;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
  
class SendMessage implements ShouldBroadcastNow
{
    use InteractsWithSockets, SerializesModels;
  
    public $data = ['asas'];
  
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct()
    {
  
    }
  
    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('user-channel');
    }
  
    /**
     * The event's broadcast name.
     *
     * @return string
     */
    public function broadcastAs()
    {
        return 'UserEvent';
    }
    /**
     * The event's broadcast name.
     *
     * @return string
     */
    public function broadcastWith()
    {
        return ['title'=>'This notification from Medikre.com'];
    }
}

Langkah 4: Perbarui File Config

Pada langkah ini, kita perlu menambahkan konfigurasi set pada file env dan file konfigurasi database. Anda perlu mengatur file env dengan BROADCAST_DRIVER sebagai konfigurasi redis dan database serta konfigurasi redis database.

Mari perbarui file:

.env

BROADCAST_DRIVER=redis
  
DB_DATABASE=blog_chat
DB_USERNAME=root
DB_PASSWORD=root
  
REDIS_HOST=localhost
REDIS_PASSWORD=null
REDIS_PORT=6379
   
LARAVEL_ECHO_PORT=6001

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),
    ],
  
],
....

Sekarang kita perlu menjalankan migrasi juga.

Jadi, mari kita jalankan migrasi.

php artisan migrate

Langkah 5: Instal Server Laravel Echo

Pada langkah ini, kita perlu menginstal laravel-echo-server di sistem Anda dan di proyek Anda. jadi mari kita jalankan perintah berikut untuk menginstal laravel-echo-server dan init.

Pasang laravel-echo-server

npm install -g laravel-echo-server

Init laravel-echo-server

laravel-echo-server init

Anda harus mengatur config Anda. Anda dapat melihat gambar di bawah ini:

Ini akan membuat file baru laravel-echo-server.json file seperti di bawah ini:

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": ""
    }
}

Langkah 6: Instal npm, laravel-echo, socket.io-client

Di sini, kami akan menginstal npm dan juga menginstal laravel-echo, socket.io-client. Anda juga perlu konfigurasi. jadi mari kita jalankan perintah berikut:

npm install
npm install laravel-echo
npm install socket.io-client

Sekarang kita perlu membuat file baru laravel-echo-setup.js file pada file assets.

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
});

Sekarang Anda perlu menambahkan file mix seperti di bawah ini:

webpack.mix.js

...
mix.js('resources/assets/js/laravel-echo-setup.js', 'public/js');

Sekarang kita perlu menjalankan perintah npm run:

npm run dev

Langkah 7: Perbarui File Tampilan

Sekarang kita perlu memperbarui file blade welcome kita. sehingga Anda dapat melihat kode kami di sana seperti di bawah ini:

resources/views/welcome.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Laravel Broadcast Redis Socket io Tutorial - Medikre.com</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <h1>Laravel Broadcast Redis Socket.io Tutorial - Medikre.com</h1>
            
            <div id="notification"></div>
        </div>
    </body>
  
    <script>
            window.laravel_echo_port='{{env("LARAVEL_ECHO_PORT")}}';
    </script>
    <script src="//{{ Request::getHost() }}:{{env('LARAVEL_ECHO_PORT')}}/socket.io/socket.io.js"></script>
    <script src="{{ url('/js/laravel-echo-setup.js') }}" type="text/javascript"></script>
      
    <script type="text/javascript">
        var i = 0;
        window.Echo.channel('user-channel')
         .listen('.UserEvent', (data) => {
            i++;
            $("#notification").append('<div class="alert alert-success">'+i+'.'+data.title+'</div>');
        });
    </script>
</html>

Langkah 8: Panggil Event

Di sini, kami akan membuat route pengujian baru untuk call event. jadi, mari tambahkan menambahkan route berikut seperti di bawah ini:

routes/web.php

Route::get('/t', function () {
    event(new \App\Events\SendMessage());
    dd('Event Run Successfully.');
});

Sekarang kami siap untuk menjalankan contoh kami, tetapi pastikan hal berikut untuk menjalankan proyek Anda.

Anda harus menginstal server redis di sistem atau server Anda. tidak maka Anda dapat menginstal menggunakan perintah berikut:

sudo apt install redis-server

Setelah itu Anda dapat memulai server echo laravel seperti perintah di bawah ini:

laravel-echo-server start

Sekarang Anda dapat menjalankan proyek menggunakan perintah berikut:

php artisan serve

Sekarang Anda dapat membuka URL di bawah di browser Anda:

http://localhost:8000/

Sekarang Anda dapat mengaktifkan acara Anda dengan url ini:

http://localhost:8000/t

Anda dapat melihat hasilnya seperti di bawah: