alfred-nutile-inc/notifications

v0.1.0 2020-07-23 15:07 UTC

README

视频 在这里

安装

Composer

composer require alfred-nutile-inc/notifications:dev-master

添加提供者

AlfredNutileInc\Notifications\NotificationsServiceProvider::class,

发布迁移

php artisan vendor:publish --provider="AlfredNutileInc\Notifications\NotificationsServiceProvider" --tag='migrations'

发布资源

php artisan vendor:publish --provider="AlfredNutileInc\Notifications\NotificationsServiceProvider" --tag='public'

然后按需使用,并参见视频

<?php namespace Foo

use AlfredNutileInc\CoreApp\Notifications\NotificationFacade as Notify;

Notify::setRead(-1)->getAll();
Notify::setRead(0)->setLimit(20)->setFromId('mock-project-1')->to('mock-user-1');

您还可以将路由文件包含到您的路由文件中,以便对系统进行API访问

测试文件展示了一些示例用法

/tests/CoreApp/Tests/NotificationTest.php /tests/CoreApp/Tests/NotificationListenerTest.php

使用 NotificationHelper 发送通知

在这个示例中,一个 "Tactic" 向自身发送通知,以便稍后在 "Tactic" 的 "活动" 页面上显示。

->setRecipients 可以多次调用,使用不同的发送类型,因此您可以一次性将通知发送到多个不同的模型。

$helper->setFrom(Tactic::class, $tactic->id)
      ->setRecipients(Tactic::class, [$tactic->id])
      ->setMessage($this->faker->paragraph(3))
      ->setCategoryByName('test_tactic_notification', 'Tactic Notification')
      ->sendNotifications();

集成到 Angular 中

基本 blade 文件

<?php
use AlfredNutileInc\CoreApp\Notifications\NotificationFacade as Notify;

/**
 * @Middleware("auth")
 */
class AngularController extends BaseController {


    /**
     * @Get("approve", as="approve.dash")
     */
	public function index()
	{
        $chat_on = getenv('CHAT_ON');

        $message = Notify::setRead(0)->setLimit(10)->getAll();
        JavaScript::put(
            [
                'pusher_public_key' => getenv('PUSHER_PUBLIC'),
                'sauce_key' => getenv('SAUCE_TOKEN'),
                'sauce_user' => getenv('SAUCE_USER'),
                'token' => csrf_token(),
                'profile' => User::profile(),
                'environment' => getenv('APP_ENV'),
                'messages'   => $message
            ]
        );
		return View::make('layouts/main', compact('chat_on'));
	}

}

我还有一个主要的 Angular 配置文件,它设置了这些常量

#config.js
    function constants() {
        return {
            'pusher_public_key': window.pusher_public_key,
            'sauce_key': window.sauce_key,
            'sauce_user': window.sauce_user,
            'profile': window.profile,
            'js_root': '/assets/js/',
            'debug': window.debug,
            'messages': window.messages
        };
    }

如果您想将公共通知 JavaScript 添加到 Angular 区域,并将 JS 文件包含到您的应用中,请添加以下内容。

然后更新您的导航,以便人们可以访问主 UI 和下拉菜单

#Main ui nav

~~~
<li ui-sref-active="active">
  <a ui-sref="notifications.messages"><i class="fa fa-envelope-o"></i> <span class="nav-label">Notifications</span></a>
</li>
~~~
And load it in the main angular controller so on page load we listen for pusher notifications

~~~
#controller.js
    /**
     * @NOTE Noty is better than toaster for this one thing
     */
    function MainCtrl($window, PusherService, Noty, ProjectsService, localStorageService, ENV) {

        var vm = this;
        vm.localStorageService = localStorageService;
        vm.Noty = Noty;
        vm.ENV = ENV;
        vm.messages = [];
        vm.PusherService = PusherService;
        vm.ProjectsService = ProjectsService;
        vm.loadProjects = loadProjects;
        vm.setOriginalMessages = setOriginalMessages;
        vm.maintenanceNotification = maintenanceNotification;
        vm.noticeMessage = noticeMessage;
        vm.ringBell = ringBell;

        vm.profile = {};
        vm.projects = [];
        vm.activate = activate;
        vm.activate();

        ///////

        activate();

        function activate() {
            vm.profile = $window.profile;
            vm.PusherService.setPusher('maintenance', 'behat', vm.maintenanceNotification);
            vm.loadProjects();
            if(vm.localStorageService.isSupported) {
                console.log('supported');
                console.log(vm.localStorageService.keys());
            }
            vm.setOriginalMessages();
            vm.PusherService.setPusher('notifications', ENV.profile.id, vm.noticeMessage);
        }

        function setOriginalMessages()
        {
            angular.forEach(vm.ENV.messages, function(v,i){
                vm.messages.push( { "id": v.id, "message": v.notification_message.message } );
            });
        }

        function noticeMessage(data)
        {

            if(!angular.isUndefined(data))
            {
                vm.messages.push(data[0]);
                vm.toaster.pop("info", "Message", data[0].message, 5000, 'trustedHtml');
                vm.ringBell();
                $rootScope.$apply();
            }
        }

        function ringBell()
        {
            var audio = $('#notificationAudio');
            if (audio.length == 0) {
                $('<audio id="notificationAudio"><source src="/js/lib/notifications/notify.mp3" type="audio/mpeg"></audio>').appendTo('body');
                audio = $('#notificationAudio');
            }
            audio[0].play();
        }

        function loadProjects()
        {
            if(vm.projects.length < 1)
            {
                vm.ProjectsService.index().then(function(results) {
                    vm.projects = results.data;
                });
            }
        }

        function maintenanceNotification(data)
        {
            if(!angular.isUndefined(data))
            {
                vm.Noty(data, "information", true, false, false);
            }
        }

    }


    /**
     *
     * Pass all functions into module
     */
    angular
        .module('app')
        .controller('MainCtrl ', MainCtrl);


~~