Private channel not working with Laravel echo server

Question

I\'m getting this JS error on the console:

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

Here is my complete code:

<

Answer 1

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

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

Answer 2

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

Answer 3

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)

})

Answer 4

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.