( 20万通知/日 まで 無料プランで使用することができます )
https://pusher.com/channels/pricing
composer require pusher/pusher-php-server
pusher_notification.html
<!DOCTYPE html>
<head>
<title>Pusher Test</title>
<script src="https://js.pusher.com/4.3/pusher.min.js"></script>
<script>
// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;
var pusher = new Pusher('XXXXXXXXXXXXXXXXXX', { // pusher から 配布された id をここに記述します。
cluster: 'ap3',
forceTLS: true
});
var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
alert(JSON.stringify(data));
});
</script>
</head>
<body>
<h1>Pusher Test</h1>
<p>
Try publishing an event to channel <code>my-channel</code>
with event name <code>my-event</code>.
</p>
</body>
pusher.php
<?php
require __DIR__ . '/vendor/autoload.php';
$options = array(
'cluster' => 'ap3',
'useTLS' => true,
);
$pusher = new Pusher\Pusher(
'AAAAA',
'BBBBB',
'CCCCC',
$options
);
$dt = new DateTime();
$data['message'] = 'hello world' . $dt->format('Y-m-d H:i:s');
$pusher->trigger('my-channel', 'my-event', $data);
これだけでOKです。
これで、ブラウザで pusher_notification.html を 開いた状態で pusher.php を更新するだけで、通知が表示されます。
(例では alert で表示しているので この部分を new Notification() に変更するだけでOKです。 )