I am following the tutorial given in https://medium.com/@dennissmink/laravel-echo-server-how-to-24d5778ece8b .

I installed laravel-echo-server, redis, socket.io, laravel-echo.

This is the configuration of laravel-echo-server init

{
    "authHost": "http://localhost",
    "authEndpoint": "/broadcasting/auth",
    "clients": [],
    "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": false,
        "allowOrigin": "",
        "allowMethods": "",
        "allowHeaders": ""
    }
}

This js code is at the bottom of app.blade.php which is included in all pages

<script type="module">
    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('test-event')
        .listen('ExampleEvent', (e) => {
            console.log(e);
        });
</script>

I created an event php artisan make:event ExampleEvent as follows

namespace AppEvents;

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

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

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return IlluminateBroadcastingChannel|array
     */
    public function broadcastOn()
    {
        return new Channel('test-event');
    }

    public function broadcastWith()
    {
        return [
            'data' => 'Hi bro!'
        ];
    }
}

and the following route

Route::get('test-broadcast', function(){
    broadcast(new AppEventsExampleEvent);
});

I also started a queue listener

php artisan queue:listen --tries=1

When I visit the page test-broadcast I see this in terminal

But the console of the browser shows nothing while the console.log(e); must return something. I also did this

    window.Echo.channel('test-event')
        .listen('ExampleEvent', (e) => {
            alert('hi')
            console.log(e);
        });

but nothing was alerted. It seems something is wrong with listening.

Thanks in advance.

update

I receive this error from console of browser when visiting login or any page includes app.blade.php

Update

I updated the script codes as below

    <script src="http://{{ Request::getHost() }}:6001/socket.io/socket.io.js"></script>
    <script src="{{ asset('/js/app.js') }}"></script>
    <script type="module">
        import Echo from 'laravel-echo'

        window.Echo = new Echo({
         broadcaster: 'socket.io',
         host: window.location.hostname + ':6001'
         });

        window.Echo.channel('test-event')
            .listen('.ExampleEvent', (e) => {
                console.log(e);
            });
    </script>

The console still report error

TypeError: Error resolving module specifier: laravel-echo

update

I run

npm run development -- --watch

and this is the result

cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js –progress –hide-modules –config=node_modules/laravel-mix/setup/webpack.config.js
“–watch”

'cross-env' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/
setup/webpack.config.js "--watch"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:UsersMamadAppDataRoamingnpm-cache_logs2020-03-05T14_59_30_604Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ watch: `npm run development -- --watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:UsersMamadAppDataRoamingnpm-cache_logs2020-03-05T14_59_30_697Z-debug.log