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

Question

我一直在尝试实时接收通知，例如在这个视频中：https://www.youtube.com/watch?v=i6Rdkv-DLwk&t=1081s 通过使用 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()

        ];
    }
}

Answer 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;

Answer 2

我有一个 mix('js/app.js') 脚本，我已将其包含在我的 app.blade.php 中，这导致了问题。删除它后，一切正常，并且 newUnreadNotifications 正在异步更新。

<script src="{{mix('js/app.js')}}"></script>

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

Broadcasted Laravel notification is not shown in real-time on frontend, but is sent over Pusher and shown in console

laravel

vue.js

pusher

laravel-echo

laravel-websockets