javascript - Why is my frontend not receiving the event from the backend? - Stack Overflow

admin管理员组

文章数量:1401491

I am new to working with Laravel, and websockets in general. I checked out the Laravel documentation regarding real time events and don't understand why the problem below occurs.

I have a database with the basic users table that breeze provides, and a rooms table. A user can create a room, instantly joins it, and then an other user can join with the room code. I am trying to send a message to the user already in the room, when an other user joins, but for some reason nothing seems to make it show up. I am using pusher and I set it up following the guide in the laravel documentation. I see the 'subscribed' events appearing on the pusher debug log, but the message isn't going through. I'm aware that I'm using a private channel, but i set the acces up like this so that should work

Broadcast::channel('room.{roomID}', function ($user, $roomId) {
    return true;
});

This is my relevant code, I appriciate the help

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

    public $room;

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

public function broadcastOn(): Channel
    {
        return new PrivateChannel('room.' . $this->room->id);
    }

    public function broadcastAs(): string
    {
        return 'player-joined';
    }
}

public function joinRoom(Request $request)
    {
$room = GameRoom::where('room_code', $request->room_code)->first();
broadcast(new NewPlayerJoined($room))->toOthers();

window.Echo.private(`room.${props.room.room_code}`)
    .listen('player-joined', (e) => {
        console.log('player joined', e)
    })

I am new to working with Laravel, and websockets in general. I checked out the Laravel documentation regarding real time events and don't understand why the problem below occurs.

I have a database with the basic users table that breeze provides, and a rooms table. A user can create a room, instantly joins it, and then an other user can join with the room code. I am trying to send a message to the user already in the room, when an other user joins, but for some reason nothing seems to make it show up. I am using pusher and I set it up following the guide in the laravel documentation. I see the 'subscribed' events appearing on the pusher debug log, but the message isn't going through. I'm aware that I'm using a private channel, but i set the acces up like this so that should work

Broadcast::channel('room.{roomID}', function ($user, $roomId) {
    return true;
});

This is my relevant code, I appriciate the help

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

    public $room;

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

public function broadcastOn(): Channel
    {
        return new PrivateChannel('room.' . $this->room->id);
    }

    public function broadcastAs(): string
    {
        return 'player-joined';
    }
}

public function joinRoom(Request $request)
    {
$room = GameRoom::where('room_code', $request->room_code)->first();
broadcast(new NewPlayerJoined($room))->toOthers();

window.Echo.private(`room.${props.room.room_code}`)
    .listen('player-joined', (e) => {
        console.log('player joined', e)
    })

• javascript
• php
• laravel
• vue.js
• pusher

Share Improve this question Follow edited Mar 22 at 23:15 DarkBee 15.5k88 gold badges7272 silver badges117117 bronze badges asked Mar 22 at 17:04 gugugaguguga 4122 bronze badges 4

• Hey hows it going i see there are no debug statements , may you start with that i personally use pure php so i would use var_dump() for example , the equivalent in laravel for logging documentation is at laravel/docs/11.x/logging and also check the requests are fired automatically or do you need to fire that request maybe using php artisan tinker ? hope this helps – AndGoEdu Commented Mar 22 at 17:12
• 1 Hey, sorry, there are no errors in the logs, and if I do for example: $room = \App\Models\Gameroom::find(2) broadcast(new \App\Events\NewPlayerJoined($room)) Then i get back Illuminate\Broadcasting\PendingBroadcast {#5325} in tinker – guguga Commented Mar 22 at 17:42
• i think the issue might be in the request itself its showing pendingbroadcast could your configuration need to be revised and thats all ? – AndGoEdu Commented Mar 22 at 20:52
• also you can check if its pending if the queue worker is pending using php artisan queue:work laravel/docs/12.x/queues – AndGoEdu Commented Mar 22 at 20:53

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 1

doing it that way would expose ur backend. if u doing something like this anyways.

const echo = new Echo({
    broadcaster: 'pusher',
    key: 'your-pusher-key',
    cluster: 'your-cluster',
    encrypted: true
});

According to your logs Illuminate\Broadcasting\PendingBroadcast {#5325} it seems the request itself is pending i suggest checking the Laravel queues because the request might be sent but its queued kind of like its a pending post or request

php artisan queue:work

Also kindly check this section of this documentation Connections vs Queues - Lara

If you're using Laravel Reverb, please note that if you're using a domain protected by SSL, you may need to implement the broadcasting authentication method yourself. I encountered this issue once. For a live server, you will also need to configure a reverse proxy in Apache or Nginx to get everything running smoothly.

Frontend env file configuration

REVERB_SERVER_PORT=8080
REVERB_PORT=80

Backend env file configuration

VITE_REVERB_PORT=8080
VITE_REVERB_SCHEME=http

Laravel echo setup for Javascript

const echo = new Echo({
        broadcaster: "reverb",
        key: import.meta.env.VITE_REVERB_APP_KEY,
        wsHost: import.meta.env.VITE_REVERB_HOST,
        wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
        wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
        forceTLS: false,
        encrypted: true,
        enabledTransports: ["ws"],
        transport: "ws",
    
        authEndpoint: import.meta.env.VITE_API_URL + "/broadcasting/auth",
    
        auth: {
            headers: {
                Authorization: `Bearer ${token}`,
                Accept: "application/json",
            },
        },
    });

   // Use private().listen() if you're using event
    
   echo?.private(`room.${props.room.room_code}`)?.notification((room) => {
        // Handle notification
});

本文标签： javascriptWhy is my frontend not receiving the event from the backendStack Overflow