ReferenceError:Echo 未定义
我正在使用 laravel echo 和 pusher js 在我的应用中构建实时功能。我已按照 文档 所述完成所有必需步骤。我已成功设置推送器配置,并且它运行良好:当我的事件触发时,我会在我的 Pusher 帐户的调试控制台中收到通知。
我的问题出在前端。正如
文档
所述,我已在
resources/js/bootstrap.js
文件底部添加了必要的代码部分。我实际上取消了它的注释并添加了正确的 ID。
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key:my-pusher-key-here,
cluster: eu,
forceTLS: true
});
问题是,尽管我已在 blade 视图中插入了这些
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/echo.js"></script>
<script src="js/app.js"></script>
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
<script>
var channel = Echo.channel('my-channel');
channel.listen('my-event', function(data) {
alert(JSON.stringify(data));
});
</script>
,但我在浏览器的控制台中收到此错误:
ReferenceError:Echo 未定义
。
我猜这与未找到 echo 库有关,但我不明白为什么。对于
<script src="js/echo.js"></script>
行,我复制了运行
npm install --save laravel-echo pusher-js
命令后获得的 echo.js 文件。
我尝试了许多建议,比如
gulp
,以便自动编译 Js 文件中的更改,但没有任何效果... 对于在我的 CLI 中输入的
gulp
命令,出现
No gulpfile file found
错误。我也尝试过直接在
app.js
文件中复制第一部分代码,但没有区别,我收到了同样的错误。
正如我所说的.. 我猜这肯定与未找到 Echo 库有关,但为什么呢?非常感谢您的帮助
package.json
文件
"private": true,
"scripts": {
"build": "webpack -p",
"watch": "npm run development -- --watch",
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"gulp": "^4.0.2",
"laravel-echo": "^1.5.4",
"pusher-js": "^5.0.0"
}
}
从脚本标记中删除 defer。这将导致 app.js 脚本被延迟,并且其他脚本将先于此脚本运行
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
您在
resources/js/bootstrap.js
文件中有
import Echo from 'laravel-echo';
。
它会尝试在 node_modules 文件夹中搜索 Echo 依赖项。
您应该使用 laravel-mix 来构建 JavaScript 文件。
我遇到了与您相同的错误,该错误发生在您的 resources/js/app.js 文件中。如果您已注释掉 require('./bootstrap'); ,请取消注释它,它将对您有用。