{"id":33906,"date":"2023-12-28T18:28:10","date_gmt":"2023-12-28T12:58:10","guid":{"rendered":"https:\/\/www.oneclickitsolution.com\/blog\/?p=33906"},"modified":"2024-12-19T17:57:17","modified_gmt":"2024-12-19T12:27:17","slug":"how-to-build-a-real-time-web-notification-in-laravel-using-pusher","status":"publish","type":"post","link":"https:\/\/www.oneclickitsolution.com\/blog\/how-to-build-a-real-time-web-notification-in-laravel-using-pusher","title":{"rendered":"How to Implement Laravel Notification with Pusher for Real-Time Web Updates"},"content":{"rendered":"\n

Real-time web notifications have become an essential part of modern web applications. Whether you’re a Laravel developer<\/a>, building a messaging system, alerting users about new content, or providing real-time updates, the ability to notify users instantly enhances user engagement and experience. In this guide, we\u2019ll walk you through the steps to build a real-time Laravel notification with Pusher, a popular service for handling real-time WebSocket connections.<\/p>\n\n\n\n

What is Pusher?<\/h3>\n\n\n\n

Pusher is a cloud-based service that enables real-time communication in your applications. It uses WebSockets to send messages to clients as soon as an event occurs on the server. Laravel makes it easy to integrate Pusher through its built-in notification system, allowing you to send notifications effortlessly.<\/p>\n\n\n\n

Why Use Laravel Notification with Pusher?<\/h3>\n\n\n\n

Laravel’s notification system simplifies sending notifications to users, whether through email, database, SMS, or even real-time web notifications using Pusher. The integration of notification Pusher Laravel<\/strong> allows you to push notifications to users instantly, providing a seamless experience. You can create a real-time notification Laravel Pusher<\/strong> system for your app without much hassle.<\/p>\n\n\n\n

\"Hire<\/a><\/figure>\n\n\n\n

Steps to Implement Real-Time Web Notifications in Laravel with Pusher<\/h3>\n\n\n\n

Step 1: Install and Set Up Laravel<\/h4>\n\n\n\n

Start by installing a fresh Laravel project if you haven\u2019t done so already:<\/p>\n\n\n\n

bash\n\ncomposer create-project --prefer-dist laravel\/laravel pusher-notifications<\/code><\/pre>\n\n\n\n
Navigate to your Laravel project directory:<\/p>\n\n\n\n
bash\n\ncd\u00a0pusher-notifications<\/code><\/pre>\n\n\n\n
Step 2: Install Pusher and Laravel Echo<\/h4>\n\n\n\n
Next, you need to install Pusher’s SDK and Laravel Echo. Laravel Echo is a JavaScript library that makes it easy to listen for events broadcast by your Laravel application.<\/p>\n\n\n\n
First, install the required packages:<\/p>\n\n\n\n
bash\n\ncomposer require pusher\/pusher-php-server npm install --save laravel-echo pusher-js<\/code><\/pre>\n\n\n\n
<\/div>\n\n
\n
 Read More:<\/span> Events and Listeners in Laravel<\/a><\/p>\n<\/div>\n\n
<\/div>\n\n\n\n
Step 3: Set Up Pusher<\/h4>\n\n\n\n
Go to Pusher<\/a> and create an account if you don\u2019t already have one. After logging in, create a new app and note down the credentials like App ID<\/strong>, Key<\/strong>, Secret<\/strong>, and Cluster<\/strong>.<\/p>\n\n\n\n
Once you have the credentials, add them to your .env<\/code> file:<\/p>\n\n\n\n
env\n\nBROADCAST_DRIVER=pusher PUSHER_APP_ID=your-app-id PUSHER_APP_KEY=your-app-key PUSHER_APP_SECRET=your-app-secret PUSHER_APP_CLUSTER=your-app-cluster<\/code><\/pre>\n\n\n\n
Step 4: Configure Laravel Broadcasting<\/h4>\n\n\n\n
Open config\/broadcasting.php<\/code> and set the default driver to Pusher:<\/p>\n\n\n\n
php\n\n'default'\u00a0=>\u00a0env('BROADCAST_DRIVER',\u00a0'pusher'),<\/code><\/pre>\n\n\n\n
In the same file, ensure the Pusher configuration is correct:<\/p>\n\n\n\n
php\n\n'pusher'\u00a0=> [\u00a0'driver'\u00a0=>\u00a0'pusher',\u00a0'key'\u00a0=>\u00a0env('PUSHER_APP_KEY'),\u00a0'secret'\u00a0=>\u00a0env('PUSHER_APP_SECRET'),\u00a0'app_id'\u00a0=>\u00a0env('PUSHER_APP_ID'),\u00a0'options'\u00a0=> [\u00a0'cluster'\u00a0=>\u00a0env('PUSHER_APP_CLUSTER'),\u00a0'encrypted'\u00a0=>\u00a0true, ], ],<\/code><\/pre>\n\n\n\n
Step 5: Create a Notification<\/h4>\n\n\n\n
Now, let’s create a notification that will be sent to the user. Use Laravel’s Artisan command to generate a notification class:<\/p>\n\n\n\n
php artisan make:notification RealTimeNotification<\/code><\/code><\/pre>\n\n\n\n
In the RealTimeNotification<\/code> class, modify the via<\/code> method to include broadcast<\/code>:<\/p>\n\n\n\n
php\n\npublic\u00a0function\u00a0via($notifiable)\u00a0{\u00a0return\u00a0['database',\u00a0'broadcast']; }<\/code><\/pre>\n\n\n\n
Then, in the toBroadcast<\/code> method, define the structure of the notification:<\/p>\n\n\n\n
php\n\npublic\u00a0function\u00a0toBroadcast($notifiable)\u00a0{\u00a0return\u00a0new\u00a0BroadcastMessage([\u00a0'message'\u00a0=>\u00a0$this->message, ]); }<\/code><\/pre>\n\n\n\n
Step 6: Broadcasting the Notification<\/h4>\n\n\n\n
Now, we need to fire the event that will send the notification. In your controller or wherever the action occurs, use the notify<\/code> method to trigger the notification:<\/p>\n\n\n\n
php\n\n$user->notify(new\u00a0RealTimeNotification(\"New message received!\"));<\/code><\/pre>\n\n\n\n
<\/div>\n\n
\n
 Read More:<\/span> How to Send Email Using Queue in Laravel?<\/a><\/p>\n<\/div>\n\n
<\/div>\n\n\n\n
Step 7: Listen for Notifications in JavaScript<\/h4>\n\n\n\n
On the client-side, we\u2019ll use Laravel Echo to listen for the notification. In your resources\/js\/bootstrap.js<\/code> file, set up the Echo listener:<\/p>\n\n\n\n
js\n\nimport\u00a0Echo\u00a0from\u00a0\"laravel-echo\";\u00a0import\u00a0Pusher\u00a0from\u00a0\"pusher-js\";\u00a0window.Pusher\u00a0=\u00a0Pusher;\u00a0window.Echo\u00a0=\u00a0new\u00a0Echo({\u00a0broadcaster:\u00a0\"pusher\",\u00a0key:\u00a0\"your-pusher-key\",\u00a0cluster:\u00a0\"your-pusher-cluster\",\u00a0forceTLS:\u00a0true\u00a0});\u00a0Echo.channel(\"user.\"\u00a0+ userId) .listen(\"RealTimeNotification\",\u00a0(event) =>\u00a0{\u00a0console.log(event);\u00a0alert(event.message); });<\/code><\/pre>\n\n\n\n
Now, whenever the notification is broadcasted, it will trigger an alert on the client side.<\/p>\n\n\n\n
Step 8: Testing the Notification<\/h4>\n\n\n\n
To test the real-time web notification, fire the notification event through a controller action, and you should see the alert on the frontend whenever the notification is broadcasted.<\/p>\n\n\n\n
\"Connect<\/a><\/figure>\n\n\n\n
Conclusion<\/h3>\n\n\n\n
Building real-time notifications in Laravel using Pusher is relatively simple with the help of Laravel’s built-in broadcasting functionality. By following these steps, you can implement a real-time notification system in your Laravel application to enhance user engagement and provide instant feedback.<\/p>\n\n\n\n
If you\u2019re looking to integrate\u00a0real-time notification Laravel Pusher<\/strong>\u00a0functionality into your application,\u00a0hiring Laravel developers<\/strong>\u00a0can help you streamline the process and ensure your app works smoothly. Whether you need custom\u00a0Laravel development services<\/a><\/strong>\u00a0or a dedicated team to manage your application\u2019s features, our expert developers at OneClick IT Consultancy can assist you in building top-notch, real-time solutions.<\/p>\n","protected":false},"excerpt":{"rendered":"
Real-time web notifications have become an essential part of modern web applications. Whether you’re a Laravel developer, building a messaging system, alerting users about new content, or providing real-time updates, the ability to notify users instantly enhances user engagement and experience. In this guide, we\u2019ll walk you through the steps to build a real-time Laravel …<\/p>\n","protected":false},"author":25,"featured_media":53597,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,784],"tags":[797,812],"class_list":["post-33906","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","category-web-application","tag-web-application-development-company","tag-website-development-solution-provider-company"],"yoast_head":"\nLaravel Notification with Pusher For Real-Time Web Notifications<\/title>\n<meta name=\"description\" content=\"Learn how to implement Laravel notifications with Pusher for real-time web updates. This blog covers integration, & notification setup.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.oneclickitsolution.com\/blog\/how-to-build-a-real-time-web-notification-in-laravel-using-pusher\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Laravel Notification with Pusher For Real-Time Web Notifications\" \/>\n<meta property=\"og:description\" content=\"Learn how to implement Laravel notifications with Pusher for real-time web updates. This blog covers integration, & notification setup.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.oneclickitsolution.com\/blog\/how-to-build-a-real-time-web-notification-in-laravel-using-pusher\" \/>\n<meta property=\"og:site_name\" content=\"OneClick IT Consultancy\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/oneclickconsultancy\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-28T12:58:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-19T12:27:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2019\/06\/How-to-Develop-Real-Time-Web-Notification-in-Laravel-using-Pusher.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Parth Khatri\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@OneclickIT\" \/>\n<meta name=\"twitter:site\" content=\"@OneclickIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Parth Khatri\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Laravel Notification with Pusher For Real-Time Web Notifications","description":"Learn how to implement Laravel notifications with Pusher for real-time web updates. This blog covers integration, & notification setup.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.oneclickitsolution.com\/blog\/how-to-build-a-real-time-web-notification-in-laravel-using-pusher","og_locale":"en_US","og_type":"article","og_title":"Laravel Notification with Pusher For Real-Time Web Notifications","og_description":"Learn how to implement Laravel notifications with Pusher for real-time web updates. This blog covers integration, & notification setup.","og_url":"https:\/\/www.oneclickitsolution.com\/blog\/how-to-build-a-real-time-web-notification-in-laravel-using-pusher","og_site_name":"OneClick IT Consultancy","article_publisher":"https:\/\/www.facebook.com\/oneclickconsultancy","article_published_time":"2023-12-28T12:58:10+00:00","article_modified_time":"2024-12-19T12:27:17+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2019\/06\/How-to-Develop-Real-Time-Web-Notification-in-Laravel-using-Pusher.png","type":"image\/png"}],"author":"Parth Khatri","twitter_card":"summary_large_image","twitter_creator":"@OneclickIT","twitter_site":"@OneclickIT","twitter_misc":{"Written by":"Parth Khatri","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.oneclickitsolution.com\/blog\/how-to-build-a-real-time-web-notification-in-laravel-using-pusher#article","isPartOf":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/how-to-build-a-real-time-web-notification-in-laravel-using-pusher"},"author":{"name":"Parth Khatri","@id":"https:\/\/www.oneclickitsolution.com\/blog\/#\/schema\/person\/56b9b0ee53f8010cd80089db55b0b5b9"},"headline":"How to Implement Laravel Notification with Pusher for Real-Time Web Updates","datePublished":"2023-12-28T12:58:10+00:00","dateModified":"2024-12-19T12:27:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/how-to-build-a-real-time-web-notification-in-laravel-using-pusher"},"wordCount":631,"publisher":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/how-to-build-a-real-time-web-notification-in-laravel-using-pusher#primaryimage"},"thumbnailUrl":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2019\/06\/How-to-Develop-Real-Time-Web-Notification-in-Laravel-using-Pusher.png","keywords":["Web Application Development Company","Website Development Solution"],"articleSection":["Technology","Web Application"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.oneclickitsolution.com\/blog\/how-to-build-a-real-time-web-notification-in-laravel-using-pusher","url":"https:\/\/www.oneclickitsolution.com\/blog\/how-to-build-a-real-time-web-notification-in-laravel-using-pusher","name":"Laravel Notification with Pusher For Real-Time Web Notifications","isPartOf":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/how-to-build-a-real-time-web-notification-in-laravel-using-pusher#primaryimage"},"image":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/how-to-build-a-real-time-web-notification-in-laravel-using-pusher#primaryimage"},"thumbnailUrl":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2019\/06\/How-to-Develop-Real-Time-Web-Notification-in-Laravel-using-Pusher.png","datePublished":"2023-12-28T12:58:10+00:00","dateModified":"2024-12-19T12:27:17+00:00","description":"Learn how to implement Laravel notifications with Pusher for real-time web updates. This blog covers integration, & notification setup.","breadcrumb":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/how-to-build-a-real-time-web-notification-in-laravel-using-pusher#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.oneclickitsolution.com\/blog\/how-to-build-a-real-time-web-notification-in-laravel-using-pusher"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.oneclickitsolution.com\/blog\/how-to-build-a-real-time-web-notification-in-laravel-using-pusher#primaryimage","url":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2019\/06\/How-to-Develop-Real-Time-Web-Notification-in-Laravel-using-Pusher.png","contentUrl":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2019\/06\/How-to-Develop-Real-Time-Web-Notification-in-Laravel-using-Pusher.png","width":1200,"height":628,"caption":"How to Develop Real Time Web Notification in Laravel using Pusher"},{"@type":"BreadcrumbList","@id":"https:\/\/www.oneclickitsolution.com\/blog\/how-to-build-a-real-time-web-notification-in-laravel-using-pusher#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.oneclickitsolution.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Implement Laravel Notification with Pusher for Real-Time Web Updates"}]},{"@type":"WebSite","@id":"https:\/\/www.oneclickitsolution.com\/blog\/#website","url":"https:\/\/www.oneclickitsolution.com\/blog\/","name":"OneClick IT Consultancy","description":"We Build Brands from Ideas","publisher":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/#organization"},"alternateName":"OneClick IT Solution","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.oneclickitsolution.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.oneclickitsolution.com\/blog\/#organization","name":"OneClick IT Consultancy","alternateName":"OneClick IT Solution","url":"https:\/\/www.oneclickitsolution.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.oneclickitsolution.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2022\/10\/oneclick-official-logo.png","contentUrl":"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2022\/10\/oneclick-official-logo.png","width":100,"height":100,"caption":"OneClick IT Consultancy"},"image":{"@id":"https:\/\/www.oneclickitsolution.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/oneclickconsultancy","https:\/\/x.com\/OneclickIT","https:\/\/www.instagram.com\/oneclick.it.consultancy\/","https:\/\/www.linkedin.com\/company\/one-click-it-consultancy\/","https:\/\/www.pinterest.com\/oneclickitconsultancy\/","https:\/\/www.youtube.com\/channel\/UCsEG6aiwOwvYrcZxMoP5xjg","https:\/\/oneclickit.tumblr.com\/","https:\/\/dribbble.com\/oneclickitconsultancy"]},{"@type":"Person","@id":"https:\/\/www.oneclickitsolution.com\/blog\/#\/schema\/person\/56b9b0ee53f8010cd80089db55b0b5b9","name":"Parth Khatri","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.oneclickitsolution.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0a16448aafc09980d2856dd39ed36ff0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0a16448aafc09980d2856dd39ed36ff0?s=96&d=mm&r=g","caption":"Parth Khatri"},"url":"https:\/\/www.oneclickitsolution.com\/blog\/author\/parthkhatri"}]}},"_links":{"self":[{"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/posts\/33906"}],"collection":[{"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/comments?post=33906"}],"version-history":[{"count":2,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/posts\/33906\/revisions"}],"predecessor-version":[{"id":62158,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/posts\/33906\/revisions\/62158"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/media\/53597"}],"wp:attachment":[{"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/media?parent=33906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/categories?post=33906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.oneclickitsolution.com\/blog\/wp-json\/wp\/v2\/tags?post=33906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}