Laravel 生成错误“Echo is Echo is not defined”答案

【问题标题】：Laravel generates an error "Echo is Echo is not defined"Laravel 生成错误“Echo is Echo is not defined”
【发布时间】：2017-06-05 01:27:47
【问题描述】：

我正在使用 Laravel 事件广播，并且我正在使用推送器驱动程序来广播事件并且它工作得很好。

使用推送器提供的js库从客户端成功订阅公共频道

var pusher = new Pusher('xxxxxxxxxxxxxxxxxxxxx_my_app_key', {
    encrypted: true
});

var channel = pusher.subscribe('TestPusher');
    channel.bind('App\\Events\\TestPusher', function(data) {
alert(data.msg);
});

但是当我在客户端代码中使用 Echo 时

Echo.channel('TestPusher')
    .listen('TestPusher', (e) => {
        console.log(e.msg, e.chatMessage);
    });

它会产生错误“Echo is not defined”。

我已经在我的应用程序中使用 npm install --save laravel-echo pusher-js 安装了 Laravel Echo 库，并且还根据 laravel 提供的文档在 resources/assets/js/bootstrap.js 文件中包含了以下代码。

import Echo from "laravel-echo"

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'xxxxxxxxxxxxxxxxxxxxx_my_app_key'
});

所以请帮我解决这个问题。

【问题讨论】：

看看这个link。你会得到火花来使用它。
谢谢@iDroid，但我已经尝试过这个链接，但对我不起作用，你能给我具体的解释吗？
如果您还没有这样做，您应该尝试使用 gulp 编译您的资产。

标签： laravel-5.3 laravel-echo

【解决方案1】：

几天前我遇到了这个问题。我的 gulp 安装一团糟，Laravel 版本控制没有帮助。

对不起，如果这没有帮助，这只是我的经验，并且尽可能详细：

首先，我认为您的网站上确实包含 js/app.js 脚本。

现在，您会看到此错误，因为正如 Josh 所说，您没有编译 js 文件。编辑 'resources/assets/js/bootstrap.js' 后，需要通过运行资产编译器来编译该文件：gulp（在 Laravel 5.3 中命名为 Laravel Elixir docs/5.3/elixir）。

如果你仔细阅读这部分教程，你应该特别小心 laravel 的 npm 依赖版本，特别是 Elixir 使用的那些（再一次，我的 gulp 安装根本不工作，即使没有出现错误消息） .

所以，如果这是一个新项目，你应该考虑更新到 Laravel 5.4。如果您不能或不愿意更新所有 Laravel 框架，也许可以像我一样解决。保持在 5.3，但使用 5.4 上的最新资产编译器，名为 Laravel Mix。现在它在 npm 上运行：npm run dev。（文档中没有提到 gulp。）

要实现这一点，你应该更新到latest package.json on 5.4并遵循 5.4 文档来安装 Laravel Mix。

【讨论】：

感谢您的回答@alecuys 实际上我已经修复了它，问题是，我实际上在页面底部加载了我的 'js/app.js' 脚本，我试图获得以下功能在实际脚本加载之前回显实例：P

【解决方案2】：

您的代码看起来不错，问题是您的 JS 订单，所以只有您遇到未定义的问题

喜欢

<script>
Echo.channel('TestPusher')
    .listen('TestPusher', (e) => {
        console.log(e.msg, e.chatMessage);
    });
</script>


<script src="echo.js"></script>

所以曲折的顺序:)

【讨论】：

感谢@kali Dass 我解决了它，是的，我的 js 订单问题

【解决方案3】：

每个 Echo 之前的寡妇对象。

window.Echo.channel('TestPusher')
    .listen('TestPusher', (e) => {
        console.log(e.msg, e.chatMessage);
    });

【讨论】：

【解决方案4】：

我的问题是我没有将bootstrap.js 与其余代码一起编译，因为我从app.js 中删除了require('./bootstrap') 行。我把那条线加回去了，我在家干了。 As described here

【讨论】：

【解决方案5】：

从你的 app.js 脚本标签中移除 defer

  <!-- Scripts -->
  <script src="{{ asset('js/app.js') }}" defer></script>

【讨论】：