bash

// 是否在开发模式下运行此服务器（y/n） 输入y
? Do you want to run this server in development mode? (y/N) 
 
// 设置服务器的端口 默认 6001 输入 6001就可以了 或者你想要的
? Which port would you like to serve from? (6001)
 
// 想用的数据库  选择 redis
? Which database would you like to use to store presence channel members? (Use arrow keys)
❯ redis 
  sqlite 
 
//   这里输入 你的laravel  项目的访问域名
? Enter the host of your Laravel authentication server. (http://localhost) 
 
// 选择 网络协议 http
? Will you be serving on http or https? (Use arrow keys)
❯ http 
  https 
 
// 您想为HTTP API生成客户端ID/密钥吗 N
? Do you want to generate a client ID/Key for HTTP API? (y/N) 
 
// 要设置对API的跨域访问吗？（y/n）N

yaml

BROADCAST_DRIVER=redis
QUEUE_CONNECTION=redis

php

<?php

namespace App\Events;

use Carbon\Carbon;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Console\Scheduling\Schedule;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

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 new PrivateChannel('channel-name');
    }

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

yaml

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

javascript

import Echo from 'laravel-echo'

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

html

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <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) => {
                    console.log(e);
                    that.names.push(e.name)
                });
        }
    }
</script>

html

<div class="content">
    <div class="title m-b-md">
        
    </div>
    <example-component></example-component>
</div>

php

Route::get('test-broadcast', function(){
    broadcast(new \App\Events\RssCreatedEvent());
});

WARNING

坑3 注意 Channel 名称和 Event名称

bash

#!/usr/bin/env bash

laravel-echo-server  start