CODEWITHSUNDEEP
laravelwebsocketsocket.iolaravel-5.4laravel-echo
Parth Vora
Parth Vora

Reputation: 4114

Private channel not working with Laravel echo server

I'm getting this JS error on the console:

app.js:167 Uncaught ReferenceError: receiverId is not defined

Here is my complete code:

PrivateChatController:

event(new PrivateMessageEvent($chat, $receiverId));

PrivateMessageEvent:

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;
use App\User;
use App\PrivateChat;

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

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

    /**
     * Get the channels the event should broadcast on.
     *
     * @return Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('private-chat.' . $this->receiverId);
    }
}

Bootstrap.js

import Echo from "laravel-echo"

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
});

window.Echo.private(`private-chat.${receiverId}`)
    .listen('PrivateMessageEvent', (e) => {
        console.log(e);
});

channels.php

Broadcast::channel('private-chat.{receiverId}', function ($user, $receiverId) {
    return true; // this is just for debugging to allow anyone to listen on this channel
    //return $user->id === $receiverId;
});

laravel-echo-server.json

{
    "authHost": "http://localhost",
    "authEndpoint": "/broadcasting/auth",
    "clients": [],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "sslCertPath": "",
    "sslKeyPath": ""
}

In background queue:work and laravel-echo-server are already running

Upon firing that event, I'm getting this message on the laravel-echo-server console:

Channel: private-private-chat.
Event: App\Events\PrivateMessageEvent
CHANNEL private-private-chat.

Notes:

I have spent more than 10 hours and tried everything I could, but no luck.

Thanks

Upvotes: 3

Views: 15093

Answers (4)

Marc
Marc

Reputation: 5465

You can set REDIS_PREFIX to NULL to remove the prefix else if it has a value then you must set keyPrefix in the echo server config.

If REDIS_PREFIX = NULL then do not add keyPrefix.

Important Notice

When using broadcastAs(), the call to listen('') call must start with a DOT

At this moment the behavior when keyPrefix is used is unknown, if you use the prefix settings, please comment on the outcome of the DOT requirement.

https://laravel.com/docs/6.x/broadcasting#broadcast-name

public function broadcastAs()
{
    return 'server.created';
}

.listen('.server.created', function (e) {
    ....
});

I would check the DOT + PREFIX combo my self but I feel Laravel Echo is going to give me a heart attack if I work on it any longer.

If you do not use broadcastAs() then the naming will fallback to the event class name, in this case there is no DOT prefix injected, see the setup below:

laravel-echo-server.json

{
    "host": "127.0.0.1",
    "port": "6001",
    "protocol": "http",

    "database": "redis",

    "databaseConfig": {
        "redis": {
            "host": "127.0.0.1",
            "port": 6379,
            "db": 0,
            "keyPrefix": "VALUE OF REDIS_PREFIX"
        }
}

/app/Events/MyExample.php

<?php

namespace App\Events;

use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;

class MyExample implements ShouldBroadcastNow
{

  private $id;

  public $payload;

  public function __construct($id, $payload)
  {
    $this->id = $id;
    $this->payload = $payload;
  }

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

}

Trigger an event (PHP)


use App\Events\MyExample

$payload = [
 'duck' => 'sauce',
 'Bass' => 'Epic'
];

event(new MyExample($id, $payload))

Listening for event (JavaScript)

Echo.private(`example.${id}`).listen('MyExample', event => {

  console.log('payload', event.payload)

})

Upvotes: 6

omarjebari
omarjebari

Reputation: 5519

There are a few things you need to do.

1) Remove all 'private-' from the beginning of your channel names. These get handled behind the scenes by the various libraries (eg socket.io/laravel-echo). If you look at any debug output you will see 'private-' prepended to the front of the channel names but you DO NOT need to add these.

2) If you're using redis then make sure the REDIS_PREFIX is set to an empty string in your .env file. By default it's set to something like 'laravel_database' and this messes up the channel names.

REDIS_PREFIX=

3) Make sure you've got your laravel-echo server running (and redis/pusher). Also you need to make sure you have the queue worker running. In my case, as i;m running redis, i had to run:

php artisan queue:work redis

Upvotes: 0

Gor Azizyan
Gor Azizyan

Reputation: 13

Try instead of event(new PrivateMessageEvent($chat, $receiverId)); this 

App\Events\PrivateMessageEvent::dispatch($chat, $receiverId);

Upvotes: 0

dparoli
dparoli

Reputation: 9171

Try to change this line:

$this->$receiverId = $receiverId;

To this line:

$this->receiverId = $receiverId;

In your PrivateMessageEvent __construct()

Update:

Try to use use a fixed channel id like this:

window.Echo.private('private-chat.1')

I suggest you also to use presence channel, are private too but with more features, i.e.:

Echo.join('private-chat.1')
   .listen('PrivateMessageEvent', (e) => {
    console.log(e);
});

If you use a dinamic channel number like you use, i.e.:

window.Echo.private(`private-chat.${receiverId}`)

You have to give receiverId a value in javascript, this declaration is a generic room listener but receiverId should be defined, ${receiverId} is a string interpolation.

You can define receiverId in the template before inluding app.js, for example, using blade syntax:

<script>
   receiverId = {{ $receiverId }};
</script>

Another think: I want to be clear that, in all the code above, receiverId represent the id of the chat/room a client want join to not the ID of the receiving user.

Upvotes: 2

Related Questions