Laravel Echo Listener not working on frontend

I have created an event:

<?php

namespace AppEvents;

use IlluminateBroadcastingChannel;
use IlluminateBroadcastingInteractsWithSockets;
use IlluminateBroadcastingPresenceChannel;
use IlluminateBroadcastingPrivateChannel;
use IlluminateContractsBroadcastingShouldBroadcast;
use IlluminateFoundationEventsDispatchable;
use IlluminateQueueSerializesModels;

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


    public $queue;

    public function __construct()
    {
        $queue = 'test2';
    }


    public function broadcastOn()
    {
        return new Channel('thechannel');
    }
    public function broadcastWith()
    {
        return ['test1'];
    }
    public function broadcastAs() {
        return 'examplee';
    }
}

Here is the bootstrap.js:

import Echo from "laravel-echo"

window.io = require('socket.io-client');

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
});
window.Echo.channel('thechannel')
    .listen('.examplee', (e) => {
        console.log(e);
    });

and the route:

Route::get('/', function () {
    event(new AppEventsQueueStatus());
    return view('welcome');
});

laravel-echo-server.json :

{
    "authHost": "http://localhost",
    "authEndpoint": "/broadcasting/auth",
    "clients": [
        {
            "appId": "2583d37858d083b7",
            "key": "248536aa1290916b4cd80279fe8fa4cf"
        }
    ],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "secureOptions": 67108864,
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": true,
        "allowOrigin": "http://localhost:8000",
        "allowMethods": "GET",
        "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
    }
}

ENV file:

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:tDyjOGMQ5AhlIdieUGZnhTi3IcJ7+vx4m8H6rDi9idI=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=assets_daily_info
DB_USERNAME=root
DB_PASSWORD=

BROADCAST_DRIVER=redis
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

When I set the broadcast driver to log:

[2020-11-26 16:19:52] local.INFO: Broadcasting [QueueStatuss] on channels [thechannel] with payload:
{
    "0": "test1",
    "socket": null
}

When I set the broadcast driver to redis & monitor redis via CLI:

1606408782.818033 [0 127.0.0.1:11665] "EVAL" "for i = 2, #ARGV don  redis.call('publish', ARGV[i], ARGV[1])nend" "0" "{"event":"examplee","data":{"0":"test1","socket":null},"socket":null}" "thechannel"
1606408782.818162 [0 lua] "publish" "thechannel" "{"event":"examplee","data":{"0":"test1","socket":null},"socket":null}"

It looks like everything works fine, but the browser console in frontend doesn’t show any logs.
What’s the problem? Why can’t I get the listener to work on frontend?

I tried changing the broadcastAs, and also putting a dot before the name in the frontend.
But still no luck.

Answer

It so strange, however, I fixed it by downgrading the socket.io-client from 3.0.3 to 2.3.0

Advertisement

Answer