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一無所知，尤其是變量的範圍，執行順序等等，所以我懷疑我忽略了一些更好的觀點。我是開發者之前我是一名吉他手！
謝謝！
布賴恩
您好，我正在嘗試按照該教程。它不起作用，我首先按照步驟一步一步地修改文件，沒有任何東西，沒有推動。然後我決定克隆代表並安裝它，用我的推鍵等修改env。仍然無法工作。我正在使用5.4。16.不知道發生了什麼事。 – Chriz74