广播的 Laravel 通知不会在前端实时显示，而是通过 Pusher 发送并显示在控制台中

Posted 2023-02-21

【中文标题】广播的 Laravel 通知不会在前端实时显示，而是通过 Pusher 发送并显示在控制台中

【英文标题】：Broadcasted Laravel notification is not shown in real-time on frontend, but is sent over Pusher and shown in console

【发布时间】：2021-12-28 22:06:28

【问题描述】：

我一直在尝试实时接收通知，例如在此视频中：https://www.youtube.com/watch?v=i6Rdkv-DLwk&t=1081s 使用 Pusher - 应用已连接到 pusher，我通过控制台使用 Pusher 实时接收通知事件，但我无法实时更新通知计数，在前端（见我的代码下方的图片），新通知不会实时显示在前端，只有在页面重新加载后。我有一个用户，为另一个用户创建一个患者，当创建患者时，用户会收到通知。唯一的问题是，它没有在前端实时显示。我使用了 Laravel、Pusher、Laravel Echo 和 Vue.js，我认为问题出在我的 Notification.vue 文件中，组件挂载后请查看：

   <template>
<div id="notification">
    <li class="dropdown" @click="markNotificationAsRead">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
            <span class="glyphicon glyphicon-globe"></span> Notifications <span
                class="badge alert-danger">unreadNotifications.length</span>
        </a>

        <ul class="dropdown-menu" role="menu">
            <li>
                <notification-item v-for="unread in unreadNotifications" :unread="unread" :key="unread.id"></notification-item>
            </li>
        </ul>
    </li>
    </div>
</template>

<script>
import $ from 'jquery'
import axios from 'axios'
    import NotificationItem from './NotificationItem.vue';
    export default 
        props: ['unreads', 'userid', 'notifications'],
        components: NotificationItem,
        data()
            return 
                unreadNotifications: this.unreads
            
        ,
        methods: 
            markNotificationAsRead() 
                if (this.unreadNotifications.length) 
                    axios.get('/markAsRead');
                
            
        ,
     mounted() 
            console.log('Component mounted.');
            Echo.private('users.' + this.userid)
                .notification((notification) => 
                    console.log(notification);
                    var newUnreadNotifications = data: patient: notification.patient, user: notification.user;
             this.unreadNotifications.push(newUnreadNotifications);

);


        
    
</script>

在前端：

<notification :userid="auth()->id()" onclick="markNotificationAsRead()" :unreads="auth()->user()->unreadNotifications"></notification>

我相信问题出在这里，在 Notification.vue 中，我认为通知没有被正确推送：

var newUnreadNotifications = data: patient: notification.patient, user: notification.user;
                 this.unreadNotifications.push(newUnreadNotifications);

NotificationItem.vue 代码：

<template>
    <div class="wrap">
        <a :href="threadUrl">
Нова нотификация
        </a>
    </div>
</template>

<script>
    export default 
        props:['unread'],
        data()
            return 
                threadUrl:""
            
        ,
        mounted()
            this.threadUrl="admin/patient/"+ this.unread.data.patient.id
        

    
</script>

ApprovePatient.php

<?php

namespace App\Notifications;

use Illuminate\Bus\Queueable;
use Illuminate\Support\Carbon;
use Illuminate\Notifications\Notification;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\BroadcastMessage;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Notifications\Messages\MailMessage;

class ApprovePatient extends Notification

    use Queueable;

    public $patient;
    public $notifiable;
    /**
     * Create a new notification instance.
     *
     * @return void
     */
    public function __construct($patient)
    

$this->patient=$patient;

        //
    

    /**
     * Get the notification's delivery channels.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function via($notifiable)
    
        return ['database', 'broadcast'];
    

    /**
     * Get the mail representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return \Illuminate\Notifications\Messages\MailMessage
     */


    /**
     * Get the array representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function toDatabase($notifiable)
    
        //dd($notifiable);
        return [
'patient' => $this->patient,
'user' => auth()->user()



            //
        ];
    

      /**
     * Get the array representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return array
     */

    public function toBroadcast($notifiable)
    
      //  dd($notifiable);
        return new BroadcastMessage([

'patient' => $this->patient,
'user' => auth()->user()
        ]);



            //

    


        /**
     * Get the array representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return array
     */

    public function toArray($notifiable)
    
        return [
            'patient' => $this->patient,
            'user' => auth()->user()

        ];
    

【参考方案1】：

我不确定您是如何在<notification-item/> 组件中编写代码的。因为，当您收到来自推送器频道的新通知时，它将被推送到 newUnreadNotifications 数组，如下所示。

var newUnreadNotifications = data: patient: notification.patient, user: notification.user;
this.unreadNotifications.push(newUnreadNotifications);

这就是为什么你可以得到console.log(newUnreadNotifications)的结果

但是，您必须确保正确读取数组键和对象。正如我现在所看到的，您正在用 data 对象包装 patient 和 user。

因此，在<notification-item/> 组件中，您应该像下面的示例一样访问患者和用户。

let patientName = data.patient.name;

【讨论】：

您好，非常感谢您的回复，我添加了NotificationItem.vue和ApprovedPatient.php的代码（这是Notification），请您看一下，也许NotificationItem.vue是问题是，这会阻止应用在前端实时发送通知吗？