如何使用Laravel和Pusher通道创建Web通知

来自菜鸟教程
跳转至:导航、​搜索

许多网络应用程序都包含一个应用内通知系统,当有人执行与您或您的帐户相关的操作时,该系统会立即通知您。 在 Facebook 上,当有人喜欢您的状态或有人对您的个人资料发表评论时,您会收到通知。 本教程将指导您通过使用 LaravelPusher 创建基于 Web 的通知系统来复制此功能。

先决条件

要学习本教程,您需要在机器上安装 PHP 和 Laravel,以及 Pusher 帐户。

我们将要建造的

在本教程之后,我们将演示如何使用 Laravel 和 Pusher 让小型 Web 应用程序显示通知。 这类似于 Facebook 等网站显示通知的方式。 这是我们将要构建的内容的预览:

设置您的 Pusher 应用程序

创建一个 Pusher 帐户,如果您还没有,然后设置您的应用程序,如下面的屏幕截图所示。

设置你的 Laravel 应用程序

通过在终端中运行以下命令来创建一个新的 Laravel 应用程序:

laravel new laravel-web-notifications

之后,使用 Composer 安装 Pusher PHP SDK。 运行以下命令:

composer require pusher/pusher-php-server

Composer 完成后,下一步是配置 Laravel 以使用 Pusher 作为其广播驱动程序。 为此,请打开 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

重要提示:如果您使用 EUAP 集群,请确保更新 config/broadcasting.php 配置中的选项数组,因为 Laravel 默认使用美国服务器. 您可以使用 Pusher PHP 库支持的所有选项。

打开 config/app.php 并取消注释 App\Providers\BroadcastServiceProvider::class

创建我们的 Laravel 和 Pusher 应用程序

现在配置步骤已经完成,是时候创建应用程序了。 首先创建一个 Event 类,它将从我们的 Laravel 应用程序广播到 Pusher。 可以从应用程序中的任何位置触发事件。

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 应该使用配置文件中设置的任何驱动程序来广播此事件。

还有一个构造函数,它接受两个参数,用户名和动词。 这些变量被分配给以相同方式命名的类属性。 将属性的可见性设置为 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 可以完成的许多事情的一个小例子。 此示例是您可以使用 Pusher 构建的众多可能工具之一。

该代码可在 GitHub 上获得。