推送器:App\Events\Event 的 testChannel 上没有回调

Pusher : No callbacks on testChannel for App\Events\Event

我建了一个Laravel广播,打算把它做成一个实时聊天应用程序。检查客户端页面时,控制台日志显示:

Pusher : Event recd : {"event":"App\Events\Event","data":{"message":"Greetings from PrinceLuo!"},"channel":"testChannel"}

Pusher : No callbacks on testChannel for App\Events\Event

它只是忽略了确实存在的回调函数......

顺便说一句,我还没有安装 npm,所以我使用的是 Pusher 仪表板建议的简单 Javascript 代码,而不是 Laravel 建议的 Vue 代码。

在控制台日志和 Pusher 仪表板上我都可以看到服务器发送的广播消息。

这是我的客户端代码:

<!DOCTYPE html>
<html>
    <!DOCTYPE html>
<head>
  <title>Pusher Test</title>

  <script src="{{ asset('js/pusher.min.js') }}"></script>
  <script>

    // Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var pusher = new Pusher('****************', {
      cluster: 'ap1',
      encrypted: true
    });

    var channel = pusher.subscribe('testChannel');
    channel.bind('App\Events\Event', function(data) {
  console.log(data);
});


  </script>
</head>
<body>
  <h1>Pusher Test</h1>
  <p>
    Try publishing an event to channel <code>testChannel</code>
    with event name <code>Event</code>.
  </p>
</body>
</html>

隐藏推键就好了~~

我用谷歌搜索了一些类似的案例。但没有人能给我答案。 有谁遇到过这个案例或者对这个案例有什么想法吗?


更新:

我也 post 我的服务器端代码在这里供任何需要的人使用:

<?php

namespace App\Events;

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

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

    public $message;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($message)
    {
        //
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
//        return new PrivateChannel('channel-name');
//        return new PrivateChannel('testChannel');
        return new \Illuminate\Broadcasting\Channel('testChannel');
    }
}

这是我的路线:

Route::get('test_event',function(){
    event(new Event('Greetings from PrinceLuo!'));
});

Route::get('test_listen',function(){
    return view('listenBroadcast');
});

对于那些对这个案例感兴趣的人,我 post 我为解决这个问题做了什么:

注意Push Logger显示【App\Events\Event】是为了转义反斜杠的作用。所以在 JavaScript 中,我们必须将其更改为相同的:

channel.bind('App\Events\Event', function(data){});

简单但必不可少。

这是我做的

channel.bind('pusher:subscription_succeeded', function(members) {
    // alert('successfully subscribed!');
 });

 channel.bind("App\Events\NewComment", function(data) {
     console.log(data);
 });