.

Introduction:

We all familiar with Facebook Web Push Notification system. The system which Facebook follows needs permission from each visitor who visit's your web page. The notification that we are going to discuss through this article is entirely different from it. This system doesn't require any permission accept from the visitor side to view the notification.

A Brief Introduction to Pusher:

Pusher is a service like Fire-base which allows you to send Push Notification and do many other things that require building an App. From the name we can understand that, The main aim of this service is to serve Push Notification.

The pusher has both Premium and Free plan. You could select the Free Plan at first and you can upgrade to Premium Plan after you reach the limitation of the Free Plan.

How to Configure Real time Notification in Your Website:

It is very easy to integrate the Real-time Push Notification system in your site. All you want to do that the following steps that given below.
  • Go to Pusher.Com and create a free A/c.
  • Click on the "Create New App" Button and create a New App.
  • Once you complete creating App, Get the App Keys.
Pusher API Key
  • In-order to send real-time notification, You need the App Id, Key and Secret code.
  • Now copy and paste the below code to the web page that you need to show the Notification.
<script src="https://js.pusher.com/3.2/pusher.min.js"></script>
  <script>

    // Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var pusher = new Pusher('Your Key Shere', {
      encrypted: true
    });

    var channel = pusher.subscribe('test_channel');
    channel.bind('my_event', function(data) {
      var not = data.message;
      alert(data.message);

    });
  </script>
  • Place the code in between the <head> and </head> Tag.
  • Now you can test the code with the "Debug Console" Window of Pusher.
Pusher Debug Testing
  • First click on the "Debug Console" Tab and then change the message to what message you need to sent for testing then click on the "Send Event" Button.
  • Don't forget to open the page which you placed the JavaScript with any web browser to view the Live Notification.

Send Notification Automatically With PHP Script:

Pusher allow you to send notification using PHP and some other major Programming Language. The following code will will help you to send live notification.
<?php
  require('\lib\squeeks-Pusher-PHP\lib\Pusher.php');

  $options = array(
    'encrypted' => true
  );
  $pusher = new Pusher(
    'KEY',
    'SECRET',
    'YOUR APP ID',
    $options
  );

  $data['message'] = 'YOUR MESSAGE HERE';
  $pusher->trigger('test_channel', 'my_event', $data);
?>
The above PHP code will allow you to send Real Time Notification to the Web Pages that you placed the Java-script. In-order to run the PHP code, You need to import Pusher Library from Composer. Download the script from this article, It already contains the Composer and Pusher Library.

Suggested Articles for PHP Programmers:

I hope you well enjoyed this article. If you have any doubts or suggestions related to this article. Please let me know by using the comment box that given below. Thanks

5 comments:

  1. The server side don't send any push notification i have no idea why i followed all the steps, but still. any help please ?

    ReplyDelete
    Replies
    1. Please share the code with me. So, I can help you by using the code. It is very easy.

      Delete
    2. You have to download the script from this blog. You can see the download link on the top of this page. After downloading the script, Extract it to the server. Now open the index.html page in one tab of your browser and run the notify.php on the other tab. The notify.php page will send notification request and the index.html page will show it live. If this don't work for you. Please let me know. Remember the id is mine, you have to replace it with yours after it.

      Delete
    3. Same. Download the script and replace the key's with yours. It will works well. Thank you.

      Delete

Wapmaster or Webmaster can Comment Us with the following Comment Box . Don't add Links to your site for Spamming our Blog .. Once you add Comment with Link . It will be deleted immediatly by our Admins .

 
Top