Use Laravel Echo in 16 simple steps

Let me start with a few words in English and talk about the role of 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.

Translation「Short」

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

The official documentation recommends using Pusher or laravel-echo-server (a WebSocket server implemented using NodeJS Socket.IO).

Recommendation: laravel tutorial

In China, individuals still do not recommend using Pusher, as the access speed is affected, and it is still a commercial product.

Today, use the simplest "16" steps to go through the code to integrate laradock and laravel-echo-server to use Laravel Echo.

Build the basic environment

// 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

Okay, let’s start typing in the browser: http://localhost, and the website will run Get up

Using Laravel Echo Server

Because laradock integrates "Laravel Echo Server", it is very convenient for us to use it Laravel Echo.

// 8. 配置广播驱动和 redis 服务器
BROADCAST_DRIVER=redis
REDIS_HOST=redis
// 9. 安装 predis
composer require predis/predis

After preparing the backend configuration, we started to install the front-end plug-in. After all, Laravel Echo is a front-end tool.

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

Instantiate Echo in resources/assets/js/bootstrap.js:

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

Next we can use the Echo instance to listen to broadcasts or notifications sent by the backend.

First we use the given ExampleComponent to modify it, create an Echo listener, wait for the arrival of data, and then display it on the page. The code is simple:

<template>
    <div>
        <div class="row justify-content-center">
            <div>
                <div class="card card-default">
                    <div>Example Component</div>
                    <div>
                        <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(&#39;rss&#39;)
                .listen(&#39;RssCreatedEvent&#39;, (e) => {
                    that.names.push(e.name)
                });
        }
    }
</script>

We add an rss created event RssCreatedEvent in the backend and inherit ShouldBroadcast.

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

We use fake data and let it return the current time to facilitate viewing the effect:

<?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(&#39;rss&#39;);
    }
    /**
     * 指定广播数据。
     *
     * @return array
     */
    public function broadcastWith()
    {
        // 返回当前时间
        return [&#39;name&#39; => Carbon::now()->toDateTimeString()];
    }
}

Then we can make a scheduled task and let it broadcast every one minute:

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

Finally, let the home page load the vue component and refresh the test:

<!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(&#39;js/app.js&#39;) }}"></script>
    </body>
</html>

Note: You need to introduce

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

in the header to compile the front end:

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

Refresh the web page, Check the running effect:

As we wish, the broadcast is broadcast every one minute. The front-end laravel-echo listens and captures the broadcast, then reads the data and displays it.

Summary

So far, the technologies we have used are:

1. The use of laradock

2. Use of laravel echo server

3. Broadcast event

4.event() auxiliary function

5.$schedule scheduled task

6.Laravel Echo Use

We can basically use Laravel Echo. As for more in-depth use, it is recommended to check the official website documentation.

Finally, I strongly recommend you to use laradock to deploy the Docker development environment, because I believe laradock has prepared all the tools and environments you want to use for you.

The above is the detailed content of Use Laravel Echo in 16 simple steps. For more information, please follow other related articles on the PHP Chinese website!