Laravel Echo "Echo 未定义"

Question

首先感谢您的阅读。让我解释一下我面临的问题。所以我安装推进器与Laravel回声成功，并试图在我使用它dash.blade.php，这是我的导入app.js文件：<script src="{{ asset('js/app')}}"></script>。之后我使用了这个：

<script>
  Echo.channel('channelDemoEvent')
    .listen('eventTrigger', (e) => {
      alert('Its working');
    });
</script>

运行它时，我在 chrome 控制台中收到此错误： Uncaught ReferenceError: Echo is not defined

我在互联网上搜索了这个错误超过 2 个小时，当我window.在Echo出现不同的错误之前添加时，该错误是这样的： Uncaught TypeError: Cannot read property 'channel' of undefined 我试图对这些进行评论，app.js因为我读到这可能会导致此错误：Vue.component('example-component', require('./components/ExampleComponent.vue')); window.Vue = require('vue');

const app = new Vue({
el: '#app',
});`

在评论这些之后，我得到了同样的错误。感谢阅读，祝您有美好的一天。

Answer 1

以下是步骤

作曲家

如果您使用 pusher，请安装 pusher

composer require pusher/pusher-php-server "~4.0"

NPM 或纱线

npm install --save laravel-echo pusher-js

如果不使用 pusher 那么

npm install --save socket.io-client

刀刃

确保您的模板具有像这样的 csrf 令牌

<meta name="csrf-token" content="{{ csrf_token() }}">

.env

在 .env 你应该填写你的推送信息

PUSHER_APP_ID=yourpusherappid
PUSHER_APP_KEY=yourpusherappkey
PUSHER_APP_SECRET=yourpusherappsecret
PUSHER_APP_CLUSTER=yourpusherappcluster

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

webpack.mix.js

在 webpack.mix.js 中

确保你有

const mix = require("laravel-mix");
require("dotenv").config();

引导程序.js

在资源/js/bootstrap.js

确保您已取消注释

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

import Echo from "laravel-echo";

window.Pusher = require("pusher-js");

window.Echo = new Echo({
    broadcaster: "pusher",
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});

编译

不要忘记重新编译你的js文件

NPM run watch 
NPM run dev 
NPM run prod 

配置缓存

有时您可能需要清除缓存以使更改生效运行以下命令

php artisan config:clear

感谢您的点赞

Answer 2

您可以检查/执行以下一些操作来解决您的问题：

• 确保您已取消注释这些行bootstrap.js

bootstrap.js

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});

• 您是否运行了npm run dev，npm run prod或者npm run watch进行了更改之后？

• 我对你的 js 导入没有信心。asset('js/app')将返回http://localhost/js/app。您可能必须.js在最后添加才能正确导入所有内容。

• 检查您的js/app.js输入是否位于标签之前<script></script>。