2

我正在尝试使用此站点的想法来实现用户消息传递方法：

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一无所知，尤其是变量范围、执行顺序等。所以我怀疑我忽略了一些更好的点。在成为开发人员之前，我是吉他手！

谢谢！

布赖恩

4

1 回答 1

0

我昨天花了一整天试图弄清楚这一点，最后它归结为 * vs {id} ...

问题出在通道授权完成的 channels.php 文件中。我正在使用 App.User.{id} 没有意识到这是按照 5.4 的说明，而实际上 5.3 需要是 App.User.*

我根本没想过要考虑这个！现在一切都按预期工作。

谢谢，布赖恩

于 2017-08-14T13:14:34.600 回答