2017-08-13 150 views
1

我试图实现使用的想法从这个站点的用户消息的方法:Laravel Echo实时收不到推送器通知 - 想法?

https://www.sitepoint.com/add-real-time-notifications-laravel-pusher/

使用laravel通知功能更新通知表(用于标记关闭的消息为已读的目的)的核心思想并在同一时间推广作为私人频道,并通过Laravel Echo在客户端收听。

我希望当我添加一个新的练习来发送通知,所以我用EventServiceProvider听一个数据库中创建事件,这正是我触发通知:

Exercise::created(function ($exercise) { 
     foreach ($users as $user) { 
      $user->notify(new NewExercisePosted($user, $exercise)); 
     } 

通知:

class NewExercisePosted extends Notification implements ShouldBroadcast 
{ 
    //use Queueable; 

    protected $exercise; 
    protected $user; 

    public function __construct(User $user, Exercise $exercise) 
    { 
     $this->user = $user; 
     $this->exercise = $exercise; 
    } 

    public function via($notifiable) 
    { 
     return ['database', 'broadcast']; 
    } 

    public function toArray($notifiable) 
    { 
     return [ 
      'id' => $this->id, 
      'read_at' => null, 
      'data' => [ 
       'user_id' => $this->user->id, 
       'ex_id' => $this->exercise->id, 
      ], 
     ]; 
    } 
} 

这只是填充通知表和广播推送。

这里是我的母版视图文件:

<!DOCTYPE html> 
<html> 
    <head> 


     <meta name="csrf-token" content="{{ csrf_token() }}"> 
     <link rel="stylesheet" href="/css/app.css")/> 

     <script src='https://www.google.com/recaptcha/api.js'></script> 

     <script> 
      window.Laravel = <?php echo json_encode([ 
        'csrfToken' => csrf_token(), 
      ]); ?> 
     </script> 

     <!-- This makes the current user's id available in javascript --> 
     @if(!auth()->guest()) 
      <script> 
       window.Laravel.userId = <?php echo auth()->user()->id; ?> 
      </script> 
     @endif 

    </head> 
    <body> 

     @include('partials/header') 

     @if(Session::has('message')) 
      <div class="alert alert-info"> 
       {{Session::get('message')}} 
      </div> 
     @endif 

     @yield('content') 

     @include('partials/footer') 

     @include('partials/analytics') 


     <script src="/js/app.js"></script> 

    </body> 
</html> 

这里是标题视图的相关部分,我有消息显示:

<li class="dropdown"> 
         <a class="dropdown-toggle" id="notifications" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
          <span class="glyphicon glyphicon-user"></span> 
         </a> 
         <ul class="dropdown-menu" aria-labelledby="notificationsMenu" id="notificationsMenu"> 
          <li class="dropdown-header">No notifications</li> 
         </ul> 
        </li> 

这里是我的app.js:

require('./bootstrap'); 

var app = 0; 

window._ = require('lodash'); 
window.$ = window.jQuery = require('jquery'); 
require('bootstrap-sass'); 

$(document).ready(function() { 
    $(function() { 
     $('[data-toggle="tooltip"]').tooltip() 
    }) 
}); 


window.Pusher = require('pusher-js'); 
import Echo from "laravel-echo"; 

const PUSHER_KEY = 'blah'; 

const NOTIFICATION_TYPES = { 
    follow: 'App\\Notifications\\UserFollowed', 
    newEx: 'App\\Notifications\\NewExercisePosted' 
}; 

window.Echo = new Echo({ 
    broadcaster: 'pusher', 
    key: PUSHER_KEY, 
    cluster: 'mt1', 
    encrypted: true 
}); 

var notifications = []; 

$(document).ready(function() { 
    // check if there's a logged in user 
    if(Laravel.userId) { 
     // load notifications from database 
     $.get(`/notifications`, function (data) { 
      addNotifications(data, "#notifications"); 
     }); 

     // listen to notifications from pusher 
     window.Echo.private(`App.User.${Laravel.userId}`) 
      .notification((notification) => { 
      addNotifications([notification], '#notifications'); 
     }); 
    } 
}); 


function addNotifications(newNotifications, target) { 
    console.log(notifications.length); 
    notifications = _.concat(notifications, newNotifications); 
    // show only last 5 notifications 
    notifications.slice(0, 5); 
    showNotifications(notifications, target); 
} 

function showNotifications(notifications, target) { 

    if(notifications.length) { 
     var htmlElements = notifications.map(function (notification) { 
      return makeNotification(notification); 
     }); 
     $(target + 'Menu').html(htmlElements.join('')); 
     $(target).addClass('has-notifications') 
    } else { 
     $(target + 'Menu').html('<li class="dropdown-header">No notifications</li>'); 
     $(target).removeClass('has-notifications'); 
    } 
} 

// Make a single notification string 
function makeNotification(notification) { 
    var to = routeNotification(notification); 
    //console.log(to); 
    var notificationText = makeNotificationText(notification); 
    return '<li><a href="' + to + '">' + notificationText + '</a></li>'; 
} 

function routeNotification(notification) { 
    //console.log(notification.data.data.ex_id); 
    var to = `?read=${notification.id}`; 
    if(notification.type === NOTIFICATION_TYPES.follow) { 
     to = 'users' + to; 
    } else if(notification.type === NOTIFICATION_TYPES.newEx) { 
     const exId = notification.data.data.ex_id; 
     to = `guitar-lesson-ex/${exId}` + to; 
    } 
    return '/' + to; 
} 



function makeNotificationText(notification) { 
    var text = ''; 
    if(notification.type === NOTIFICATION_TYPES.follow) { 
     const name = notification.data.follower_name; 
     text += `<strong>${name}</strong> followed you`; 
    } else if(notification.type === NOTIFICATION_TYPES.newEx) { 
     text += `New exercise posted`; 
    } 
    return text; 
} 

事情正在发挥作用,但并不完全。在创建新练习后,消息即出现在数据库和Pusher中,当您单击MarkAsRead通知时,通知将被标记为已读。这里是问题:

当我创建一个新的练习时,客户端不会实时更新。它似乎只是在页面刷新时产生变化。

基于我上面的内容,有关如何解决问题的任何提示?我对javascript一无所知,尤其是变量的范围,执行顺序等等,所以我怀疑我忽略了一些更好的观点。我是开发者之前我是一名吉他手!

谢谢!

布赖恩

回答

0

我昨天一整天都在试图弄清楚这一点,并在最后它来到了* VS {ID} ...

的问题是在channels.php文件,其中通道授权已完成。我正在使用App.User。{id}没有意识到这是每5.4条指令,实际上对于5.3需要App.User。*

我根本没有想到要考虑!现在一切都按预期工作。

谢谢,布赖恩

+0

您好,我正在尝试按照该教程。它不起作用,我首先按照步骤一步一步地修改文件,没有任何东西,没有推动。然后我决定克隆代表并安装它,用我的推键等修改env。仍然无法工作。我正在使用5.4。16.不知道发生了什么事。 – Chriz74