Laravel Echo "Echo is not defined“

Question

首先，感谢您的阅读。让我来解释一下我所面临的问题。所以我成功地安装了Pusher和Laravel Echo，并尝试在我的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个多小时，当我在Echo之前添加window.时，我得到了一个不同的错误，那个错误是这样的：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();

bootstrap.js

在resources/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>标记之前。

Answer 3

请遵循下面的代码序列

1. first set window variable
2. second config vue

window.Echo = new Echo({
  broadcaster: 'socket.io',
  host: 'http://127.0.0.1:6001'
})
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
`