Langkah Sederhana Menggunakan Laravel Echo

pada tutorial kali ini mari kita akan membahas penggunaan laravel echo,apa itu laravel echo mari ikuti pembahasannya

"Salah satu proyek favorit saya di ekosistem Laravel adalah Echo. Echo menggunakan WebSockets untuk mengaktifkan aplikasi web waktu nyata dan terhubung langsung ke kemampuan siaran acara Laravel. Ini berarti bahwa pengembang dapat mengirim data waktu nyata menggunakan API PHP yang sudah dikenal. Kasus penggunaan yang sangat umum untuk jenis fitur ini adalah sistem notifikasi atau obrolan".

Sumber: https://www.imarc.com/blog/realtime-notifications-with-laravel-echo-server-docker-and-traefik

Dalam dokumen resmi, Pusher mungkin merekomendasikan laravel-echo-server (menggunakan NodeJS + Socket.IO Realized WebSocketServer).

Di Cina, belum disarankan bagi individu untuk menggunakan Pusher, yang merupakan produk komersial.

Saat ini, kami menggunakan langkah "16" paling sederhana untuk melakukan integrasi kode menggunakan laradock dan laravel-echo-server untuk menggunakan Laravel Echo.

Membangun lingkungan dasar

// 1. new project
laravel new echolearning

//2. Use laradock
git clone https://github.com/Laradock/laradock.git

//3. Create. Env
cp env-example .env

//4. Create container
docker-compose up -d php-worker laravel-echo-server nginx redis

//5. Enter the workspace container
docker-compose exec --user=laradock workspace bash

//6. Install the plug-in
//6.1 it is recommended to use the composer domestic image maintained by laravel China
composer config -g repo.packagist composer https://packagist.laravel-china.org

//6.2 downloading plug-ins in parallel
composer global require "hirak/prestissimo"

//6.3 configure yarn domestic image
yarn config set registry 'https://registry.npm.taobao.org'

//Note: the above can be configured in laradock
//6.4 performing installation
composer install

yarn install

//7. Create. Env and key
cp .env.example .env
php artisan key:generate

Oke, mari kita mulai mengetik di browser:http:// localhost, website sedang berjalan

Menggunakan Laravel Echo Server

laradock mengintegrasikan "server larave lecho", sehingga dapat digunakan dengan sangat nyaman Laravel Echo

//8. Configure broadcast driver and redis server
BROADCAST_DRIVER=redis
REDIS_HOST=redis

//9. Install predis
composer require predis/predis

Ketika konfigurasi backend sudah siap, mulailah menginstal plugin frontend. Bagaimanapun, Laravel EchoIt adalah alat front-end.

//10. Install socket.io-client laravel-echo
yarn add socket.io-client laravel-echo

tetap pada resources/assets/js/bootstrap.js instantiation Echo：

//11. Instantiate echo
import Echo from 'laravel-echo'

window.io = require('socket.io-client')

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
});

//The official recommendation of laravel is pusher
// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     encrypted: true
// });

Anda kemudian dapat menggunakan instance it Echo untuk memantau siaran atau notifikasi dari backend.

Pertama, gunakan yang didefinisikan dalam ExampleComponent. Selama konversi, buat echo monitor, tunggu data tiba, lalu tampilkan di halaman. Kodenya sederhana

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        <ul>
                            <li v-for="name in names" :key="name">{{ name }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                names: []
            }
        },
        mounted() {
            let that = this
            //12. Create echo monitor
            Echo.channel('rss')
                .listen('RssCreatedEvent', (e) => {
                    that.names.push(e.name)
                });
        }
    }
</script>

Mari tambahkan satu ke event rssCreated backend RssCreatedEvent dan mewarisi ShouldBroadcast.

//13. Create rsscreatedevent event
php artisan make:event RssCreatedEvent

Mengembalikan waktu saat ini menggunakan data palsu. Ini berguna untuk melihat efeknya.

<?php

namespace App\Events;

use Carbon\Carbon;
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 RssCreatedEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * 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()
    {
        //14. Create channel
        return new Channel('rss');
    }

    /**
     *Specifies the broadcast data.
     *
     * @return array
     */
    public function broadcastWith()
    {
        //Return to current time
        return ['name' => Carbon::now()->toDateTimeString()];
    }
}

Anda kemudian dapat melakukan tugas pengaturan waktu. Siarkan setiap menit

protected function schedule(Schedule $schedule)
{
    //15. Every other minute
    $schedule->call(function () {
        event(new RssCreatedEvent());
    })->everyMinute();
}

Terakhir, jalankan Load vue Component di halaman beranda Anda untuk memperbarui pengujian Anda.

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
    </head>
    <body>
    <div id="app">
        <example-component></example-component>
    </div>
    <script></script>
    </body>
</html>

Catatan: untuk memperkenalkan header diperlukan

<meta name="csrf-token" content="{{ csrf_token() }}">

Compiler front end:

Refresh halaman web untuk melihat efek yang sedang berlangsung:

Jika perlu, siarkan setiap menit, pantau laravel-echo front-end untuk menangkap siaran, dan baca serta tampilkan datanya.

Ringkasan

Sejauh ini, kami telah menggunakan teknologi berikut:

Penggunaan laradock
Menggunakan Laravel Echo Server
Acara siaran
Acara() fungsi tambahan
$shcedule Tugas terjadwal
Menggunakan Laravel Echo

Pada dasarnya Anda dapat menggunakan Laravel Echo Untuk menggunakannya secara lebih detail, disarankan untuk memeriksa dokumentasi di situs resminya.

Akhirnya, saya sangat merekomendasikan untuk menggunakannya lagi. Saya pikir laradock sudah siap karena Anda perlu menggunakan alat dan lingkungan untuk menerapkan lingkungan pengembangan Docker laradock.

Langkah Sederhana Menggunakan Laravel Echo

Membangun lingkungan dasar

Menggunakan Laravel Echo Server

Ringkasan

Artikel Laravel Lainnya :