Laravel Real Time Notifications Implementation using socket.io + echo + redis
Budget: €25 – €60 EUR
Hi,
I have a laravel 11 website, to which I want to add real time notifications capability using socket.io + echo + redis. I already created the basic structure for a public channel notification and managed to get the notifications pushed to the browser (as seen through the console > network > ws > messages). However, the front-end script in the blade view (echo listener) fails to detect the incoming notification despite being visible by the browser. Somehow the message format sent by socket.io server doesn't seem to match that expected by laravel's echo listener.
Here are the 2 things I need done:
(1) tweaking the current setup to enable the front-end DOM detect the incoming public message along with its payload and act on it by setting <div id="notify"> innerHtml = message.
The result should be: Auth user(A) can trigger event to notify all auth users, who will not only get the notification but also see who sent it.
(2) creating a private notification mechanism using the same components described above, whereby an authenticated user(A) can send a private message on a private channel to authenticated user(B) only.
The result should be: Auth user(A) can trigger event to notify the receiver user(B) and that user(B) should know that user(A) sent it.
The event triggering, broadcasting and listening mechanism should be under laravel's "Echo" rules. The reception of the message should be achieved only through:
Echo.listen(channel). No direct listening on the websocket.
I have prepared a form in my "/about" page, to be used as a starting point / test demo for when the task is finished. It would be posted to "SocketController" => class: notify, where depending on whether it's public or private, the appropriate events would be triggered.
* The project's root folder is zipped along with an export of the "mysql" database.
For size-limitation reasons, I removed the "vendor" and the "node_modules" folders, so please run "composer install" (or whatever necessary) to recover the required components.
* The listener script is in "resources/views/components/layout.blade.php"
* The event file is in "app/Events/NewNotification.php"
* The socket.io script is in "public/js/socket-server.js"
* The controller is "app/Http/Controllers/SocketController.php"
* The temporary route used to manually trigger the public notification is:
route::get('/test', function () {
event(new NewNotification('all', 'Manual test from route.'));
return 'Event broadcasted successfully!';
});
Thanks
I have a laravel 11 website, to which I want to add real time notifications capability using socket.io + echo + redis. I already created the basic structure for a public channel notification and managed to get the notifications pushed to the browser (as seen through the console > network > ws > messages). However, the front-end script in the blade view (echo listener) fails to detect the incoming notification despite being visible by the browser. Somehow the message format sent by socket.io server doesn't seem to match that expected by laravel's echo listener.
Here are the 2 things I need done:
(1) tweaking the current setup to enable the front-end DOM detect the incoming public message along with its payload and act on it by setting <div id="notify"> innerHtml = message.
The result should be: Auth user(A) can trigger event to notify all auth users, who will not only get the notification but also see who sent it.
(2) creating a private notification mechanism using the same components described above, whereby an authenticated user(A) can send a private message on a private channel to authenticated user(B) only.
The result should be: Auth user(A) can trigger event to notify the receiver user(B) and that user(B) should know that user(A) sent it.
The event triggering, broadcasting and listening mechanism should be under laravel's "Echo" rules. The reception of the message should be achieved only through:
Echo.listen(channel). No direct listening on the websocket.
I have prepared a form in my "/about" page, to be used as a starting point / test demo for when the task is finished. It would be posted to "SocketController" => class: notify, where depending on whether it's public or private, the appropriate events would be triggered.
* The project's root folder is zipped along with an export of the "mysql" database.
For size-limitation reasons, I removed the "vendor" and the "node_modules" folders, so please run "composer install" (or whatever necessary) to recover the required components.
* The listener script is in "resources/views/components/layout.blade.php"
* The event file is in "app/Events/NewNotification.php"
* The socket.io script is in "public/js/socket-server.js"
* The controller is "app/Http/Controllers/SocketController.php"
* The temporary route used to manually trigger the public notification is:
route::get('/test', function () {
event(new NewNotification('all', 'Manual test from route.'));
return 'Event broadcasted successfully!';
});
Thanks