Why I can not catch event echo event in my vue file with laravel-websockets/laravel-echo?

Question

Adding laravel-websockets in Laravel 9/Inertiajs2/vuejs3 with pusher app I can not catch event echo event in my vue file :

function chatInit() {
    console.log('chatInit Echo::')
    console.log(Echo)

    // Echo.private('home')
    Echo.channel('home')
        .listen('NewMessage', (e) => {
            console.log('chatInit NewMessage e::')
            console.log(e)

            }
        )
}

But when I run command in tinker :

event(new \App\Events\NewMessage("Hello world123 987"))

I see this event in local-server.com/laravel-websockets but in the broweser's console:

in resources/js/bootstrap.js I filled lines :

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');


console.log('bootstrap.js window.location.hostname::')
console.log(window.location.hostname)

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    wsHost: window.location.hostname,
    wsPort: 6001,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    disableStats: true,
    forceTLS: true
});

and defined event app/Events/NewMessage.php :

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

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

    public $message;
    public function __construct($message)
    {
        $this->message= $message;
    }

    public function broadcastOn()
    {
        return new Channel('home'); // That is Public Channel
    }
}

In config/broadcasting.php I have :

        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'useTLS' => false,
                // 'encrypted' => true, // need on live
//                'host'=>'http://local-todo-list.com',
                'host'=>'http://127.0.0.1',

                'port'=>6001,
                'scheme'=>'http',
            ],
            'client_options' => [
                // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
            ],
        ],

In .env :

APP_DEBUG=true
# APP_URL=http://local-todo-list.com
APP_URL=http://127.0.0.1
BROADCAST_DRIVER=pusher
///
PUSHER_APP_ID=NNNN
PUSHER_APP_KEY=NNNNNNN
PUSHER_APP_SECRET=NNNNNNN
PUSHER_APP_CLUSTER=eu

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

I work with the app under apache 2/ ubuntu 20 under

http://local-todo-list.com

local hosting.

I tried to use internal laravel's server with command : php artisan serve

and use url http://127.0.0.1:8000/ - But it did not help.

When I create new application and add all laravel-websockets/pusher options I manage to catch events with

 Echo.channel('home')
    ...

command.

Comparing in these 2 applications pieces of code related to laravel-websockets/pusher options I do not see differences and have no idea why

Echo.channel('home')
    .listen

does not work in my todo app?

Thanks in advance!

Why I can not catch event echo event in my vue file with laravel-websockets/laravel-echo?

0 Answers0