laravel - Laravel 通知，实时显示通知的问题

Question

您好，我对 Laravel 实时通知有疑问。我已经完成了文档所说的任何事情，但我仍然必须刷新页面才能接收通知。这是我的评估控制器：（创建评估后我必须通知所有用户）。我为此使用了 Pusher 和 Echo，我已经尝试了多种解决方案，但还没有答案。

  public function store(Request $request )
{
    //dd($request);
    $data = request()->validate([
      'expert' => 'required',
      'gram1' => 'required',
      'karate1' => 'required',
      
      
    ]);
    //Create Post
    $evaluation = new Evaluation;
    
    $evaluation->expert = $request->input('expert');
    $evaluation->gram1 = $request->input('gram1');
    $evaluation->gram2 = $request->input('gram2');
    $evaluation->gram3 = $request->input('gram3');
    $evaluation->gram4 = $request->input('gram4');
    $evaluation->karate1 = $request->input('karate1');
    $evaluation->karate2 = $request->input('karate2');
    $evaluation->karate3 = $request->input('karate3');
    $evaluation->karate4 = $request->input('karate4');
    $evaluation->pietre1 = $request->input('pietre1');
    $evaluation->pietre2 = $request->input('pietre2');
    $evaluation->pietre3 = $request->input('pietre3');
    $evaluation->pietre4 = $request->input('pietre4');
    $evaluation->aur_prelucrat1 = $request->input('aur_prelucrat1');
    $evaluation->aur_prelucrat2 = $request->input('aur_prelucrat2');
    $evaluation->aur_prelucrat3 = $request->input('aur_prelucrat3');
    $evaluation->aur_prelucrat4 = $request->input('aur_prelucrat4');
    $evaluation->pret_per_gram1 = $request->input('pret_per_gram1');
    $evaluation->pret_per_gram2 = $request->input('pret_per_gram2');
    $evaluation->pret_per_gram3 = $request->input('pret_per_gram3');
    $evaluation->pret_per_gram4 = $request->input('pret_per_gram4');
    $evaluation->verighta = $request->input('verighta');
    $evaluation->cercei = $request->input('cercei');
    $evaluation->inel_B = $request->input('inel_B');
    $evaluation->Inel_D = $request->input('Inel_D');
    $evaluation->bratara = $request->input('bratara');
    $evaluation->lant = $request->input('lant');
    $evaluation->piatra_pretioasa = $request->input('piatra_pretioasa');
    $evaluation->medalion = $request->input('medalion');
    $evaluation->cruce = $request->input('cruce');
    $evaluation->monede = $request->input('monede');
    $evaluation->altceva = $request->input('altceva');
    $evaluation->Nr_obiecte = $request->input('Nr_obiecte');
    $evaluation->suma_imprumut = $request->input('suma_imprumut');
    $evaluation->evaluare = $request->input('evaluare');
    $evaluation->descriere = $request->input('descriere');
    $evaluation->user()->associate($request->user());
    $evaluation->save();

  //  $test = Evaluation::find($evaluation->id);
    $users = User::all();

    // Notification::send($users, new EvaluationNotify($evaluation));
        broadcast(new \App\Notifications\EvaluationNotify($evaluation))->toOthers();

   
    //User::find(Auth::user()->id )->notify(new EvaluationNotify($test));
   // User::find(Auth::user()->id )->notify(new EvaluationNotify($evaluation));
   


    return redirect('/evaluation')->with('success', 'evaluation Created');

}`enter code here`

这是我的路线：

    Route::get('/', function () {

    return view('welcome');
});





Route::get('/home', 'HomeController@index')->name('home');

Route::resource('users', 'UserController');

Route::resource('roles', 'RoleController');

Route::resource('permissions', 'PermissionController');

Route::resource('posts', 'PostsController');

Route::get('admin', 'AdminController@index');

Route::resource('client', 'ClientController');

Route::resource('evaluation', 'EvaluationController');



Route::post('/notification/get', 'NotificationController@get');

Route::post('/notification/read', 'NotificationController@read');

这是我的 app.js 文件

var app = new Vue({
el: '#main-wrapper',
data: {
    notifications: ''
},
mounted() {
    Axios.post('/notification/get').then(response => {
        this.notifications = response;
    });
 
    var userId = $('meta[name="userId"]').attr('content');
    window.Echo.private('App.User.' + userId)
    .notification((notification) => {
        console.log('hello');
        
    });
}

})

这是我的评价

namespace App\Notifications;


use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\BroadcastMessage;
use Illuminate\Notifications\Notification;
use App\Evaluation;
use App\User;

class EvaluationNotify extends Notification 
{
  use Queueable;
  public $evaluation;
  /**
   * Create a new notification instance.
   *
   * @return void
   */
  public function __construct(Evaluation $evaluation)
  {
      $this->evaluation = $evaluation;
  }

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


  /**
   * Get the array representation of the notification.
   *
   * @param  mixed  $notifiable
   * @return array
   */
  public function toDatabase($notifiable)
  {
      return [
          'evaluation' => $this->evaluation->id,
          
      ];
  }

  public function toBroadcast($notifiable)
  {
      return new BroadcastMessage([
          'evaluation' => $this->evaluation->id,
      
      ]);     
  }
  
}

这是我的Vue组件

<template>

<div class="mt-2">
       <li v-for="notification in notifications.data" style="display:inline;">
             <a href="#" style="color:white; background-color:red; padding: 3px; margin:2px; font-size: 13px; border-radius:55%;" 
              v-on:click="MarkAsRead(notification)">{{notification.data.evaluation}}</a>          
       </li>
 </div>      
</template>

<script>
    export default {
        props:['notifications','evaluation', 'userId'],
        methods:{
            MarkAsRead : function(notification) {
                var data = {
                    id: notification.id
                };
                axios.post('/notification/read', data).then(response => {
                    window.location.href = "/evaluation/" + notification.data.evaluation + "/edit";
                });
                

                 },

       
        },
     
    }
    
    
    
</script>

这是我在视图中调用它的方法：

<h6 class="ml-2">
    <notification id="notifications" v-bind:notifications="notifications"></notification>   
</h6>

标签： laravelnotificationsbroadcastpusherlaravel-echo