Laravel Echo server responds nothing in browser
Altogether this what is required:
- Default Laravel installation
- composer require predis/predis
- Installation of NPM modules (laravel-echo-server, socket.io & laravel-echo)
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" } }
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
- Adding route in web.php
Route::get('/test-broadcast', function(){
broadcast(new \App\Events\ExampleEvent);
return response('OK');
});
- 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); });
- Running
npm run dev
to compile all Javascript modules - Running
laravel-echo-server start
to start Laravel Echo Server - Running
php artisan queue:listen --tries=1
to start the listen queue - 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