Laravel 回声 "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

我在互联网上搜索这个错误已经两个多小时了，当我添加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

如果您正在使用 Pusher，请安装 Pusher

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

NPM 或 yarn

npm install --save laravel-echo pusher-js

如果不使用推送器，则

npm install --save socket.io-client

Blade

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

<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

感谢您的点赞