首页 > 解决方案 > 在 Laravel 5.7 事件监听器中运行 Javascript

问题描述

我正在尝试在用户登录时运行一个 JavaScript 库 Noty。我已经注册了该活动并按照此处的文档进行操作。但是,我尝试使用 echo 发送 javascript,但代码没有从我所看到的执行。工作流程是,在Home页面登录后,将弹出一个通知通知,表示欢迎。

这是我的EventServiceProvider

class EventServiceProvider extends ServiceProvider
{
    /**
     * The event listener mappings for the application.
     *
     * @var array
     */
    protected $listen = [
        Registered::class => [
            SendEmailVerificationNotification::class,
        ],
        'Illuminate\Auth\Events\Login' => ['App\Listeners\UserEventListener@onUserLogin']
    ];

    /**
     * Register any events for your application.
     *
     * @return void
     */
    public function boot()
    {
        parent::boot();


    }
}

UserEventListener

class UserEventListener
{
    /**
     * Create the event listener.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Handle the event.
     *
     * @param  Login  $event
     * @return void
     */
    public function handle(Login $event)
    {

    }

    public function onUserLogin($event) {
         echo("<script>
            $(document).ready(function() {
                    new Noty({
                    text: 'Welcome {{Auth::user()->name}}! ',
                    type:'info',
                    layout: 'centerRight',
                    timeout:2000
                })
                .on('onShow', function() {
                        var audio = new Audio('/sounds/appointed.mp3');
                        audio.play();
                    }).show();
            });
        </script>");
        echo("adad");
    }
}

标签: javascriptlaravel

解决方案


使用 Laravel 显示消息似乎是一种非常奇怪的方法。

你可以简单地在你的登录控制器中使用这一行

return redirect('your/path')->with('success', 'your message here');

在刀片模板的某处执行简单检查时:

@if (\Session::has('success'))
    <script>
            $(document).ready(function() {
                    new Noty({
                    text: 'Welcome {{ Auth::user()->name }}',
                    type:'info',
                    layout: 'centerRight',
                    timeout:2000
                })
                .on('onShow', function() {
                        var audio = new Audio('/sounds/appointed.mp3');
                        audio.play();
                    }).show();
            });
        </script>
@endif

您可以将通知代码放在通用(例如布局)模板中,因此如果用户会话中有消息,它将在任何地方触发通知


推荐阅读