0

我正在使用 laravel echo 和 pusher js 在我的应用程序中构建实时功能。我已经完成了文档所要求的所有步骤。我已经成功设置了推送器配置并且工作正常：当我的事件被触发时，我会在我的推送器帐户的调试控制台中收到通知。

我的问题是前端。正如文档所说，我在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
});

问题是虽然我已经插入了那些

<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 is not defined。我猜这与找不到回声库有关，但我不明白为什么。对于该行，我复制了命令运行<script src="js/echo.js"></script>后得到的 echo.js 文件。npm install --save laravel-echo pusher-js

我经历了很多建议，比如gulp让 Js 文件中的更改自动编译我猜但什么都没有……对于gulp在我的 CLI 中输入的命令，我遇到了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"
    }
}
4

4 回答 4

2

你有import Echo from 'laravel-echo';内部resources/js/bootstrap.js文件。

它尝试在node_modules文件夹中搜索 Echo 依赖项。

你应该使用laravel-mix来构建 JavaScript 文件。

于 2019-08-30T22:22:39.850 回答
2

我遇到了和你一样的错误，错误发生在你的 resources/js/app.js 文件中。如果你评论过require('./bootstrap'); 取消注释它会为你工作。

于 2020-10-07T13:33:20.267 回答
1

从您的脚本标签中删除延迟。这将导致 app.js 脚本被延迟，而另一个脚本将在此脚本之前先运行

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
于 2021-11-24T00:17:47.273 回答
0

我相信您在取消注释文件中的行后搞砸了这些步骤resources/js/bootstrap.js。要使用其中的代码，您需要导入resources/js/app.js文件。进去看看，你会看到它正在导入引导文件。您可以在刀片中导入 axios，resources/js/app.js因为您可能需要它。确认您的resources/js/app.js文件至少包含以下几行：

require('./bootstrap');
const { default: axios } = require('axios');
window.Vue = require('vue').default;

然后在你的刀片文件中使用它来让 vue 运行：

<script src="{{ asset('js/app.js') }}"></script>
<script>
    new Vue({
        el: '#app',
        data: {},
        methods: {},
        mounted() {},
    });
</script>

最后检查webpack.mix.js文件并确认它至少有：

mix.js('resources/js/app.js', 'public/js')
.vue();

对我来说，使用 php 7.4 我必须运行npm run production来构建 js 文件。它运行完美。

于 2021-07-16T06:31:19.507 回答