甘家口网站建设,上海网站推广企业,知乎 php网站开发书籍,网站开发工作量评估Meteor 3.0 是一个功能强大的全栈 JavaScript 框架#xff0c;特别适合实时应用程序的开发。它的核心机制之一就包括发布-订阅#xff08;Publish-Subscribe#xff09;模型#xff0c;它允许服务器端发布数据#xff0c;客户端订阅并实时更新。本文将介绍如何在 Meteor 3…Meteor 3.0 是一个功能强大的全栈 JavaScript 框架特别适合实时应用程序的开发。它的核心机制之一就包括发布-订阅Publish-Subscribe模型它允许服务器端发布数据客户端订阅并实时更新。本文将介绍如何在 Meteor 3.0 中使用 publish-subscribe包括简单发布、自定义发布以及客户端的订阅和数据读取流程。
1. 服务器端publish 数据源
1.1 简单发布返回 cursor 或 cursor[]
在服务器端发布数据非常简单。首先你可以通过 Meteor.publish 来定义一个数据发布函数该函数通常返回一个 MongoDB 集合的查询游标cursor。这个游标代表服务器向客户端发布的数据集。以发布一个简单的 Posts 集合为例
// posts.js (服务器端代码)
import { Meteor } from meteor/meteor;
import { Posts } from /imports/api/posts.js;Meteor.publish(allPosts, function () {// 返回一个 cursor 对象客户端可以订阅该发布源return Posts.find();
});上面的代码会将 Posts 集合中的所有数据发布到客户端。客户端订阅后会自动接收到这些数据。
你也可以返回一个数组其中包含多个游标。例如
Meteor.publish(multipleCollections, function () {return [Posts.find(),Comments.find(),];
});这种方式适合在一次发布中返回来自多个集合的数据。
1.2 自定义发布使用 added / changed / removed / stop 方法
有时候你可能需要更灵活的控制像控制数据发布的具体时机或内容。这时你可以使用 added、changed、removed 以及 stop 方法来手动管理数据的发布。
自定义发布的典型例子是只发布部分数据或者根据某些复杂的逻辑来动态发布。如下示例发布一个用户拥有的所有 Tasks 集合中的任务
// tasks.js (服务器端代码)
import { Meteor } from meteor/meteor;
import { Tasks } from /imports/api/tasks.js;Meteor.publish(userTasks, function () {const self this;const userId self.userId;if (!userId) {self.ready();return;}
// meteor的minimongo的find返回一个cursor是可观察的
// 除了数据集合最常用的还包括订阅redis或者mq的数据const handle Tasks.find({ owner: userId }).observeChanges({added(id, fields) {// 这个tasks就是发布到前端哪个数据集合self.added(tasks, id, fields);},changed(id, fields) {self.changed(tasks, id, fields);},removed(id) {self.removed(tasks, id);},});self.ready();self.onStop(function () {handle.stop();});
});在此示例中使用 observeChanges 来监听数据库的变化并调用 added、changed 和 removed从而手动控制数据的发布。
2. 客户端subscribe 订阅并读取数据
2.1 订阅与传参
在客户端你可以使用 Meteor.subscribe 来订阅服务器端的发布源。对于简单的发布订阅不需要任何参数但对于自定义发布你可以传递一些参数来过滤数据。例如订阅上文中的 allPosts 数据源
// client.js (客户端代码)
Meteor.subscribe(allPosts);对于带参数的订阅如根据用户 ID 来订阅特定用户的任务
Meteor.subscribe(userTasks);在订阅时还可以传递动态参数例如只订阅特定状态的任务
Meteor.subscribe(userTasks, { status: completed });2.2 从 MiniMongo 中读取数据并实时更新
在客户端订阅成功后数据会被同步到客户端的 MiniMongo 数据库中。你可以使用 Mongo.Collection#find() 方法来从 MiniMongo 中检索数据。
// client.js (客户端代码)
import { Posts } from /imports/api/posts.js;Tracker.autorun(() {const postsCursor Posts.find();postsCursor.forEach(post {console.log(post);});
});通过 Tracker.autorun 包裹查询你可以确保每当数据发生变化时UI 自动重新渲染。例如你可以将其绑定到一个模板或 React 组件中实时显示更新的数据。
3. 使用 mapCursor 将 MiniMongo 的 cursor 转化为 Vue 3 响应式数组
在 Meteor 3.0 中使用 autorun 可以自动跟踪数据的变化。而在 Vue 3 中响应式系统是通过 reactive 实现的。为了在 Vue 3 的 setup 函数中使用 Meteor 的数据订阅我们可以定义一个方法 mapCursor将 Meteor 的 MiniMongo 游标cursor转化为 Vue 3 的响应式数组。
3.1 方法设计
我们将定义一个名为 mapCursor 的函数它接收一个 Meteor 的 cursor例如 Tasks.find({})然后利用 Tracker.autorun 来监听游标变化。每当游标中的数据发生变化时我们将更新 Vue 3 的 reactive 数组。并且这个方法适合在 Vue 3 的 setup 函数中使用能够在组件卸载时自动停止 autorun。
3.2 代码实现
import { reactive, onUnmounted } from vue;
import { Tracker } from meteor/tracker;export function mapCursor(cursor) {// 创建一个响应式数组const reactiveArray reactive([]);// 使用 autorun 监控 cursor 的变化const computation Tracker.autorun(() {// 获取游标中的数据const data cursor.fetch();// 清空 reactiveArray 并用新的数据替换reactiveArray.length 0; // 清空数组data.forEach(item {reactiveArray.push(item); // 添加新的数据});});// 使用 onUnmounted 确保组件卸载时停止 autorunonUnmounted(() {computation.stop();});// 返回响应式数组return reactiveArray;
}3.3 方法说明 reactiveArray 使用 Vue 3 的 reactive 方法创建一个响应式数组用来存储 cursor 的数据。 Tracker.autorun 用于监控 cursor 的变化。每当 MiniMongo 中的数据发生变化时它会自动运行将最新的数据同步到 reactiveArray 中。 清空并重新填充数组 当游标中的数据发生变化时我们先清空 reactiveArray然后用新的数据重新填充它。 onUnmounted 确保当组件卸载时停止 autorun 监控避免内存泄漏。 返回值 返回的是一个 Vue 3 的响应式数组这个数组会随着 MiniMongo 中数据的变化而自动更新。
3.4 在 Vue 3 中使用 mapCursor
该方法设计为在 Vue 3 的 setup 函数中使用下面是如何在组件中使用这个方法的示例
templatedivh2任务列表/h2ulli v-fortask in tasks :keytask._id{{ task.name }}/li/ul/div
/templatescript setup
import { Tasks } from /imports/api/tasks.js;
import { mapCursor } from /imports/utils/mapCursor.js;// 订阅 Tasks 数据
const tasks mapCursor(Tasks.find({}));
/script总结
Meteor 3.0 的发布-订阅模型使得开发实时应用非常高效。服务器端可以通过简单发布或自定义发布来灵活地控制数据的发布客户端则可以通过订阅获取数据并通过 Tracker.autorun 等机制实现自动化的 UI 更新。这种架构能够确保客户端总是与服务器端的数据保持同步不需要定时或者在某个时机去获取最新数据。 写了这么几个章节我发现自己忽略了一个开发环境的搭建章节后续某个时间点再补上…先以其简单性吸引点人气后期项目实战之前再介绍环境准备其实也很简单
