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;
}
いくつかは機能していますが、 。新しい練習問題を作成した直後に、メッセージがデータベースとプッシャーに表示され、MarkAsRead通知をクリックすると、通知が読み取り済みとしてマークされます。問題は次のとおりです。
新しい練習問題を作成すると、クライアントはリアルタイムで更新されません。ページがリフレッシュされたときにのみ変更が発生するようです。
上記の内容に基づいて、修正方法に関するヒントを教えてください。私はjavascriptについて、特に変数のスコープ、実行の順番などについてはわかりません。したがって、私はいくつかの細かい点を見落としていると思います。私は開発者である前にギタリストです！
ありがとうございます！
ブライアン
こんにちは、私もこのチュートリアルに従おうとしています。それは動作しません、私は最初に従って、ステップごとにファイルを変更し、何もプッシュしません。それで私は担当者を複製してインストールし、プッシャーキーなどでenvを修正することにしました。まだ動作していません。私は5.4を使用しています。16.何が起こっているのか分かりません。 – Chriz74