Laravel-echo не может слушать частные каналы и каналы присутствия - PullRequest
0 голосов
/ 16 октября 2019

Я использую пакет laravel-websockets с vuejs и laravel-echo для создания приложения чата в реальном времени. все в порядке, но частные и каналы присутствия не работают на внешнем интерфейсе (внутренний интерфейс в порядке), и у меня нет ошибок в консоли.

Я использую laravel 5.8 и запускаю его с artisan serve. когда я переключаю частный канал на публичный, он работает нормально.

// in bootstrap.js

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '*********',
    cluster: 'ap2',
    'wsHost': window.location.hostname,
    'wsPort': 6001,
    disableStats: true
});

// in private vue component

Echo.private('privatechat.'+this.user.id)
   .listen('PrivateMessageSent',(e)=>{
       console.log('private message');      
    });

})
// in PrivateMessageSent.php

namespace App\Events;

use App\Http\Models\Chat;
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 PrivateMessageSent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Chat $message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('privatechat.'.$this->message->receiver_id);
    }
}

// в channel.php

Broadcast::channel('privatechat.{receiverid}', function($user,$receiverid) {
    return auth()->check();
});

1 Ответ

0 голосов
/ 17 октября 2019

У вас должна быть эта ошибка в ваших журналах

Symfony \ Component \ Debug \ Exception \ FatalThrowableError Аргумент 1, передаваемый в App \ Events \ PrivateMessageSent :: __ construct (), должен быть экземпляром App \Http \ Models \ Chat, экземпляр приложения \ Models \ Chat, заданный

Поскольку вы, вероятно, передаете экземпляр модели App\Models\Chat при отправке события, но используете App\Http\Models\Chat в классе события

Импорт правильного класса

// in PrivateMessageSent.php

namespace App\Events;

use App\Models\Chat; // <--- HERE
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 PrivateMessageSent implements ShouldBroadcast
{

Кроме того, удалите параметр wsHost, чтобы можно было подключиться, а затем убедитесь, что транслируете частный канал с идентифицированным идентификатором пользователя

Это работает для меня

bootstrap.js

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '*********',
    cluster: 'eu',
    'wsPort': 6001,
    disableStats: true
});

Пример события диспетчеризации

use App\Events\PrivateMessageSent;
use App\Models\Chat;

Route::get('/', function () {
    $message = Chat::create([
        'receiver_id' => auth()->id()
    ]);
    event(new PrivateMessageSent($message));
    return view('welcome');
});

И такой компонент прослушивания Vue, как этот

<template>
    <div></div>
</template>

<script>
export default {
    props: {
        user: {
            type: Object,
            required: true
        }
    },
    mounted() {
        Echo.private(`privatechat.${this.user.id}`).listen(
            "PrivateMessageSent",
            e => {
                console.log("private message");
            }
        );
    }
};
</script>

Не забудьте передать объект пользователя как реквизит или получить его с помощью ajax

<example-component :user="{{ auth()->user() }}"></example-component>

Result

enter image description here Надеюсь, это поможет

...