无法收听推送者私人频道事件？答案

【问题标题】：Cannot listen to pusher private channel events?无法收听推送者私人频道事件？
【发布时间】：2015-06-16 14:45:52
【问题描述】：

我正在尝试设计一个聊天应用程序，我试图通过 Pusher 的私人渠道传递消息以进行实时传递。

我正在使用 Smart Admin Theme's ajax version，并且正在使用主题本身附带的聊天 UI 插件。

基本上我有 Mapbox 地图并使用 Leaflet 我在地图上放置了很多标记，每个标记都是一个用户。

所以基本上当用户登录后，他可以在地图上查看其他用户，当他点击地图时，这段代码会执行：

// Binding the marker on click event to bring up the chat
marker.on('click', function(){
    var chatboxId = 'private-' + currentUser.id + '-' + user.id;
    chatboxManager.addBox(chatboxId, {
        first_name: user.first_name,
        last_name: user.last_name,
    });

    // Creating a new chatbox
    $('#' + chatboxId).chatbox({
        messageSent: function(id, user, message){
            this.boxManager.addMsg('Me', message);

            splittedId = id.split('-');

            $.ajax({
                url: '/messages',
                method: 'post',
                type: 'json',
                data: {
                    receiver_id: splittedId[2],
                    body: message
                }
            });
        }
    });

    // Initializing pusher and authenticating the private channel
    var pusher = new Pusher('082bab423e2a8be3da2a', {
        authTransport: 'jsonp',
        authEndpoint: '/pusher/auth'
    });

    // Subscribing to the channel where the name of the channel is private-senderId-receiverId
    var chat = pusher.subscribe('private-' + user.id + '-'  + currentUser.id);
    console.log(chat);
    chat.bind('message', function(response){
        console.log(response);
    });
});

此代码为在地图上单击的用户生成一个新的聊天框。此时 pusher 也被初始化，它联系“/pusher/auth”以获取私有频道的身份验证。

身份验证工作正常。我知道这一点，因为 pusher 返回一个令牌，因为它应该在 JSON 中。然后我绑定通道变量来监听“消息”事件，但我无法监听通道上的新消息。

当我尝试console.log(chat)（私人频道）时，它会在控制台中输出：

Object { callbacks: Object, global_callbacks: Array[0], failThrough:
b/<(), name: "private-1-1", pusher: Object, subscribed: false }

由于某种原因，订阅是错误的。我究竟做错了什么？我确信我在某个地方遗漏了一些小东西，而且我已经在这个地方待了超过 2 个小时。谁能指出我错过了什么？

编辑：用于身份验证的服务器端路由

Route::get('/pusher/auth', function(\Illuminate\Http\Request $request, \App\User $user){
    $data = $request->all();

    $explodedChannel = explode('-' ,$data['channel_name']);

    if($user->currentUser()->id == $explodedChannel[2]){
        $pusher = new \Pusher(
            getenv('PUSHER_PUBLIC'),
            getenv('PUSHER_PRIVATE'),
            getenv('PUSHER_APPID')
        );
        echo $pusher->socket_auth($data['channel_name'], $data['socket_id']);
    }
    else{
        return response()->json('Forbidden', 403);
    }
});

【问题讨论】：

能否提供Pusher JavaScript logging的输出？
@leggetter 我不知道这一点。我将对此进行调查并更新我的问题。谢谢你。 :)

标签： javascript jquery laravel leaflet pusher

【解决方案1】：

编辑您的服务器端代码，其中 echo auth 响应如下：

编辑这个

 echo $pusher->socket_auth($data['channel_name'], $data['socket_id']);

到

        $auth= $pusher->socket_auth(Input::get('channel_name'), Input::get('socket_id'));
        $callback = str_replace('\\', '', $_GET['callback']);
        header('Content-Type: application/javascript');
        echo($callback . '(' . $auth . ');');
        return;

【讨论】：