首页 > 解决方案 > 使用 LARAVEL 和 PUSHER 通道创建 WEB 通知时,我在控制台中收到错误“未捕获的 ReferenceError:Pusher 未定义”

问题描述

我正在尝试使用https://pusher.com发送网络通知 我已经实现了推送器文档中给出的所有内容,但现在我仍然在控制台中收到类似“Uncaught ReferenceError: Pusher is not defined”的错误

请检查我的代码中是否有任何问题我在 App\Events 中创建了 FormSubmitted 事件,它看起来像

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class FormSubmitted implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $text;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($text)
    {
        //
        $this->text = $text;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('my-channel');
    }

    public function broadcastAs()
    {
        return 'form-submitted';
    }
}

==================================================== ========================

我在资源文件夹中创建了 counter.blade.php 它看起来像

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Pusher Test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script
  <script src="https://js.pusher.com/4.4/pusher.min.js"></script>
  <script>

    // Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var pusher = new Pusher('MY_KEY_PLACED_HERE', {
      cluster: 'ap2',
      forceTLS: true
    });

    var channel = pusher.subscribe('my-channel');
    channel.bind('form-submitted', function(data) {
      alert(JSON.stringify(data));
    });
  </script>
</head>
<body>
  <h1>Pusher Test</h1>
  <p>
    Try publishing an event to channel <code>my-channel</code>
    with event name <code>my-event</code>.
  </p>
</body>
</html>

==================================================== =================

然后我在资源中创建 sender.blade.php

<form action="sender" method="post">
    {{csrf_field()}}
    <input type="text" name="text">
    <input type="submit" value="submit">
</form>

==================================================== ===== 我已经在 .env 文件中设置了所有凭据(这里我设置了正确的密钥和秘密)

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=XXXX
PUSHER_APP_KEY=XXXXX
PUSHER_APP_SECRET=XXXX
PUSHER_APP_CLUSTER=AP2

==================================================== =====

and finally `web.php` looks like 


Route::get('/counter', function () {
    return view('counter');
});

Route::get('/sender', function () {
    return view('sender');
});

Route::post('/sender', function () {

    $text = request()->text;

    event(new FormSubmitted($text));
});

==================================================== ========= 当我在浏览器中运行 localhost/counter 时

我在控制台中收到“未捕获的 ReferenceError:未定义推送器”这个错误

我希望当我向 localhost/sender 发送一些来自文本的输入时的输出,然后这个文本数据应该作为通知弹出

标签: phplaravelpusher

解决方案


您的header script标签中有错字。你没有</script正确结束你的 jQuery 标签。将其更改为</script>.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐阅读