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

ios pusher使用

Many web applications include an in-app notification system that will notify you instantly when someone carries out an action related to you or your account. On Facebook, you will be notified when someone likes your status, or when someone comments on your profile. This tutorial will guide you through replicating this functionality by creating a web-based notification system using Laravel and Pusher.

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

先决条件 (Prerequisites)

To follow this tutorial you need to have PHP and Laravel installed on your machine, along with a Pusher account.

要遵循本教程，您需要在计算机上安装PHP和Laravel以及Pusher帐户。

我们将要建立的 (What we would be building)

After this tutorial we would demonstrate how we can have a small web application show notifications using Laravel and Pusher. It would be similar to how websites like Facebook show notifications. Here is a preview of what we would be building:

在学习完本教程之后，我们将演示如何使用Laravel和Pusher使小型Web应用程序显示通知。 这类似于Facebook之类的网站如何显示通知。 这是我们将要构建的预览：

设置您的Pusher应用程序 (Setting up your Pusher application)

Create a Pusher account, if you have not already, and then set up your application as seen in the screenshot below.

创建一个Pusher帐户 (如果尚未创建)，然后按照下面的屏幕快照所示设置您的应用程序。

设置您的Laravel应用程序 (Setting up your Laravel application)

Create a new Laravel application by running the command below in your terminal:

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

• laravel new laravel-web-notifications
  laravel新的laravel-web-notifications

After that, install the Pusher PHP SDK using Composer. Run the following command:

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

• composer require pusher/pusher-php-server
  作曲家需要pusher / pusher-php-server

When Composer is finished, the next step is to configure Laravel to use Pusher as its broadcast driver. To do this, open the .env file that is in the root directory of your Laravel installation. Update the values to match with the configuration below:

完成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

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.

重要说明：如果您使用的是EU或AP群集，请确保更新config/broadcasting.php配置中的options数组，因为Laravel默认使用US Server。 您可以使用Pusher PHP库支持的所有选项。

Open config/app.php and uncomment the App\Providers\BroadcastServiceProvider::class.

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

创建我们的Laravel和Pusher应用程序 (Creating our Laravel and Pusher application)

Now that the configuration steps are complete it is time to create the application. First create an Event class that will broadcast to Pusher from our Laravel application. Events can be fired from anywhere in the application.

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

• php artisan make:event StatusLiked
  php artisan make：event StatusLiked

This will create a new StatusLiked class in the app/Events directory. Open the contents of the file and update to the following below:

这将在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'];
    }
}

The ShouldBroadcast interface tells Laravel that this event should be broadcast using whatever driver is set in the configuration file.

ShouldBroadcast接口应告诉Laravel，应使用配置文件中设置的任何驱动程序广播此事件。

There is also a constructor that accepts two parameters, username and verb. These variables are assigned to class properties named the same way. It is important to set the visibility of the properties to public; if you don’t, the property will be ignored.

还有一个接受两个参数的构造函数，用户名和动词。 这些变量以相同的方式分配给类属性。 重要的是将属性的可见性公开 。 如果不这样做，该属性将被忽略。

Lastly, the channel name to broadcast on is set.

最后，设置要广播的频道名称。

创建应用程序视图 (Creating the application views)

This tutorial will use a single view with a navigation bar and a notification icon. The icon will be updated when new notifications are available without the need to refresh the page. The notifications are ephemeral in this tutorial by design; you can extend the functionality and make it last longer after the page reloads if you like.

本教程将使用带有导航栏和通知图标的单个视图。 当有新的通知可用而无需刷新页面时，图标将更新。 在本教程中，通知是短暂的，是设计使然的； 您可以根据需要扩展功能并使其在页面重新加载后持续更长的时间。

Open the welcome.blade.php file and replace it with the HTML below.

打开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>

This a lot of code to go over, but the important parts are the Javascript portions. The Pusher javascript library is included, and then the javascript block that pushes notifications. These are the important snippets in the javascript block:

这要花很多代码，但是重要的部分是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...
});

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

注意：默认情况下，Laravel将使用事件的类名广播事件。 但是，您可以通过将广播定义为事件的方法来自定义广播名称：

public function broadcastAs() {
  return 'event-name';
}

The code above initializes the Pusher JS library and subscribes to a channel. It then sets a callback to call when the event broadcasted is received on that channel.

上面的代码初始化Pusher JS库并订阅频道。 然后，当在该频道上接收到广播的事件时，它将设置一个回调以进行调用。

测试设置 (Testing the set up)

Finally to test this set up, create a route that manually calls the event. If everything works as expected, a new notification will appear anytime the route is reached. Let’s add the new route:

最后，要测试此设置，请创建一条手动调用该事件的路由。 如果一切正常，到达路线的任何时间都会出现新的通知。 让我们添加新路线：

Route::get('test', function () {
    event(new App\Events\StatusLiked('Someone'));
    return "Event has been sent!";
});

Now start a PHP server using Laravel to test that the code works:

现在，使用Laravel启动PHP服务器以测试代码是否有效：

• $ php artisan serve
  $ php工匠服务

结论 (Conclusion)

In this tutorial you leveraged the power of Pusher to create a modern web notifications system with relatively little code. This functionality is a small example of the many things that can be done using Pusher. This example is one of many possible tools that you can build using Pusher.

在本教程中，您利用了Pusher的功能来创建具有相对较少代码的现代Web通知系统。 此功能只是使用Pusher可以完成的许多事情的一个小示例。 本示例是可以使用Pusher构建的许多可能工具之一。

The code is available on GitHub.

该代码可在GitHub上获得 。

翻译自: https://www.digitalocean.com/community/tutorials/create-web-notifications-using-laravel-and-pusher-channels

ios pusher使用