Pusher subscription error. Laravel - laravel

Question

I'm trying to make a chat between two persons in Laravel 5.4 with Pusher.
First, I send an Ajax post request:
$('#btn-chat').click(function (){
$.post('sendMessage',{
_token: $("[name='csrf-token']").attr('content'),
user_id: userId,
chat_id: 1,
message: $('#btn-input').val()
},
function(data) {
console.log(data);
});
});
Then, a controller takes the request:
public function sendMessage(Request $request){
$user = Auth::user();
$message = new Message;
$message->fill($request->all());
$message->message = $request->message;
$message->save();
broadcast(new MessageSent($message))->toOthers();
return 'Return MessageController';
}
Also, here is my MessageSent event:
class MessageSent implements ShouldBroadcast {
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
public function __construct($message) {
$this->message = $message;
}
public function broadcastOn() {
return new PrivateChannel('chat.'.$this->message->chat_id);
}
}
And my channels.php document:
Broadcast::channel('App.User.{id}', function ($user, $id) {
return (int) $user->id === (int) $id;
});
Broadcast::channel('chat.*', function ($user, $chat_id) {
return (int) $user->id === (int) $chat_id;
});
And finally, the JavaScript listens to events:
var pusher = new Pusher('pusher_key', {
cluster: 'us2',
encrypted: true,
authEndpoint: 'broadcasting/auth',
auth: {
headers: {
'X-CSRF-Token': $("[name='csrf-token']").attr('content')
}
}
});
Pusher.logToConsole = true;
var channel = pusher.subscribe('private-chat.1');
channel.bind('MessageSent', (data) => {
alert(data.message);
});
All that should to the work, but when I load the chat page, it throws an error on JavaScript console:
Pusher : No callbacks on private-chat.1 for pusher:subscription_error

Answer 1

Pusher emits events automatically in certain circumstances.
Pusher : No callbacks on private-chat.1 for pusher:subscription_error
Is telling you that there was an error subscribing to the channel, but you haven't bound a callback to that event. You should be able to get more information about the error you experienced during subscription by binding to the subscription:error event. You can find more info here.

Answer 2

As leesio anwsered, Pusher emits events if an error ocurrs.
Afther I added:
channel.bind('pusher:subscription_error', function(data) {
console.log(data);
});
It displayed in console:
JSON returned from webapp was invalid, yet status code was 200.
Because the Laravel broadcasting routes (broadcasting/auth) returned an HTTP response, not the JSON that Pusher needs.
So my solution was create a new route (pusherAuth), and then returning to Pusher the following JSON:
public function pusherAuth(Request $request){
$key = 'xxxxxxxxxxxxx';
$secret = 'xxxxxxxxxxxxxx';
$channel_name = $request->channel_name;
$socket_id = $request->socket_id;
$string_to_sign = $socket_id.':'.$channel_name;
$signature = hash_hmac('sha256', $string_to_sign, $secret);
return response()->json(['auth' => $key.':'.$signature]);
}
Client-side JavaScript:
var pusher = new Pusher('xxxxxxxxxxxxx', {
cluster: 'us2',
encrypted: true,
authEndpoint: 'pusherAuth', //Before 'broadcasting/auth'
auth: {
headers: {
'X-CSRF-Token': $("[name='csrf-token']").attr('content')
}
}
});
And that should do the work. I don't know why I couldn't do it with Laravel broadcasting routes, but I post this answer if anyone has the same problem.
More info:
Pusher auth signatures
PHP HMAC SHA56