Laravel (Echo, Sanctum, websockets) + Pusher + Nuxtjs SPA

Question

我正在尝试将事件发送到私人频道，但我无法接收它们。 否则它适用于公共频道。

这是我的代码：

插件：Echo.js

window.Echo = new Echo({
    broadcaster: 'pusher',        
    key: process.env.MIX_PUSHER_PUBLIC_KEY,
    wsHost: process.env.VUE_APP_WEBSOCKETS_SERVER , //window.location.hostname,//
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsPort: 6001,
    forceTLS: false,
    /* key: process.env.MIX_ABLY_PUBLIC_KEY,
    wsHost: 'realtime-pusher.ably.io',
    wsPort: 443, */
    disableStats: true,
    encrypted: true,    
    auth: {
        headers: {
            'X-CSRF-TOKEN': Cookies.get('XSRF-TOKEN'),            
        },
    },

    authorizer: (channel, options) => {
        return {
            authorize: (socketId, callback) => {
                axios.post(process.env.VUE_APP_WEBSOCKETS_SERVER+'/api/broadcasting/auth', {
                    socket_id: socketId,
                    channel_name: channel.name
                })
                    .then(response => {
                        callback(false, response.data);
                    })
                    .catch(error => {
                        callback(true, error);
                    });
            }
        };
    },
})

Laravel Broadcasting.php：

'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'useTLS' => false,                
                'encrypted' => true,
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http',
            ],

API 路由：

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

客户端：

 created() {                                
        Pusher.logToConsole = true;
        Echo.logToConsole = true;           
                
        window.Echo.private('shop')
            .listen('MessageSent', (e) => {
                console.log('Hi' + e)
        }) 
    },

我注意到推送者订阅频道没有错误，但控制台中的结果是这样的：

Pusher :  : ["Event sent",{"event":"pusher:subscribe","data":{"channel":"private-shop"}}]

Answer 1

嗨，也许这可以帮助你。请确保正确使用授权函数中的响应。过了一会儿，我意识到响应令牌是作为响应而不是 response.data 发送的。试试这个。

window.Echo = new Echo({
    broadcaster: 'pusher',        
    key: process.env.MIX_PUSHER_PUBLIC_KEY,
    wsHost: process.env.VUE_APP_WEBSOCKETS_SERVER , //window.location.hostname,//
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsPort: 6001,
    forceTLS: false,
    /* key: process.env.MIX_ABLY_PUBLIC_KEY,
    wsHost: 'realtime-pusher.ably.io',
    wsPort: 443, */
    disableStats: true,
    encrypted: true,    
    auth: {
        headers: {
            'X-CSRF-TOKEN': Cookies.get('XSRF-TOKEN'),            
        },
    },

    authorizer: (channel, options) => {
        return {
            authorize: (socketId, callback) => {
                axios.post(process.env.VUE_APP_WEBSOCKETS_SERVER+'/api/broadcasting/auth', {
                    socket_id: socketId,
                    channel_name: channel.name
                })
                    .then(response => {
                        callback(false, response);
                    })
                    .catch(error => {
                        callback(true, error);
                    });
            }
        };
    },
})