laravel - 使用 Laravel echo 和 Laravel mix
问题描述
我是 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 的经验。
解决方案
首先,安装 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
推荐阅读
- oracle - AWS RDS 分配的存储大小
- bash - 如何计算日志文件中两行之间的时间差?
- google-sheets - 用于计算电子表格中用 , 或 / 分隔的名称的公式
- visual-studio - 如何在 Visual Studio 2019 中为类库项目应用嵌套文件
- c++ - 如何初始化向量
? - django - gunicorn 服务文件中的 wsgi 目录无法识别
- java - 如何将 Maven 项目创建为 jar 文件,其中每个方法的 jar 中都包含注释
- laravel - 试图获取非对象的属性“点”
- python - 如何在 tensorflow.js 中使用保存的模型
- nlp - 使用 NLP 分析从文本中删除特殊字符