使用Laravel回声与Laravel混合

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中，我尝试过写上面的代码，但它给我带来了以下错误：

未捕获语法错误：无法在模块之外使用导入语句

如何将Laravel Echo与Laravel Mix一起使用？我之前没有在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
// });

删除注释并继续运行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 ilaravel-mix@latest--保存开发