Laravel通知,实时显示通知问题

如何解决Laravel通知,实时显示通知问题

您好,我有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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


依赖报错 idea导入项目后依赖报错,解决方案:https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错:更换其他版本 无法下载依赖可参考:https://blog.csdn.net/weixin_42628809/a
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
错误1:gradle项目控制台输出为乱码 # 解决方案:https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
错误还原:在查询的过程中,传入的workType为0时,该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
解决方案1 1、改项目中.idea/workspace.xml配置文件,增加dynamic.classpath参数 2、搜索PropertiesComponent,添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
删除根组件app.vue中的默认代码后报错:Module Error (from ./node_modules/eslint-loader/index.js): 解决方案:关闭ESlint代码检测,在项目根目录创建vue.config.js,在文件中添加 module.exports = { lin
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -&gt; systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-