Realtime Notification Module With Laravel & Pusher

About Noftiy Module

This module to organize the notification process in real time without need to reload page, using PHP language with Laravel framework and Pusher. The UI is designed simple and easy to use because the main purpose of the module is to learn sending notifications using Laravel Events and Laravel Broadcast that support Pusher ( built-in )

Tools used in Ui

• Bootstrap.
• Jquery.
• Font Awesome.
• PNotify.

Backend Language

• PHP.

Framework used

• Laravel 8.

Third party

• Pusher.

Demo

Features

• 🕒 Realtime

• 🌟 Simple Ui

• 🖥️ Desktop Notification

• 🧬 Easy to integrate with any application

Installation

1. Create Account On Pusher

2. Create New Channel with any name , ex: realNotify

3. Clone repository on your localhost

4. Copy .env.example then rename it to .env

   • Set BROADCAST_DRIVER in .env file ' = pusher '

    BROADCAST_DRIVER=pusher
    

   • Add your pusher licences

    PUSHER_APP_ID=
    PUSHER_APP_KEY=
    PUSHER_APP_SECRET=
    

5. Edit \Public\js\main.js

   • find var pusher = new Pusher('--app-key--' & add yours

6. run composer install

7. run npm install

8. run npm run dev

Installed Successfully ✅

Apply Desktop Notification

• Edit \Public\js\main.js

  • find new PNotify({ & enable desktop like this

    PNotify.desktop.permission();
    new PNotify({
    type: 'info',
    text: data.content,
    desktop: {desktop: true} 
    });
    

Code Summary

• \app\Http\Controllers\HomeController.php

    public function pushNotification(Request $request)
    {
    	$content = $request->notify_content;
    	if(!empty($content)) {
    		event(new NewNotification($content));
    	}
    }
    

• \app\Events\NewNotification.php

    public function __construct($content)
    {
        $this->content = $content;
    }
    public function broadcastOn()
    {
        return ['new-notification'];
    }
    

• \Public\js\main.js

    // Subscribe to the channel we specified in our Laravel Event
    var channel = pusher.subscribe('new-notification');
    // Bind a function to a Event (the full Laravel class)
    channel.bind('App\\Events\\NewNotification', function (data) {
       
    });