使用 Laravel echo 和 Laravel mix

Question

我是 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 的经验。

Answer 1

首先，安装 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
// });

删除 cmets 并继续运行 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