Простые 16 шагов, чтобы пройти через использование Laravel Echo

задняя часть внешний интерфейс сервер Laravel

Бяо сначала несколько слов по-английски, поговорим оLaravel EchoРоль:

One of my favorite projects in the Laravel ecosystem is Echo. Echo enables real-time web applications through the use of WebSockets and hooks directly into Laravel's event broadcasting features. This means developers can use a familiar PHP API to send real-time data. A very common use-case for this type of functionality would be a notification or chat system.

перевести "немного"

Взято из:Woohoo. Я упоминаю Marc.com/blog/real…

Официальная документация рекомендует использоватьPusherилиlaravel-echo-server(это использованиеNodeJS + Socket.IOосуществленныйWebSocketсервер).

В Китае физическим лицам не рекомендуется использоватьPusher, это влияет на скорость доступа, и это все еще коммерческий продукт.

Воспользуйтесь сегодня самыми простыми «16» шагами, чтобы пройти интеграцию кодаlaradockиlaravel-echo-serverиспользоватьLaravel Echo.

Создайте базовую среду

// 1. new project
laravel new echolearning

// 2. 使用 laradock
git clone https://github.com/Laradock/laradock.git

// 3. 创建 .env
cp env-example .env

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


// 5. 进入 workspace 容器
docker-compose exec --user=laradock workspace bash

// 6. 安装插件
// 6.1 推荐使用 laravel-china 维护的 composer 国内镜像
composer config -g repo.packagist composer https://packagist.laravel-china.org

// 6.2 并行下载插件
composer global require "hirak/prestissimo"

// 6.3 配置 yarn 国内镜像
yarn config set registry 'https://registry.npm.taobao.org'

// 注：以上可以在 laradock 中配置
// 6.4 执行安装
composer install

yarn install

// 7. 创建 .env 和 key
cp .env.example .env
php artisan key:generate

Хорошо, начнем вводить в браузере: http://localhost, сайт запущен и работает

Использование эхо-сервера Laravel

Поскольку laradock интегрирует «Laravel Echo Server», мы можем легко использоватьLaravel Echo.

// 8. 配置广播驱动和 redis 服务器
BROADCAST_DRIVER=redis
REDIS_HOST=redis

// 9. 安装 predis
composer require predis/predis

С готовой конфигурацией бэкенда приступаем к установке плагина фронтенда, в конце концовLaravel Echoявляется интерфейсным инструментом.

// 10. 安装 socket.io-client laravel-echo
yarn add socket.io-client laravel-echo

существуетresources/assets/js/bootstrap.jsсоздавать экземплярEcho:

// 11. 实例化 Echo
import Echo from 'laravel-echo'

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

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

// Laravel 官方推荐使用 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
// });

Далее мы можем использоватьEchoНапример, прослушайте трансляцию или уведомление, отправленное серверной частью.

Сначала воспользуемся даннымExampleComponentв процессе преобразования, создатьEchoПрослушайте, дождитесь прихода данных, а затем отобразите их на странице. Код прост:

<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. 创建 Echo 监听
            Echo.channel('rss')
                .listen('RssCreatedEvent', (e) => {
                    that.names.push(e.name)
                });
        }
    }
</script>

Мы добавляем бэкэндrssсозданное событиеRssCreatedEvent, и наследоватьShouldBroadcast.


// 13. 创建 RssCreatedEvent 事件
php artisan make:event RssCreatedEvent

Мы используем поддельные данные и позволяем им возвращать текущее время, чтобы увидеть эффект:

<?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. 创建频道
        return new Channel('rss');
    }

    /**
     * 指定广播数据。
     *
     * @return array
     */
    public function broadcastWith()
    {
        // 返回当前时间
        return ['name' => Carbon::now()->toDateTimeString()];
    }
}

Затем мы можем выполнить запланированную задачу и позволить ей транслироваться каждую минуту:

protected function schedule(Schedule $schedule)
{
    // 15. 每隔一分钟执行一次
    $schedule->call(function () {
        event(new RssCreatedEvent());
    })->everyMinute();
}

Наконец загрузите домашнюю страницуvueкомпонент, тест обновления:

<!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 src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

Примечание: должен быть вheaderвводить

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

Скомпилируйте фронтенд:

// 16. 运行 watch
yarn run watch-poll

Обновите веб-страницу, чтобы увидеть эффект запуска:

Как мы желаем, каждую минуту, один раз в эфире, фронтендlaravel-echoПрослушайте и запишите трансляцию, затем прочитайте данные и отобразите их.

Суммировать

Методы, которые мы использовали до сих пор, следующие:

  1. Использование ларадока
  2. Использование эхо-сервера laravel
  3. трансляция события
  4. вспомогательная функция event()
  5. $schedule задача на время
  6. Laravel Echoиспользование

Мы можем в основном использоватьLaravel EchoДля более глубокого использования рекомендуется проверить официальную документацию веб-сайта.

Наконец, я настоятельно рекомендую всем использоватьlaradockЧтобы развернуть среду разработки Docker, потому что вы хотите использовать инструменты и среды, поверьтеlaradockВсе готово для вас.

"Заканчивать"

Категории