Php 使用Pusher进行实时通知-使Laravel实现适应WordPress？

我有一个WordPress网站，在那里我运行吉他课程，目前我通过电子邮件或OneSignal发送的各种事件触发了各种通知。但我希望用户在登录时，无论我以何种方式发送消息，都能在网站上看到近乎实时的通知

最近，我重新访问了一个通知系统，该系统是我在以前的网站上用Laravel构建的，我试图找出如何适应WordPress。以下是我在Laravel网站上所做的工作（很多工作都是基于这个很棒的教程：）

var notificationsWrapper=$（'.dropdown notifications'）；
var notificationsToggle=notificationsWrapper.find（'a[data toggle]）；
var notificationscontelem=notificationsToggle.find（'i[数据计数]）；
var notificationscont=parseInt（notificationscontelem.data（'count'）；
window.Pusher=require（'Pusher-js'）；
从“laravel echo”导入Echolibrary；
var通知=[]；
常量通知类型={
follow:'App\\Notifications\\userfollowered'，
newEx:'App\\Notifications\\NewExercisePosted'
};
window.Echo=新的Echolibrary({
广播员：“推手”，
键：“XXXXXXXXXX”，
群集：“mt1”，
加密：真
});
$（文档）.ready（函数（）{
if（Laravel.userId）{
//从数据库加载通知
$.get（`/notifications`，函数（数据）{
添加通知（数据，#通知，'db'）；
});
//从推进器中装入新的
Echo.private（`App.User.${Laravel.userId}`）
.通知（（通知）=>{
添加通知（[通知]，'通知'，'推送'）；
});
}
});
函数addNotifications（新通知、目标、源）{
通知=uu.concat（通知，新通知）；
//仅显示最近5次通知
切片（0,5）；
显示通知（通知、目标）；
}
函数showNotifications（通知、目标）{
notificationscont=notifications.length；
NotificationScontelem.attr（“数据计数”，NotificationScont）；
if（notifications.length）{
var htmlElements=notifications.map（函数（通知）{
退货通知（通知）；
});
$（'#markall'）.show（）；
$（target+'Header'）。在（htmlElements.join（“”）之后；
$（target.addClass（'has-notifications'）；
$（'#nomsgs'）.hide（）；
}否则{
$（'#markall'）.hide（）；
$（target+“Header”）。之后（“
没有消息）；
$（target.removeClass（'has-notifications'）；
}
}
//创建单个通知字符串
函数makeNotification（通知）{
var to=路由化（通知）；
var notificationText=makeNotificationText（通知）；
返回“
”；
}
功能路由化（通知）{
var to=`？read=${notification.id}`；
if（notification.type==通知类型。follow）{
to='用户'+to；
}else if（notification.type==notification\u TYPES.newEx）{
const exId=notification.data.ex_id；
to=`吉他课ex/${exId}`+to；
}
返回“/”+到；
}
函数makeNotificationText（通知）{
var text=''；
if（notification.type==通知类型。follow）{
const name=notification.data.follower\u name；
text+=`${name}跟着你`；
}else if（notification.type==notification\u TYPES.newEx）{
text+=`新练习：`+notification.data.title；
}
返回文本；
}
$（“#markall”）。单击（函数（）{
var targetHref=$（this.data（'href'）；
$.post（'/markallnotificationsread'，函数（数据）{
data.success？（window.location.href=targetRef）：false；
}“json”）；
NotificationScontelem.attr（'data-count'，0）；
$（'#notificationsHeader'）.nextAll（）.remove（）；
$（'notificationsHeader'）。在（'li class=“dropdown header”id=“nomsgs”>之后没有消息；
$（“#通知”）.removeClass（'has-notifications'）；
$（'#markall'）.hide（）；
返回false；
});

要在WordPress中实现这一点，我应该采取相同的方法，即导入Laravel Echo库，还是应该从不同的方向思考

另外，在我目前的情况下，我有一些通知

转到用户（如“您的课程访问权即将到期”），然后

去一个小组（比如“你的课程现在已经开课了”）

对于案例1，pusher是否是一个好的用例，因为这实际上不是一个通道类型的消息，而是针对单个用户的一次性消息

不管怎样，我很好奇是否有一种完全不同的，更好的方式来处理这件事

var notificationsWrapper   = $('.dropdown-notifications');
var notificationsToggle    = notificationsWrapper.find('a[data-toggle]');
var notificationsCountElem = notificationsToggle.find('i[data-count]');
var notificationsCount     = parseInt(notificationsCountElem.data('count'));

window.Pusher = require('pusher-js');

import Echolibrary from "laravel-echo";

var notifications = [];

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

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


$(document).ready(function () {
    if(Laravel.userId) {
        // load notifications from database
        $.get(`/notifications`, function (data) {
            addNotifications(data, "#notifications", 'db');
        });

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

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

function showNotifications(notifications, target) {
    notificationsCount = notifications.length;
    notificationsCountElem.attr('data-count', notificationsCount);
    if(notifications.length) {
        var htmlElements = notifications.map(function (notification) {
            return makeNotification(notification);
        });

        $('#markall').show();
        $(target + 'Header').after(htmlElements.join(''));
        $(target).addClass('has-notifications');
        $('#nomsgs').hide();


    } else {
        $('#markall').hide();
        $(target + 'Header').after('<li class="dropdown-header" id="nomsgs">No messages</li>');
        $(target).removeClass('has-notifications');
    }
}

// Make a single notification string
function makeNotification(notification) {
    var to = routeNotification(notification);
    var notificationText = makeNotificationText(notification);
    return '<li class = "msgitems" style="background-color:white; border-style:solid; border-width: 1px; border-color:#2073a2; margin: 2px; padding:0px"><a style="color:blue;" href="' + to + '">' + notificationText + '</a></li>';
}

function routeNotification(notification) {
    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.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 += `<img src = "/img/guitarpick.png" alt = "guitar pick">  New exercise: ` + notification.data.title;
    }
    return text;
}

$("#markall").click(function () {

    var targetHref = $(this).data('href');

    $.post('/markallnotificationsread', function (data) {
        data.success ? (window.location.href = targetHref) : false;
    }, 'json');

    notificationsCountElem.attr('data-count', 0);
    $('#notificationsHeader').nextAll().remove();
    $('#notificationsHeader').after('<li class="dropdown-header" id ="nomsgs">No messages</li>');
    $('#notifications').removeClass('has-notifications');
    $('#markall').hide();

    return false;
});