Laravel 5.7 - Broadcasting - socket.io - redis : Nothing happen on client

Question

Since few days I read about how to setup laravel-echo on my local machine. I manage to be able to run laravel-echo-server with redis and socket.io.

The problem is that the event is fired, but nothing happen on the client side.

I know that the event is fired, because it's log into my horizon.log file.

Horizon started successfully.
[2018-08-29 18:35:30][31] Processing: App\Events\NewModel
[2018-08-29 18:35:31][31] Processed:  App\Events\NewModel

Then, into my echo.log file, I can see that the user is connected to the channel and echo trigger the event.

L A R A V E L  E C H O  S E R V E R

version 1.3.9

⚠ Starting server in DEV mode...

✔  Running at localhost on port 60010
✔  Channels are ready.
✔  Listening for http events...
✔  Listening for redis events...

Server ready!

[6:35:15 PM] - QW3VITRzWPH4FvxPAAAB joined channel: channel-name
Channel: presence-channel-name
Event: App\Events\NewModel

It run on port 60010, because when I tried to do it on port 6001, the client is unable to connect.

I'm using virtualbox/homestead on a windows 10 machine.

There is the port forwarding into my Homestead.yaml

ports:
    - send: 60010
      to: 6001

So, I don't understand why client don't log the event. There is why my code at the moment

echo.js

<?php

/*
|--------------------------------------------------------------------------
| Broadcast Channels
|--------------------------------------------------------------------------
|
| Here you may register all of the event broadcasting channels that your
| application supports. The given channel authorization callbacks are
| used to check if an authenticated user can listen to the channel.
|
*/


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

Broadcast::channel('channel-name', function () {
    return true;
});

laravel-echo-server.json

 { "authHost": "https://app.torque.homestead", "authEndpoint": "/broadcasting/auth", "clients": [{ "appId": "appId", "key": "key" }], "database": "redis", "databaseConfig": { "redis": { "port": "6379", "host": "127.0.0.1" }, "sqlite": { "databasePath": "/database/laravel-echo-server.sqlite" } }, "devMode": true, "host": "", "port": "60010", "protocol": "https", "socketio": {}, "sslCertPath": "app.torque.homestead.crt", "sslKeyPath": "app.torque.homestead.key", "sslCertChainPath": "", "sslPassphrase": "", "apiOriginAllow": { "allowCors": false, "allowOrigin": "", "allowMethods": "", "allowHeaders": "" } } 

channels.php

 <?php /* |-------------------------------------------------------------------------- | Broadcast Channels |-------------------------------------------------------------------------- | | Here you may register all of the event broadcasting channels that your | application supports. The given channel authorization callbacks are | used to check if an authenticated user can listen to the channel. | */ Broadcast::channel('App.User.{id}', function ($user, $id) { return (int) $user->id === (int) $id; }); Broadcast::channel('channel-name', function () { return true; }); 

If you want to see another file, let me know. Actually I don't know what could be needed to fix the issue.

I think the problem may come from the forwarding port... But like I said, using 6001 is not working.

I tried many things like changing port(maybe not the right combination like client on 60010 and server on 6001????)

I also change that line into echo.js many times

{
    "name": "laravel/laravel",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "type": "project",
    "require": {
        "php": "^7.1.3",
        "aloha/twilio": "^4.0",
        "eyewitness/eye": "dev-beta",
        "fideloper/proxy": "^4.0",
        "guzzlehttp/guzzle": "^6.3",
        "laravel/framework": "5.7.*",
        "laravel/horizon": "^1.3",
        "laravel/passport": "^6.0",
        "laravel/tinker": "^1.0",
        "predis/predis": "^1.1"
    },
    "require-dev": {
        "filp/whoops": "^2.0",
        "fzaninotto/faker": "^1.4",
        "mockery/mockery": "^1.0",
        "nunomaduro/collision": "^2.0",
        "phpunit/phpunit": "^7.0"
    },
    "autoload": {
        "classmap": [
            "database/seeds",
            "database/factories"
        ],
        "psr-4": {
            "App\\": "app/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "extra": {
        "laravel": {
            "dont-discover": [
            ]
        }
    },
    "scripts": {
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate"
        ],
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover"
        ]
    },
    "config": {
        "preferred-install": "dist",
        "sort-packages": true,
        "optimize-autoloader": true
    },
    "minimum-stability": "dev",
    "prefer-stable": true
}

