0

我是 Laravel Mix 前端框架的新手我只想知道如何将 Laravel Echo 与 Laravel Mix 一起使用。我正在使用 Laravel 数据库通知，我想向用户实时显示它们。

通知工作正常，我也可以将其列出给用户。为了实时显示它们，我正在使用 Pusher，它集成得很好。我已经通过调试控制台发送一些事件进行了测试。在我的项目中，我找不到 bootstrap.js 文件来放置以下代码：

let token = document.head.querySelector('meta[name="csrf-token"]'); 
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.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});

在 app.js 文件中，我想在下面放置代码以实时收听通知：

let userId = document.head.querySelector('meta[name="user-id"]').content();
    Echo.private('App.User.'+userId)
    .notification((notification) => {
        console.log(notification.data);
    });

我正在使用 Laravel 7.30.0 版本。在我的项目中，我没有资产文件夹。结构如下：

resources
        -> Js
           -> app.js

在 app.js 中，我尝试编写上面的代码，但它抛出了以下错误：

未捕获的语法错误：无法在模块外使用 import 语句

如何在 Laravel Mix 中使用 Laravel Echo？我之前没有使用 Laravel Mix 的经验。

4

1 回答 1

0

首先，安装 Laravel Echo 和 Pusher。

npm install --save-dev laravel-echo pusher-js

在全新安装的 Laravel 7.x 中有两个文件位于/resources/js/.

它们是：app.js和bootstrap.js。在 bootstrap.js 中，您将看到 Echo 的注释部分。

/**
 * 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,
//     forceTLS: true
// });

删除评论并继续运行npm run dev。

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
);

确保您拥有最新版本的 Mix，并且您的 webpack.mix.js 配置正确。

npm i laravel-mix@latest --save-dev

于 2021-02-04T00:26:26.050 回答