Laravelおよびプッシャーチャネルを使用してWeb通知を作成する方法
多くのWebアプリケーションには、誰かがあなたまたはあなたのアカウントに関連するアクションを実行したときに即座に通知するアプリ内通知システムが含まれています。 Facebookでは、誰かがあなたのステータスを高く評価したとき、または誰かがあなたのプロフィールにコメントしたときに通知されます。 このチュートリアルでは、LaravelとPusherを使用してWebベースの通知システムを作成することにより、この機能を複製する方法について説明します。
前提条件
このチュートリアルに従うには、PHPとLaravelがPusherアカウントとともにマシンにインストールされている必要があります。
私たちが構築するもの
このチュートリアルの後、LaravelとPusherを使用して小さなWebアプリケーションに通知を表示させる方法を示します。 これは、FacebookなどのWebサイトが通知を表示する方法と似ています。 これが私たちが構築するもののプレビューです：
プッシャーアプリケーションのセットアップ
プッシャーアカウントをまだ作成していない場合は作成し、下のスクリーンショットに示すようにアプリケーションをセットアップします。
Laravelアプリケーションのセットアップ
ターミナルで以下のコマンドを実行して、新しいLaravelアプリケーションを作成します。
laravel new laravel-web-notifications
その後、Composerを使用してPusherPHPSDKをインストールします。 次のコマンドを実行します。
composer require pusher/pusher-php-server
Composerが終了したら、次のステップは、ブロードキャストドライバーとしてPusherを使用するようにLaravelを構成することです。 これを行うには、Laravelインストールのルートディレクトリにある.envファイルを開きます。 以下の構成と一致するように値を更新します。
PUSHER_APP_ID=322700
BROADCAST_DRIVER=pusher
// Get the credentials from your pusher dashboard
PUSHER_APP_ID=XXXXX
PUSHER_APP_KEY=XXXXXXX
PUSHER_APP_SECRET=XXXXXXX
重要な注意：EUまたはAPクラスターを使用している場合、LaravelはデフォルトでUSサーバーを使用するため、config/broadcasting.php構成のオプション配列を更新してください。 。 プッシャーPHPライブラリがサポートするすべてのオプションを使用できます。
config/app.phpを開き、App\Providers\BroadcastServiceProvider::classのコメントを解除します。
LaravelとPusherアプリケーションの作成
構成手順が完了したので、次はアプリケーションを作成します。 まず、LaravelアプリケーションからPusherにブロードキャストするEventクラスを作成します。 イベントは、アプリケーションのどこからでも発生させることができます。
php artisan make:event StatusLiked
これにより、app/Eventsディレクトリに新しいStatusLikedクラスが作成されます。 ファイルの内容を開き、以下に更新します。
<?php
namespace App\Events;
use Illuminate\Queue\SerializesModels;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class StatusLiked implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $username;
public $message;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct($username)
{
$this->username = $username;
$this->message = "{$username} liked your status";
}
/**
* Get the channels the event should broadcast on.
*
* @return Channel|array
*/
public function broadcastOn()
{
return ['status-liked'];
}
}
ShouldBroadcastインターフェースは、構成ファイルに設定されているドライバーを使用してこのイベントをブロードキャストする必要があることをLaravelに通知します。
ユーザー名と動詞の2つのパラメーターを受け入れるコンストラクターもあります。 これらの変数は、同じ名前のクラスプロパティに割り当てられます。 プロパティの可視性をpublicに設定することが重要です。 そうしないと、プロパティは無視されます。
最後に、ブロードキャストするチャネル名を設定します。
アプリケーションビューの作成
このチュートリアルでは、ナビゲーションバーと通知アイコンを備えた単一のビューを使用します。 ページを更新しなくても、新しい通知が利用可能になると、アイコンが更新されます。 このチュートリアルでは、通知は設計上一時的なものです。 必要に応じて、機能を拡張し、ページをリロードした後も長持ちさせることができます。
welcome.blade.phpファイルを開き、以下のHTMLに置き換えます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Application</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/bootstrap-notifications.min.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Demo App</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-notifications">
<a href="#notifications-panel" class="dropdown-toggle" data-toggle="dropdown">
<i data-count="0" class="glyphicon glyphicon-bell notification-icon"></i>
</a>
<div class="dropdown-container">
<div class="dropdown-toolbar">
<div class="dropdown-toolbar-actions">
<a href="#">Mark all as read</a>
</div>
<h3 class="dropdown-toolbar-title">Notifications (<span class="notif-count">0</span>)</h3>
</div>
<ul class="dropdown-menu">
</ul>
<div class="dropdown-footer text-center">
<a href="#">View All</a>
</div>
</div>
</li>
<li><a href="#">Timeline</a></li>
<li><a href="#">Friends</a></li>
</ul>
</div>
</div>
</nav>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//js.pusher.com/3.1/pusher.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
var notificationsWrapper = $('.dropdown-notifications');
var notificationsToggle = notificationsWrapper.find('a[data-toggle]');
var notificationsCountElem = notificationsToggle.find('i[data-count]');
var notificationsCount = parseInt(notificationsCountElem.data('count'));
var notifications = notificationsWrapper.find('ul.dropdown-menu');
if (notificationsCount <= 0) {
notificationsWrapper.hide();
}
// Enable pusher logging - don't include this in production
// Pusher.logToConsole = true;
var pusher = new Pusher('API_KEY_HERE', {
encrypted: true
});
// Subscribe to the channel we specified in our Laravel Event
var channel = pusher.subscribe('status-liked');
// Bind a function to a Event (the full Laravel class)
channel.bind('App\\Events\\StatusLiked', function(data) {
var existingNotifications = notifications.html();
var avatar = Math.floor(Math.random() * (71 - 20 + 1)) + 20;
var newNotificationHtml = `
<li class="notification active">
<div class="media">
<div class="media-left">
<div class="media-object">
<img src="https://api.adorable.io/avatars/71/`+avatar+`.png" class="img-circle" alt="50x50" style="width: 50px; height: 50px;">
</div>
</div>
<div class="media-body">
<strong class="notification-title">`+data.message+`</strong>
<!--p class="notification-desc">Extra description can go here</p-->
<div class="notification-meta">
<small class="timestamp">about a minute ago</small>
</div>
</div>
</div>
</li>
`;
notifications.html(newNotificationHtml + existingNotifications);
notificationsCount += 1;
notificationsCountElem.attr('data-count', notificationsCount);
notificationsWrapper.find('.notif-count').text(notificationsCount);
notificationsWrapper.show();
});
</script>
</body>
</html>
これは多くのコードを調べる必要がありますが、重要な部分はJavascriptの部分です。 Pusher javascriptライブラリが含まれており、通知をプッシュするjavascriptブロックが含まれています。 これらは、javascriptブロックの重要なスニペットです。
// Enable pusher logging - don't include this in production
// Pusher.logToConsole = true;
// Initiate the Pusher JS library
var pusher = new Pusher('API_KEY_HERE', {
encrypted: true
});
// Subscribe to the channel we specified in our Laravel Event
var channel = pusher.subscribe('status-liked');
// Bind a function to a Event (the full Laravel class)
channel.bind('App\\Events\\StatusLiked', function(data) {
// this is called when the event notification is received...
});
注：：デフォルトでは、Laravelはイベントのクラス名を使用してイベントをブロードキャストします。 ただし、イベントのメソッドとしてブロードキャストを定義することにより、ブロードキャスト名をカスタマイズできます。
public function broadcastAs() {
return 'event-name';
}
上記のコードは、Pusher JSライブラリを初期化し、チャネルにサブスクライブします。 次に、ブロードキャストされたイベントがそのチャネルで受信されたときに呼び出すコールバックを設定します。
セットアップのテスト
最後に、この設定をテストするには、イベントを手動で呼び出すルートを作成します。 すべてが期待どおりに機能する場合、ルートに到達するたびに新しい通知が表示されます。 新しいルートを追加しましょう：
Route::get('test', function () {
event(new App\Events\StatusLiked('Someone'));
return "Event has been sent!";
});
次に、Laravelを使用してPHPサーバーを起動し、コードが機能することをテストします。
$ php artisan serve
結論
このチュートリアルでは、Pusherの機能を活用して、比較的少ないコードで最新のWeb通知システムを作成しました。 この機能は、プッシャーを使用して実行できる多くのことの小さな例です。 この例は、Pusherを使用して構築できる多くの可能なツールの1つです。
コードはGitHubで入手できます。
