The usage process of Echo in Laravel framework

Today’s article will share with you about the use of echo in the laravel framework. The content of the article is step by step. It took 16 steps to complete a process. The process is very clear. I hope it can help friends in need. Bar. Without further ado, let’s get straight to the content.

The official document recommends using Pusher or laravel-echo-server (which is an implementation using NodeJS Socket.IO WebSocket server).

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

Today, take advantage of the simplest "16" steps and go through the code integration 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, the website is running

Using Laravel Echo Server

Because laradock integrates " Laravel Echo Server", so we can use

Laravel Echo very conveniently.

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

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

After preparing the back-end configuration, we start 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

Instance

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

Echo Example, listen for broadcasts or notifications sent from the backend.

First we use the

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

<template>
    <p>
        </p>
<p>
            </p>
<p>
                </p>
<p>
                    </p>
<p>Example Component</p>

                    <p>
                        </p>
<ul>
                            <li>{{ name }}</li>
                        </ul>
                    
                
            
        
    
</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 a

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 homepage load the

vue component and refresh the test:

nbsp;html>
getLocale() }}">
    
        <meta>
        <meta>
        <meta>
        <meta>
        <title>Laravel</title>
    
    
    <p>
        <example-component></example-component>
    </p>
    <script></script>
    

Note:

<meta>

needs to be introduced in header to compile Front-end:

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

Refresh the web page and check the running effect:

As we wish, 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 The 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 entire content of this article. For more laravel content, please pay attention to

laravel framework introductory tutorial.

Recommended related articles:

Code analysis of the Autoloader module in the Laravel framework

In-depth analysis of the appearance mode in the Laravel framework

Related course recommendations:

The latest five Laravel video tutorial recommendations in 2017

The above is the detailed content of The usage process of Echo in Laravel framework. For more information, please follow other related articles on the PHP Chinese website!