Laravel Echo“Echo未定义”

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控制台中遇到了这个错误：未捕获的引用错误：Echo未定义

我在互联网上搜索了两个小时以上，当我在Echo之前添加window.时，我得到了一个不同的错误，那个错误是：未捕获的类型错误：无法读取未定义的属性'channel' 我已经试图注释掉app.js中的以下内容，因为我读到过这可能会导致此错误： Vue.component('example-component', require('./components/ExampleComponent.vue')); window.Vue = require('vue');

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

在注释掉它们之后，我收到了相同的错误。 感谢阅读，祝您拥有愉快的一天。

- Edward

Answer 1

以下是步骤

Composer

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

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

NPM或Yarn

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 信息。

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

感谢点赞。

- Pascal

Answer 2

对我来说，问题在于在初始化之前加载了Echo脚本，因此我必须在整个页面加载完成后才启动监听器。

window.addEventListener('load',  () =>{
   Echo.join(`chat`)
    .here((users) => {
       console.log(users)
    })
      .joining((user) => {
          console.log(user.name);
         })
      .leaving((user) => {
           console.log(user.name);
           })
      .error((error) => {
              console.error(error);
       });

    })

- Abanoub Hany

Answer 3

我在纯JS中使用了Laravel Echo，这是因为文档没有加载。

document.onreadystatechange = function () {
    if (document.readyState === 'complete') {
        Echo.listen(...);
    }
}

- AmirRezaM75

Answer 4

以下是您可以检查/执行的一些操作，可能会解决您的问题：

• 确保您已经取消注释了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>标签之前。

- pellul

Answer 5

请按照以下代码顺序进行操作：

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')
`

- Surendra Kawle