Laravel Echo server responds nothing in browser

Altogether this what is required:

  1. Default Laravel installation
  2. composer require predis/predis
  3. Installation of NPM modules (laravel-echo-server, socket.io & laravel-echo)
  4. Set up Laravel Echo Server through console (mostly default settings, except for domain name): { "authHost": "http://echo", "authEndpoint": "/broadcasting/auth", "clients": [ { "appId": "fc3de97a1787ea04", "key": "ecf31edced85073f7dd77de1588db13b" } ], "database": "sqlite", "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://echo:80", "allowMethods": "GET, POST", "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id" } }

  5. Setup of Redis Server and connecting to it with Laravel broadcasting.php file

'default' => env('BROADCAST_DRIVER', 'redis')

or BROADCAST_DRIVER=redis in .env file

  1. Adding route in web.php

Route::get('/test-broadcast', function(){ broadcast(new \App\Events\ExampleEvent); return response('OK'); });

  1. Adding code in 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' });

ADDED

window.Echo.channel('MyChannel') .listen('.ExampleEvent', (e) => { console.log(e); });

  1. Running npm run dev to compile all Javascript modules
  2. Running laravel-echo-server start to start Laravel Echo Server
  3. Running php artisan queue:listen --tries=1 to start the listen queue
  4. Accessing the http://echo/test-broadcast

UPDATED

11.1 Adjust methods for the ExampleEvent to:

public function broadcastOn() { return new Channel('MyChannel'); }

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

11.2 In welcome.blade.php, before BODY tag, add

<script type="text/javascript" src="/js/app.js"></script>

11.3 in database.php, set redix prefix to empty string value

'prefix' => env('REDIS_PREFIX', '')

DO NOT FORGET TO RE-RUN npm run dev and clear browser cache

Results

Queue running

Laravel Echo Server console results

Client & Server alongside