0

アプリでリアルタイム機能を構築するために、プッシャーjsでlaravel echoを使用しています。ドキュメントの指示に従って、必要なすべての手順を実行しました。プッシャー構成のセットアップに成功し、正常に動作します。イベントが発生すると、プッシャー アカウントのデバッグ コンソールに通知されます。

私の問題はフロントエンドにあります。ドキュメントで説明されているように、必要なコードの部分を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

Jsファイルの変更を自動的にコンパイルするなど、多くの提案をgulp行いましたが、何もないと思います... gulpCLIに入力したコマンドで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