There is some version of what i'm using :

 vagrant@homestead:~$ node -v v10.8.0 vagrant@homestead:~$ npm -v 6.4.0 vagrant@homestead:~$ php -v PHP 7.2.9-1+ubuntu18.04.1+deb.sury.org+1 (cli) (built: Aug 19 2018 07:16:54) ( NTS ) 

packages.json

vagrant@homestead:/var/lib$ redis-cli --scan
presence-channel-name:members
horizon:1
horizon:34
horizon:supervisors
horizon:measured_jobs
horizon:9
horizon:monitor:time-to-clear
horizon:job:App\Jobs\ProcessModels
horizon:35
horizon:queue:default
horizon:job_id
horizon:job:App\Events\NewModel
horizon:masters
horizon:last_snapshot_at
horizon:33
horizon:master:homestead-xVse
horizon:failed_jobs
horizon:32
horizon:supervisor:homestead-xVse:supervisor-1
horizon:recent_jobs
horizon:measured_queues

composer.json

 { "name": "laravel/laravel", "description": "The Laravel Framework.", "keywords": ["framework", "laravel"], "license": "MIT", "type": "project", "require": { "php": "^7.1.3", "aloha/twilio": "^4.0", "eyewitness/eye": "dev-beta", "fideloper/proxy": "^4.0", "guzzlehttp/guzzle": "^6.3", "laravel/framework": "5.7.*", "laravel/horizon": "^1.3", "laravel/passport": "^6.0", "laravel/tinker": "^1.0", "predis/predis": "^1.1" }, "require-dev": { "filp/whoops": "^2.0", "fzaninotto/faker": "^1.4", "mockery/mockery": "^1.0", "nunomaduro/collision": "^2.0", "phpunit/phpunit": "^7.0" }, "autoload": { "classmap": [ "database/seeds", "database/factories" ], "psr-4": { "App\\\\": "app/" } }, "autoload-dev": { "psr-4": { "Tests\\\\": "tests/" } }, "extra": { "laravel": { "dont-discover": [ ] } }, "scripts": { "post-root-package-install": [ "@php -r \\"file_exists('.env') || copy('.env.example', '.env');\\"" ], "post-create-project-cmd": [ "@php artisan key:generate" ], "post-autoload-dump": [ "Illuminate\\\\Foundation\\\\ComposerScripts::postAutoloadDump", "@php artisan package:discover" ] }, "config": { "preferred-install": "dist", "sort-packages": true, "optimize-autoloader": true }, "minimum-stability": "dev", "prefer-stable": true } 

Thank you for helping me!

--EDIT--

After mcklayin suggest me, I look for redis data. So I run this :

 vagrant@homestead:/var/lib$ redis-cli --scan presence-channel-name:members horizon:1 horizon:34 horizon:supervisors horizon:measured_jobs horizon:9 horizon:monitor:time-to-clear horizon:job:App\\Jobs\\ProcessModels horizon:35 horizon:queue:default horizon:job_id horizon:job:App\\Events\\NewModel horizon:masters horizon:last_snapshot_at horizon:33 horizon:master:homestead-xVse horizon:failed_jobs horizon:32 horizon:supervisor:homestead-xVse:supervisor-1 horizon:recent_jobs horizon:measured_queues 

--EDIT 2--

There is the App\\Events\\NewModel.php file

 <?php 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; class NewModel implements ShouldBroadcast { use Dispatchable, InteractsWithSockets, SerializesModels; public $data; /** * Create a new event instance. * * @return void */ public function __construct($data) { $this->data = $data; } /** * Get the channels the event should broadcast on. * * @return \\Illuminate\\Broadcasting\\Channel|array */ public function broadcastOn() { return new PrivateChannel('channel-name'); } public function broadcastAs() { return 'NewModel'; } } 

Answer 1

Try to add, to the App\\Events\\NewModel:

public function broadcastAs()
    
{
        
    return 'NewModel';
    
}

And add the dot symbol before event name on client side:

window.Echo.channel('channel-name')
    .listen('.NewModel', (e) => {
        console.log('1:');
        console.log(e);
    })