CODEWITHSUNDEEP
vue.jschannellaravel-echopusher-jslaravel-events
Hadayat Niazi
Hadayat Niazi

Reputation: 2480

Laravel /broadcasting/auth Always forbidden with 403 Error

I tried many solutions but no one works for me

I've installed Laravel echo and pusher js and Pusher/Pusher

#bootstrap.js

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true,

});

#.env

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=my_id
PUSHER_APP_KEY=my_key
PUSHER_APP_SECRET=my_secret
PUSHER_APP_CLUSTER=eu

my event file NewMessage

class NewMessage implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $message;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Message $message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('messages.'. $this->message->to);
    }
    public function broadcastWith()
    {
        return ["message" => $this->message];
    }
}

channel.php

Broadcast::channel('messages.{id}', function ($user, $id) {
    return $user->id === (int) $id;
});

Vue App JS code

mounted(){
            Echo.private(`messages${this.user.id}`)
            .listen('NewMessage', (e) => {
                this.handleIncoming(e.message)
            });
          },
methods:{
      saveNewMessage(msg){
                this.messages.push(msg);
            },
            handleIncoming(message){
                if(this.selectedContact && message.from == this.selectedContact.id ){
                    this.saveNewMessage(message);
                    return;
                }
                alert(message.text);
            }
          }

Api.php

Route::post('/conversation/send', 'Api\ContactController@sendNewMessage');

Contact Controller

public function sendNewMessage(Request $request)
    {
       $message = Message::create([
            'from' => $request->sender_id,
            'to' => $request->receiver_id,
            'text' => $request->text
        ]);

        broadcast(new NewMessage($message));
        return response()->json($message);
    }

I also read the official documentation everything is going good but I didn't figure out why, it's a throwing error. Have any idea?

Upvotes: 1

Views: 3199

Answers (1)

Hadayat Niazi
Hadayat Niazi

Reputation: 2480

I figure out why it is every time shows auth forbidden or doesn't display auth

Solution: you need to double-check your PUSHER_APP_KEY because if it is not set correctly, it will through error because our stream not connected with pusher

PUSHER_APP_KEY="PUT KEY HERE"

If you are very sure that your app key is correct then go to the Network tab and click on your pusher app key which like e70ewesdsdssew0 If it is displaying the result like this

{"event":"pusher:connection_established","data":"{\"socket_id\":\"131139.31305364\",\"activity_timeout\":120}"}

your API key is good if it not correct it will display an error like this

{"event":"pusher:error","data":{"code":4001,"message":"App key 3fdsfdfsdfsd not in this cluster. Did you forget to specify the cluster?"}}

Also, don't forget to put the cluster key

PUSHER_APP_CLUSTER=eu

Upvotes: 1

Related Questions