どのようにRolavelとプッシャーを使用してWebベースの通知を作成する

12284 ワード
webnotifications pusher laravel テキストリンク
Webアプリケーションを構築するときは、誰かがあなたやあなたのアカウントに関連するアクションを実行するときに即座に通知するアプリケーション内の通知システムのいくつかの並べ替えを見つけることはまれではありません.Facebookでは、誰かがあなたのステータス、または誰かがあなたのプロフィールにコメントが好きなときに通知されます.我々は、Web通知システムを使用して作成することによって、この機能を複製しますLaravel and Pusher .

私たちは何を構築する


このチュートリアルの後、我々はどのように小さなWebアプリケーションを持つことができますララベルとプッシャーを使用して通知を表示する方法を示します.それはFacebookの通知のようなウェブサイトの通知方法に似ています.ここでは、我々が構築するもののプレビューです

プッシャーアプリケーションの設定


クリエイトアPusher account , あなたがすでに持っていないならば、下にスクリーンショットで見られるように、あなたのアプリケーションをセットアップしてください.

アプリケーションの設定


次のコマンドを端末で実行すると、新しいLaravelアプリケーションを作成できます.
laravel new laravel-web-notifications
その後、Pusher PHP SDKをインストールする必要があります.
composer require pusher/pusher-php-server
作曲家がされるとき、私たちは、これを行うために、Pursherを放送ドライバーとして使うためにlaravelを構成する必要があります.env LALAVELインストールのルートディレクトリにあるファイル.次の設定に対応する値を更新します.
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

Important Note: If you’re using the EU or AP Cluster, make sure to update the options array in your config/broadcasting.php config since Laravel defaults to using the US Server. You can use all the options the Pusher PHP Library supports.


オープンconfig/app.php とコメントApp\Providers\BroadcastServiceProvider::class .

LaravelとPusherアプリケーションの作成


設定が完了したら、アプリケーションを作成します.最初に我々はEvent ララベルアプリケーションからプッシャーにブロードキャストするクラス.イベントは、アプリケーションのどこからでも解雇することができます.
php artisan make:event StatusLiked
これは新しいStatusLiked クラスでapp/Events ディレクトリ.ファイルの内容を開き、次のように更新します.
<?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 インターフェイスとこれは、LaTeavelに、このイベントが設定ファイルに設定されているドライバを使用してブロードキャストされるように指示します.
また、ユーザー名と動詞の2つのパラメータを受け入れるコンストラクターがあります.我々は、後でこれに戻ります.これらの変数をクラスのプロパティに割り当てました.パブリックプロパティにプロパティの可視性を設定することが重要ですそうしないと、プロパティは無視されます.
最後に、チャンネル名をブロードキャストします.

アプリケーションビューの作成


我々はそれをシンプルにし、通知アイコンを使用してナビゲーションバーを見ることができる単一のビューを作成します.新しい通知がページを更新する必要なしに利用可能なときにアイコンが更新されます.通知はデザインによってこのチュートリアルでは一時的ですあなたが機能を拡張することができますし、それが最後に長く、ページを再読み込み後のように欲望.
開ける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 library , それから、我々は魔法をする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...
});

PROTIP: By default, Laravel will broadcast the event using the event’s class name. However, you may customize the broadcast name by defining a broadcastAs method on the event:

public function broadcastAs() {

return ‘event-name’;

}


上記のコードは、単にプッシャーJSライブラリを初期化し、チャネルを購読します.次に、そのチャネル上でイベントブロードキャストが受信されたときにコールバックを設定します.

セットアップのテスト


最後に設定をテストするには、手動でイベントを呼び出すルートを作成します.すべてが期待通りに動作する場合は、いつでも私たちはルートを打つ新しい通知を取得します.新しいルートを加えましょう:
Route::get('test', function () {
    event(new App\Events\StatusLiked('Someone'));
    return "Event has been sent!";
});
Laravelを使用してPHPサーバーを起動できます.
$ php artisan serve

結論


この記事では、我々は現代のWeb通知システムを作成するためにプッシャーの力を活用することができたし、それは非常に簡単だった.これは実際にプッシャーを使用して行うことができるものの表面を傷です.例は、あなたに可能性を示すだけでした.
このコードはGitHub , あなたがスター、フォーク、それを再生することができます.どのようにララベルとプッシャーを使用するつもりですか?任意の高度なユースケースを考えることはできますか?何ですか.コメントでお知らせください!
このブログ記事はプッシャーで最初に登場したBlog
7週目/Underbar
10月15日(金)モジュール(モジュール)