Laravel + Pusher,无法订阅状态频道

时间:2021-03-06 10:55:02

标签: laravel pusher broadcasting pusher-js

我目前正在研究 Laravel 广播

我已经了解了公共频道、私人频道,但是当我尝试学习状态频道时,遇到了一个问题,无法订阅状态频道

举一个简单的例子:我创建了一个简单的基本登录/注销功能,用于检测用户是离开在线频道还是加入他们

// AuthController
public function login(Request $request) {
    $request->validate([
        ...
    ]);

    $user = User ... where ... first;
    
    if ($user && Hash::check($request->password, $user->password)) {
        $user->update(['online' => 1]);

        $token = $user->createToken(..., ['*']);

        ... // Login attempts

        broadcast(new LoginEvent($user))->toOthers();
        
        return Response::json([
            'token' => $token->plainTextToken,
            'user' => $user
        ]);
    }

    // Fail
}

然后假设我将用户重定向到 /home 路由

// home.vue
<template>
    ...
</template>

<script>
    import { mapGetters } from 'vuex'

    export default {
        ...
        created() {
            Echo.join('room.1')
                .here(users => {
                    console.log(users)
                })
                .joining(user => {
                    console.log(`User: ${user.name} has enter the room`)
                })
                .leaving(user => {
                    console.log(`User: ${user.name} has leave the room`)
                })
        }
    }
</script>

这是我的 bootstrap.js

// resource/js/bootstrap.js
...
...

import Echo from 'laravel-echo'

window.Pusher = require('pusher')

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true,
    authEndpoint: '/api/broadcasting/auth',
    auth: { // Ref: // https://laracasts.com/discuss/channels/laravel/how-to-auth-broadcasting-with-airlocksanctum-access-tokens
        headers: {
            'Authorization': `Bearer ${localStorage['token']}`
        }
    }
})


// routes/channels.php
...

Broadcast::channel('room.{id}', function ($user, $id) {
    // I have read that if we want to allow users to join a presence channel, we must return array or null for not allowing them to join
    return [
        'id' => $user->id,
        'name' => $user->name
    ];
})
<块引用>

我使用不同的浏览器查看结果,假设 A 登录 Chrome,B 登录 Opera

然后在设置好一切之后,我尝试登录,并检查我的浏览器控制台选项卡, 但它没有显示任何内容,然后我查看 Pusher,只有 connected,但没有订阅

所以我试着把 home.vue 改成:

// home.vue
...

created() {
    var channel = Echo.join('room.1')

    console.log(channel)
}

然后我刷新页面,重新进行身份验证,控制台选项卡只给我 PusherPresenceChannel 对象

我该如何解决这个问题?公共和私人频道都很好,可以处理我的案例,但不是在线频道

<块引用>

抱歉英语不好

提前致谢

0 个答案:

没有答案
相关问题