Socket.io is not listening in laravel echo server

Question

I'm trying to implement chat functionality with laravel echo server using socket.io but unable to listen to the event

Here is my below code

bootstrap.js

import Echo from 'laravel-echo'

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: 'http://127.0.0.1:6001',
    auth: {
        headers: {
            Authorization : 'my_bearer token'
        }
    }
});

app.js

require('./bootstrap');

import Vue from 'vue';

const app = new Vue({
    el: '#app',
    data: {
        message:'',
        chat:{
            message:[]
        }
    },
    mounted() {
        console.log('here i can able to subscribe private channel')
        Echo.private('user.1')
            .listen('App\\Events\\SendChatMessage', (e) => {
                console.log('trying first method', e); //unable to listen
            })
            .listen('SendChatMessage', (e) => {
                console.log('trying second method', e); //unable to listen
            });
    } 
});

Event SendChatMessage.php

public function broadcastOn()
{
   return new PrivateChannel('user.1');
}

.env

BROADCAST_DRIVER=redis
QUEUE_CONNECTION=redis

laravel-echo-server.json

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

My command prompt

php artisan queue:listen

[2021-03-30 23:11:42][feQuvUDNmDg8oEUR6mwXZDQOvzpjLCbZ] Processing: App\Events\SendChatMessage
[2021-03-30 23:11:42][feQuvUDNmDg8oEUR6mwXZDQOvzpjLCbZ] Processed:  App\Events\SendChatMessage

laravel-echo-server start

[11:10:28 PM] - 74J_fL-s4HNFXv3xAAAP authenticated for: private-user.1
[11:10:28 PM] - 74J_fL-s4HNFXv3xAAAP joined channel: private-user.1
Channel: messer_database_private-user.1
Event: App\Events\SendChatMessage

channel.php

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

BroadcastServiceProvider

public function boot()
{
   Broadcast::routes(['middleware' => ['auth:api']]);

   require base_path('routes/channels.php');
}

Version

Laravel: ^8.12
predis/predis": "^1.1

Package.json
laravel-echo": "^1.10.0
socket.io-client": "^4.0.0
vue": "^2.6.12

Any help will be appreciate

Answer 1

Your frontend code and event code is correct. As you can see the user id being authenticated and the even is being broadcasted.

However, the event is not broadcasted to the same channel add the user authenticated to, so the user will never receive it. Somewhere in your backed code, your channel is being prefixed with messer_database .

You should check your redis and broadcast configuration and either remove the prefix or make the broadcast understand the prefix.

Answer 2

You have to remove Redis prefix messer_database_

Check config/database.php and check prefix

'redis' => [

        'client' => env('REDIS_CLIENT', 'phpredis'),

        'options' => [
            'cluster' => env('REDIS_CLUSTER', 'redis'),
             'prefix' => env('REDIS_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_database_'),
        ]
  ]

Answer 3

use "socket.io-client": "^2.4.0"