Laravel回声“回声未定义”

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

我现在在互联网上搜索此错误超过两个小时，当我在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

以下是步骤

作曲家

如果使用推杆，则安装推杆

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

NPM或纱线

npm install --save laravel-echo pusher-js

如果不使用推动器，则

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. 首先设置窗口变量
2. 第二个配置 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')
`