Pusherを使ってリアルタイム通知を行う

● Pusherを使ってリアルタイム通知を行う

● 1. PUSHER へユーザー登録する

（ 20万通知/日　まで無料プランで使用することができます）

● 2. composer から「pusher/pusher-php-server」パッケージをインストールする

composer require pusher/pusher-php-server

● 3. 通知を受ける画面を作成して表示する

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>

● 4. 通知を追加するphpを作成して表示する

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です。）

No.1418

01/16 14:41