![Screenshot_14.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520271722/lyeb1yjb56co5nvgzfi3.png)
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 <b>"create my app"</b>. 
You can named the project, here I give the name <b>"notification"</b> .  And you can also select the <b>cluster</b> 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 .


![Screenshot_6.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520261456/vgwrn3jtdbtrdieyrhsc.png)

After you create new app. you will be instructed to install the composer and import the javascript pusher library .

![Screenshot_7.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520261805/h4tr7evef3nfpqpb1gdd.png)

We can open the command prompt and do the composer install on your project .
Composer install

<code>composer require pusher/pusher-php-server</code>

![Screenshot_8.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520262061/dkf38qbnk5xe9ngwvbyy.png)

After the installl is complete then you will see the vendor folder and <b>composer.json</b> 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. <b>"Pusher ->notification->index.php"</b>

<b>index.php</b>
<pre>
<code>
<?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);
</code>
</pre>

<li><b>Import Vendor</b></li>
Because we are using third-party libraries, we have to import all function functions in the vendor folder with <b> autoload.php </b> <br>
<code>require('../vendor/autoload.php');</code>

<br>
<li><b>Initialization of the pusher object in a variable</b></li>
We will create a pusher object that we initialize in suati variable, create new object in pusher with <b>new pusher ()</b>. In that object we have some key which I will explain .
<pre>
<code>
$pusher = new Pusher(
	APP_KEY,
	APP_SECRET,
	APP_ID,
	[
		'cluster' 	=>'ap1',
		'encrypted'	=> true
	]
);
</code>
</pre>
<li><code>APP_KEY</code></li> : Contains the key of our application that we will use in the client as a link between the server and client<br>
<li><code>APP_SECRET</code></li> : APP_SECRET will only be used on the server side, not on the client side. <br>
<li><code>APP_ID</code></li> : This is the app_id we have on the pusher application we created earlier.<br>
<li><code>['cluster' 	=>'ap1', 'encrypted'	=> true]</code></li>: These are options. in the form of arrays. <b>'cluster'</b> and encrypted.

<br>
<li><b>Define Key</b></li>
<pre>
<code>
define('APP_KEY','87cca8e5e7ea3ac15812');
define('APP_SECRET','73c94da408ce6bcb8ad1');
define('APP_ID','486604');
</code>
</pre>
Where do we get the key? we can see it in our dashboar pusher, in tab <b>"app keys"</b> .

![Screenshot_9.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520265375/epzikethgb5ucnfrsso3.png)

<li><b>Add Channel</b></li>
I will create a notification function, I will run with the method of <b>$pusher->trigger()</b>.
<pre>
<code>
$data['message'] = "Hello World , I'm Realtime Notification";
$pusher->trigger('my-channel','my-event',$data);
</code>
</pre>
in the trigger method , We pass three parameters, 
1 .<b>'my-channel'</b>  is thename of chanel.
2. <b>'my-event'</b> is the name of event.
3. <b>$data</b> 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 <b>index.html</b> under the folder pusher. <b>pusher->index.html</b>

<b>index.html</b>
``` 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>
```
<br>

<li><b>Import Library Pusher</b></li>
We need to import the library pusher in the client.  We can see the import script in dashboard pusher section in <b>get started</b> tab .

![Screenshot_10.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520267612/c4iq82wwtfedfluiomrd.png)

<code>< script src="https://js.pusher.com/4.1/pusher.min.js" >< /script ></code>

<li><b>initialization of pusher in client</b></li>
Not just initialization on the server, We also need to initialize in the client, but the difference we just need it the <b>APP_KEY : 87cca8e5e7ea3ac15812</b>
<pre>
<code>
var pusher = new Pusher('87cca8e5e7ea3ac15812',{
			cluster 	:'ap1',
			encrypted	: true
		});
</code>
</pre>

<li><b>Subscribe Channel</b></li>
We will subscribe to the <b>subscribe()</b> method from pusher. and initialize in one variable <b>var channel</b>.
<br>
<code>var channel = pusher.subscribe('my-channel');</code> : <b>'my-channel'</b> 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.
<br>

<li><b>Binding Event</b></li>
Here we will user  <b>bind()</b> method from pusher to bind or we combine with the event we named in its serveside as <b>'my-event'</b>.
<code>channel.bind('my-event', function(data){}</code> : We receive the callback in the data. and i will <b>alert(data.message)</b> 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 .

<b>Browser Server</b>

![Screenshot_11.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520270863/ki8igab9ga4rgyg3mdhh.png)

in the server browser we just do reload, make sure every time reload, index.php managed to send notif.

<b>Browser Clientside</b>

in the client, we can see the alert that we put on the client side, we can see it by opening our <b>index.html</b> file in the browser.

![Screenshot_12.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520271121/x1bekypw0giv2gxvvnbo.png)


If we change again in chanel message section, then we will get new message. I change the key of <b>$data['message']</b>in the index.php section. <code>$data['message'] = "I have been changed in the server side";</code> , the result will be like this.

![Screenshot_13.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520271387/ptcolmzgepl1rs89pv2d.png)


Even i also get the same notif though i open a different browser as an example i will use two browser, chrome and mozilla.

![Screenshot_14.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520271838/of4wqbbgtgczffbmmbzs.png)

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

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@alfarisi94/how-to-create-realtime-notifications-using-pusher-in-php">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>