This tutorial I will share how to give realtime notification in your application by using php programming language, and surely we need a third party library, namely pusher. so just start our tutorial this time .
What Will I Learn?
- Use Pusher , Register and Setting .
- Use Pusher in Php to Handle Backend (Add Event and Channel) and Configuration settings.
- Use Pusher in Javascript to Handle Frontend (Use event and Connect to Channel).
Requirements
- Internet Connection
- Php >= 5.6
- Install Composer
- Install Pusher
- Localhost
Difficulty
- Intermediate
Use Pusher
Before we actually make our realtime application notification. you must have a pusher account first, so you can do some setting in it. After you login to pusher, you can choose "create my app".
You can named the project, here I give the name "notification" . And you can also select the cluster closest to your location . You can also choose what technology you will use in the frontend and backend, I use javascript in frontend, and php in the backend .
After you create new app. you will be instructed to install the composer and import the javascript pusher library .
We can open the command prompt and do the composer install on your project .
Composer install
composer require pusher/pusher-php-server
After the installl is complete then you will see the vendor folder and composer.json has been made.
Create Pusher Application on the Serverside
We will configure the server section, which will use the Php programming language .
I will create a new folder under the folder pusher, and that folder I will name the notification and in the folder I create a file with the name index.php. "Pusher ->notification->index.php"
index.php
<?php
require('../vendor/autoload.php'); // load all functions in vendor
//Define Key pusher
define('APP_KEY','87cca8e5e7ea3ac15812');
define('APP_SECRET','73c94da408ce6bcb8ad1');
define('APP_ID','486604');
//make object of pusher
$pusher = new Pusher(
APP_KEY,
APP_SECRET,
APP_ID,
[
'cluster' =>'ap1',
'encrypted' => true
]
);
$data['message'] = "Hello World , I'm Realtime Notification";
$pusher->trigger('my-channel','my-event',$data);
require('../vendor/autoload.php');
$pusher = new Pusher(
APP_KEY,
APP_SECRET,
APP_ID,
[
'cluster' =>'ap1',
'encrypted' => true
]
);
APP_KEYAPP_SECRETAPP_ID['cluster' =>'ap1', 'encrypted' => true]
define('APP_KEY','87cca8e5e7ea3ac15812');
define('APP_SECRET','73c94da408ce6bcb8ad1');
define('APP_ID','486604');
Where do we get the key? we can see it in our dashboar pusher, in tab "app keys" .
$data['message'] = "Hello World , I'm Realtime Notification";
$pusher->trigger('my-channel','my-event',$data);
in the trigger method , We pass three parameters,
1 .'my-channel' is thename of chanel.
2. 'my-event' is the name of event.
3. $data is the message we will show there is the client side.
Use Pusher in Clientside
in the client side we will create a simple html file with the name index.html under the folder pusher. pusher->index.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Pusher</title>
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
</head>
<body>
<script type="text/javascript">
Pusher.logToConsole = true;
var pusher = new Pusher('87cca8e5e7ea3ac15812',{
cluster :'ap1',
encrypted : true
});
var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data){
alert(data.message)
});
</script>
</body>
</html>
< script src="https://js.pusher.com/4.1/pusher.min.js" >< /script >
var pusher = new Pusher('87cca8e5e7ea3ac15812',{
cluster :'ap1',
encrypted : true
});
var channel = pusher.subscribe('my-channel'); : 'my-channel' is the name of the channel we define in the server side. So if we have some different applications during dy run this script, dy will automatically subscribe this channel.
channel.bind('my-event', function(data){} : We receive the callback in the data. and i will alert(data.message) to see what's inside the data .
To see the results I will run two browser tabs that one will run on the server and another to see the results of the notification . run the server on your localhost .
Browser Server
in the server browser we just do reload, make sure every time reload, index.php managed to send notif.
Browser Clientside
in the client, we can see the alert that we put on the client side, we can see it by opening our index.html file in the browser.
If we change again in chanel message section, then we will get new message. I change the key of $data['message']in the index.php section. $data['message'] = "I have been changed in the server side"; , the result will be like this.
Even i also get the same notif though i open a different browser as an example i will use two browser, chrome and mozilla.
Finally we have completed this tutorial, we have made realtime notification that we often see in social media, hopefully from this tutorial can give you idea or picture about realtime notification, enough of me thank you already follow this tutorial
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Hey @alfarisi94 I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit