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

如何解决Laravel (Echo, Sanctum, websockets) + Pusher + Nuxtjs SPA

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

这是我的代码：

插件：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 广播.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"}}]

解决方法

嗨，也许这可以帮助你。请确保正确使用授权函数中的响应。过了一会儿，我意识到响应令牌是作为响应而不是 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);
                    });
            }
        };
    },})