Laravel-Echo не подписывается на частные каналы через Vue.js

Я разрабатываю проект с Laravel (назад) и Vuejs (с Vuex). Я также использую Sanctum: auth для аутентификации пользователей, laravel-websockets и Laravel-Echo для трансляции.

Раньше у меня возникала проблема аутентификации на моей консоли с ошибкой: POST 'broadcast / auth' 404 not found.

Я смог решить эту проблему после просмотра учебника, в котором в одном проекте объединились Sanctum, Vue и Laravel Echo.

Однако теперь, когда я тестирую сервис, я понимаю, что могу слушать общедоступные каналы, но не частные.

Судя по тому, что я вижу на панели управления websockets, я даже не подписываюсь на частные каналы.

В моем архиве .vue:

import room from './Room'
import axios from 'axios'
import Echo from 'laravel-echo'
import Pusher from 'pusher-js'
console.log(Pusher);
...
export default {
...
   data: () => ({
        ...
        Echos:undefined
   }),
  
   mounted(){
    ...
    this.instantiatingEcho();
   },
   
   methods:{
   
   ...
   instantiatingEcho(){
   
        axios({
        method: "GET",
        url: "http://127.0.0.1:8000/api/users",
        headers: {
            Authorization: `Bearer ${this.$store.state.user.token}`,
        },
        })
        .then(({ data }) => {
            console.log(data);

            this.Echos = new Echo({
                broadcaster: 'pusher',
                key: process.env.VUE_APP_WEBSOCKETS_KEY,
                wsHost: process.env.VUE_APP_WEBSOCKETS_SERVER,
                wsPort: 6001,
                forceTLS: false,
                disableStats: true,
                authorizer: (channel, options) => {
                    console.log(options);
                    return {
                        authorize: (socketId, callback) => {
                            axios({
                                method: "POST",
                                url: "http://127.0.0.1:8000/api/broadcasting/auth",
                                headers: {
                                    Authorization: `Bearer ${this.$store.state.user.token}`,
                                },
                                data: {
                                    socket_id: socketId,
                                    channel_name: channel.name,
                                },
                            })
                            .then((response) => {
                                callback(false, response.data);
                            })
                            .catch((error) => {
                                callback(true, error);
                            })
                        },
                    }
                }
            })
        })

        this.enterinrom();
    },

    enterinrom(){
        this.Echos.private('Room.2')
        .listen('BroadcastRoom', (e) =>{
            console.log(e)
        });    
    },
    
    }
}

каналы.php:

 Broadcast::channel('Room.{id}', function ($id){
     return true;
 });

Мероприятие:

 <?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
use App\Broadcasting\RoomChannel;

class BroadcastRoom implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $mensage;
    public $id;


    public function __construct($mensage, $id)
    {
       $this->mensage = $mensage;
       $this->id = $id;
    }

    public function broadcastWith()
    {
       return ["mensage" => $this->mensage];
    }


    public function broadcastOn()
    {
        return new PrivateChannel('Room.'.$this->id);
    }

}

api.php:

   ...

   Broadcast::routes(['middleware' => ['auth:sanctum']]);

   Route::middleware('auth:sanctum')->get('/users', function (Request $request) {
       return $request->user();
   });

   Route::post('/users/login', function (Request $request) {

   $user = User::where('email', $request->email)->first();

   if (!$user || ($request->password != $user->password)) {
        return response([
            'message' => ['These credentials do not match our records.']
            ], 404);
   }

   $token = $user->createToken('idiot-online-token')->plainTextToken;

   $response = [
        'user' => $user,
        'token' => $token
   ];

   return response($response, 201);
});

web.php:

Route::get('/enviaevento/{id}', function ($id) {
    return event(new \App\Events\BroadcastRoom('Uai só...', $id));
});

App \ Providers \ BroadcastServiceProvider :: class в config / app.php раскомментирован.

Результаты: введите здесь описание изображения

Кто-нибудь может мне помочь?


person Gabriel Gomes    schedule 26.11.2020    source источник


Ответы (1)


В свойстве авторизатора убедитесь, что ответ используется правильно. Вы можете попробовать использовать response вместо response.data. Я какое-то время застрял на этой проблеме, просто чтобы понять, что фрагмент в документации не подходит для моей ситуации.

import room from './Room'
import axios from 'axios'
import Echo from 'laravel-echo'
import Pusher from 'pusher-js'
console.log(Pusher);
...
export default {
...
   data: () => ({
        ...
        Echos:undefined
   }),
  
   mounted(){
    ...
    this.instantiatingEcho();
   },
   
   methods:{
   
   ...
   instantiatingEcho(){
   
        axios({
        method: "GET",
        url: "http://127.0.0.1:8000/api/users",
        headers: {
            Authorization: `Bearer ${this.$store.state.user.token}`,
        },
        })
        .then(({ data }) => {
            console.log(data);

            this.Echos = new Echo({
                broadcaster: 'pusher',
                key: process.env.VUE_APP_WEBSOCKETS_KEY,
                wsHost: process.env.VUE_APP_WEBSOCKETS_SERVER,
                wsPort: 6001,
                forceTLS: false,
                disableStats: true,
                authorizer: (channel, options) => {
                    console.log(options);
                    return {
                        authorize: (socketId, callback) => {
                            axios({
                                method: "POST",
                                url: "http://127.0.0.1:8000/api/broadcasting/auth",
                                headers: {
                                    Authorization: `Bearer ${this.$store.state.user.token}`,
                                },
                                data: {
                                    socket_id: socketId,
                                    channel_name: channel.name,
                                },
                            })
                            .then((response) => {
                                callback(false, response);
                            })
                            .catch((error) => {
                                callback(true, error);
                            })
                        },
                    }
                }
            })
        })

        this.enterinrom();
    },

    enterinrom(){
        this.Echos.private('Room.2')
        .listen('BroadcastRoom', (e) =>{
            console.log(e)
        });    
    },
    
    }
}
person Russell Chan    schedule 26.01.2021