laravel 和 vue 中的 Pusher "No callbacks on channel for an event"

Question

我想尝试将推送器与我的 laravel 应用程序集成。在我按照 pusher 文档进行操作后，我的测试显示 Pusher : : ["No callbacks on my-channel for my_event"]。数据就在那里，你可以在附加的屏幕截图上看到第一行，但第二行是第一行数据无法在我的 blade 组件上呈现的罪魁祸首。我下面的代码缺少什么？任何人请发表您的想法。

我的活动文件

class MyEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;

public $message;

public function __construct($message)
{
    $this->message = $message;
}

public function broadcastOn()
{
    return ['my-channel'];
}

public function broadcastAs()
{
    return 'my-event';
}
}

我的路由文件在 welcome.blade.php

上触发事件

Route::get('event-test', function () {

$pusher = new Pusher\Pusher(
    env('PUSHER_APP_KEY'),
    env('PUSHER_APP_SECRET'),
    env('PUSHER_APP_ID'),
    array('cluster' => env('PUSHER_APP_CLUSTER'))
);

$pusher->trigger(
    'my-channel',
    'my_event',
    'Welcome'
);

return "Event has been sent";
});

我的 blade 文件：

<body>
    <div class="flex-center position-ref full-height">
        <h6>Pusher Test</h6>
        <p>
            Publish an event to channel <code>my-channel</code>
            with event name <code>my-event</code>; it will appear below:
        </p>

        <div id="app" class="mt-4">
            <ul>
                <li v-for="message in messages">
                    @{{ message }}
                </li>
            </ul>
        </div>
    </div>


        <script src="https://js.pusher.com/7.0/pusher.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // Enable pusher logging - don't include this in production
        Pusher.logToConsole = true;

        var pusher = new Pusher('{{ env('PUSHER_APP_KEY') }}', {
            cluster: 'ap1'
        });

        var channel = pusher.subscribe('my-channel');
        channel.bind('my-event', function(data) {
            app.messages.push(JSON.stringify(data));

            alert(JSON.stringify(data));
        });

        // Vue application
        const app = new Vue({
            el: '#app',
            data: {
                messages: [],
            },
        });
    </script>
</body>

当我使用在路由“event-test”中创建的 url 触发事件时“

这是我在控制台上得到的：

Answer 1

您正在触发 my_event（带下划线），但您的客户端代码正在监听 my-event（带连字符）。

像下面这样在您的 PHP 代码中更改事件名称，它应该可以工作。

$pusher->trigger(
    'my-channel',
    'my-event',
    'Welcome'
);

laravel 和 vue 中的 Pusher "No callbacks on channel for an event"

Pusher "No callbacks on channel for an event" in laravel and vue

laravel

pusher

vue.js