前端的全栈混合之路Meteor篇(一):运行在浏览器端的数据库-MiniMongo介绍及其前后端数据实时同步示例

news2024/10/6 21:37:00

Meteor 是一个全栈 JavaScript 框架,致力于简化 Web 应用开发。MiniMongo 是 Meteor 框架中的一个独特组件,它将 MongoDB 数据库的功能带到了客户端,使客户端能够像操作数据库一样,进行查询、插入、更新和删除操作。这使得前端开发者能够无缝地处理数据,同时享受 Meteor 的数据同步机制。

MiniMongo 是什么?

MiniMongo 是 MongoDB 的客户端版本,它在浏览器中运行,并模拟了 MongoDB 的核心功能。它允许开发者在客户端直接使用类似 MongoDB 的 API 进行数据库操作,比如 find()insertAsync()updateAsync()removeAsync() 等(前端因为数据在内存可去掉Async后缀也可保持前后端异步一致性)。

MiniMongo 最强大的特性之一是它支持实时数据同步。通过 Meteor 的数据传输机制,客户端的 MiniMongo 与服务器端的 MongoDB 保持数据同步,保证数据的一致性。这使得应用可以即时响应用户操作,而无需手动刷新页面或重新请求数据。

MiniMongo 的核心功能

MiniMongo 提供了以下核心功能:

  1. MongoDB API 操作: 客户端可以使用标准的 MongoDB 操作方法,如查询、插入、更新和删除。
  2. 实时数据同步: 客户端的 MiniMongo 会与服务器端的 MongoDB 自动同步,使得数据在客户端和服务器之间保持一致。
  3. 发布/订阅机制: Meteor 的 publishsubscribe 机制与 MiniMongo 协同工作,实现数据的按需加载。
  4. 响应式数据源: 通过 Tracker 和 Blaze 等响应式库,客户端的界面可以根据 MiniMongo 数据的变化自动更新。

前后端数据同步的实现

Meteor 的数据同步是通过其特有的发布/订阅 (Pub/Sub) 模型和数据传输层 (DDP) 实现的。以下是 Meteor 在前后端数据同步中的实现原理和步骤:

1. 数据集合的定义

在 Meteor 中,数据集合的定义可以共享在前端和后端。客户端使用 MiniMongo,后端使用 MongoDB。无论是在服务器端还是客户端,我们都可以通过同样的方式定义一个集合。

// 定义共享的集合
import { Mongo } from 'meteor/mongo';

export const Tasks = new Mongo.Collection('tasks');

这个集合的定义会在客户端被实例化为 MiniMongo,在服务器端实例化为 MongoDB 集合。

2. 服务器端发布数据

服务器通过 Meteor.publish() 来向客户端发布数据。发布的数据源自服务器的 MongoDB 集合。默认发布到前端的同名集合,也就是Tasks是前后端公用的变量(实现会有点差距,但接口一致)。

// server/main.js
import { Tasks } from '../imports/api/tasks.js';

Meteor.publish('tasks', function publishTasks() {
  return Tasks.find();  // 返回任务集合中的数据
});

服务器端定义了一个名为 tasks 的发布函数,将 Tasks 集合中的数据传递给客户端。

3. 客户端订阅数据

客户端通过 Meteor.subscribe() 订阅服务器发布的数据。当客户端订阅成功后,服务器上的数据会通过 DDP 协议实时传输到客户端的 MiniMongo 数据库。

// client/main.js
import { Tasks } from '../imports/api/tasks.js';

Meteor.subscribe('tasks');

// 订阅完成后,客户端可以像操作 MongoDB 一样操作 MiniMongo
// 这个就有点类似vue的watchEffect, 它会在Tasks这个集合的数据变化时重新跑一下这个函数
Tracker.autorun(() => {
  const tasks = Tasks.find().fetch();
  console.log("Tasks from MiniMongo:", tasks);
});

在客户端,Meteor.subscribe('tasks') 订阅了服务器发布的任务数据,数据将存储在客户端的 MiniMongo 中,并且每次集合数据有变化时,都会自动更新。

4. 数据同步机制

Meteor 使用 DDP (Distributed Data Protocol) 协议来实现前后端的数据同步。DDP 是一种基于 WebSockets 的协议,用于在客户端和服务器之间传输数据。在客户端订阅数据时,DDP 会通过 WebSocket 通道持续地监听服务器端数据的变化,并将更新的数据推送给客户端。

客户端在 MiniMongo 中对数据的操作(如插入、删除、更新)同样通过 DDP 被传输到服务器。Meteor 的服务器会监听这些操作,更新 MongoDB 后再将结果反馈给客户端。整个过程是实时且双向同步的。

5. 插入和更新操作

由于 Meteor 的客户端和服务器端集合是同一个 API,当你在客户端执行插入、更新或删除操作时,这些变更会被自动同步到服务器端的 MongoDB 中。

服务端策略配置:

// 允许再server里面的代码,通过server.js引入
Tasks.allow({
   insert(user,doc){
     return !!user // 允许登录用户直接创建数据
   },
   remove(user,doc){
     return user===doc.userId // 允许删除属于自己的数据
   }
   // ..其它操作 update/upsert等
});

客户端插入数据:

// 前端client的代码
Tasks.insertAsync({
  text: "Learn MiniMongo",
  createdAt: new Date(),
});

当用户在客户端插入数据时,Meteor 会立即将这条数据添加到 MiniMongo 中,并通过 DDP 将操作传输到服务器,最终更新服务器端的 MongoDB 数据库。

客户端更新数据:

// 前端client的代码
Tasks.updateAsync(taskId, {
  $set: { completed: true },
});

客户端的更新操作同样会立即影响 MiniMongo,并通过 DDP 同步到服务器。

6. 数据冲突和一致性

Meteor 通过一种称为乐观 UI (Optimistic UI) 的机制来确保流畅的用户体验。客户端在提交数据变更时,先立即更新 MiniMongo 中的数据,再通过 DDP 同步到服务器。如果服务器的验证或其他操作失败,客户端会收到回滚通知,将数据恢复为正确状态。

示例:

  1. 客户端提交数据时,先直接更新 MiniMongo。
  2. 服务器接收数据后进行验证。
  3. 如果验证成功,服务器更新 MongoDB,并将最终结果反馈给客户端。
  4. 如果失败,客户端恢复为原始状态。

实际应用场景

MiniMongo 的这种前后端数据同步机制特别适用于以下应用场景:

  • 聊天应用: 消息可以实时从服务器同步到所有用户的浏览器。
  • 项目管理工具: 任务和进度的更新可以即时传播到所有在线用户。
  • 实时协作工具: 如共享文档、在线表格,用户的修改实时反映给其他用户。

总结

Meteor 的 MiniMongo 提供了一个强大的客户端数据库,让开发者可以轻松处理本地数据,同时通过 Meteor 的 DDP 实现了前后端数据的自动同步。通过这种机制,开发者能够快速构建出响应式、实时更新的 Web 应用,而不必手动编写复杂的同步逻辑。这一特性使得 Meteor 特别适合那些需要频繁更新数据、实时响应用户操作的应用场景。

目前计划是先介绍minimongo,然后将一讲它的pub/sub,然后是rpc,再就是其架构,最后就是分布实现简易版的前端和后端。虽然初学很简单,想应用还是需要掌握不少知识的,不然可能遇到性能、安全问题-尤其是没看完官方所有教程的时候,我在想要不要出个翻译版本,想想还是算了,完全的一对一翻译不太适合我…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2192957.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

TM1618数码管控制芯片使用共阳极数码管过程中的问题和解决办法

控制芯片的基本了解 相比于不用控制芯片的电路:这里带2根电源线和3个信号线,共使用了5根线,但可以控制4个8段数码管显示。若是电路直接控制4个8段数码管需要84113个接口,这对于MCU的珍贵引脚简直是浪费。 这里不会出现余晖效应也…

大花蔷薇T2T基因组-60

Multi-omics analyzes of Rosa gigantea illuminate tea scent biosynthesis and release mechanisms 多组学分析揭示了大花蔷薇茶香合成及释放机制 摘要 玫瑰是一种全球广泛栽培的重要观赏作物,用于香水生产。然而,由于缺乏茶玫瑰的参考基因组&#x…

鸿蒙开发(NEXT/API 12)【穿戴设备传感器获取】手机侧应用开发

手机侧应用可以通过Wear Engine获取穿戴设备上的传感器信息,并通过打开、关闭命令控制获取传感器数据。 使用传感器相关接口前,需要向手机侧用户申请获取对应权限的授权 传感器类型申请权限ECG、PPG、HR[HEALTH_SENSOR]人体传感器ACC、GYRO、MAG[MOTIO…

汇编DEBUG程序调用

工具 系统:Windows 11 应用:DOSBox 0.74-3 下载安装教程:本人写的《DOSBox下载安装(Windows系统 DOSBox 0.74-3)》 https://blog.csdn.net/just_do_it_sq/article/details/142715182?spm1001.2014.3001.5501 相关文…

C++ 算法学习——1.3 深度优先搜索

深度优先搜索:简单讲就是搜到某条路尽头,再掉头回溯搜其他的路。此中重点是尽头的判断,和对走过的路进行标记。 一般采用递归的写法,模板大致如下: DFS(node,visited):if node is in visited:returnadd node to visi…

通用mybatis-plus查询封装(QueryGenerator)

结果如下图所示 java类代码分别如下 1 package com.hdx.contractor.util.mybatis;import com.hdx.contractor.common.user.SecurityUser; import com.hdx.contractor.common.user.UserDetail; import com.hdx.contractor.util.query.oConvertUtils; import lombok.extern.slf…

OpenHarmony(鸿蒙南向开发)——轻量系统芯片移植案例(一)

往期知识点记录: 鸿蒙(HarmonyOS)应用层开发(北向)知识点汇总 鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~ 持续更新中…… 轻量带屏解决方案之恒玄芯片移植案例 本文章基于恒玄科技BES2600W…

【AI知识点】交叉验证(Cross-Validation)

交叉验证(Cross-Validation) 是机器学习中常用的一种模型评估方法,用于评估模型的性能和泛化能力。它通过在不同的训练集和验证集上多次训练和测试模型,从而有效地评估模型在未见数据上的表现,帮助防止模型的过拟合和欠…

【RTD MCAL 篇2】 K312 UART DMA

【RTD MCAL 篇2】 K312 UART DMA 一,文档简介二, 功能实现2.1 K312 MINIEVB硬件配置2.2 EB 配置2.2.1 Mcl module2.2.2 Mcu module2.2.3 Platform module2.2.4 Port module2.2.5 Uart module2.2.6 Rm module 2.3 main code 三,测试结果 一&am…

Clio——麻省理工学院增强机器人场景理解算法

概述 机器人感知长期以来一直受到现实世界环境复杂性的挑战,通常需要固定设置和预定义对象。麻省理工学院的工程师 已经开发了Clio这项突破性的系统可以让机器人直观地理解并优先考虑周围环境中的相关元素,从而提高其高效执行任务的能力。 了解对更智…

【Python】Marmir 使用指南:Python 驱动的电子表格生成器

Marmir 是一个由 Python 驱动的电子表格生成工具,专门用于将 Python 数据结构(如字典、列表等)转换为电子表格文件(如 Excel)。Marmir 的设计目标是提供比传统电子表格库(如 xlwt)更强大和灵活的…

ctf.bugku-备份是个好习惯

访问页面得到字符串 这串字符串是重复的; d41d8cd98f00b204e9800998ecf8427e 从前端、源码上看,除了这段字符串,没有其他信息;尝试解密,长度32位;各种解密方式试试; MD5免费在线解密破解_MD5在…

文件后缀名不见了怎么办?

有一天,突然有需要更改文件的后缀名,可奇怪的是文件只有名称,后缀不见了,这该如何修改呢? 第一步:打开此电脑,最上面一栏选择“查看” 第二步:将“文件扩展名”勾选上 第三步&…

会议时如何实现扫码签到?

如何实现扫码签到? 在现代活动管理中,签到环节是不可或缺的一部分。它不仅关系到活动的顺利进行,还涉及到参与者的体验。传统的签到方式往往耗时且效率不高,而随着技术的发展,扫码签到成为了一种高效且便捷的解决方案。…

用小学生可以理解的语言讲一下什么是大模型

好的,用小学生的语言来说,大模型就像是一个超级聪明的机器人老师,它懂得很多东西,可以帮助我们做很多事情。 1. **懂得很多**:大模型知道很多知识,就像一个巨大的图书馆,里面有很多书&#xff0…

【星汇极客】单片机竞赛之2024睿抗机器人大赛-火线速递赛道(持续更新)

前言 本人是一名嵌入式学习者,在大学期间也参加了不少的竞赛并获奖,包括但不限于:江苏省电子设计竞赛省一、睿抗机器人国二、中国高校智能机器人国二、嵌入式设计竞赛国三、光电设计竞赛国三、节能减排竞赛国三。 后面会经常写一下博客&…

归并排序:递归、非递归实现、文件排序(归并排序实现)

目录 归并排序递归实现 1.归并排序基本思想 2.归并排序单趟思路 3.代码思路步骤 3.1.归并排序实现思路步骤 3.2.总结 3.2.1.数组归并与链表归并的差异 (1)数组归并 (2)链表归并 (3)总结 3.2.2.归并排序的递归实现总结 4.归并排序递归实现代码 5.归并排序递归递归展…

用AI做电子萌宠,快速涨粉变现

今天给大家分享一个很热门的小副业—AI宠物视频 项目介绍 前一阵刷到一个萌宠账号,爆款率可真高,涨粉可真快呀。 28篇笔记涨粉3.2万,点赞更是达到了十几万。其中有6篇点赞上万。 至于究竟是不是AI其实没那么重要,重要的是&…

华为OD机试 - Excel单元格数值统计(Python/JS/C/C++ 2024 E卷 200分)

华为OD机试 2024E卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试真题(Python/JS/C/C)》。 刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,…

安可数据库产品目录

‌国家安可数据库产品目录包括以下主要产品‌: ‌华为GaussDB、openguass: 由华为云计算技术有限公司提供。‌金仓数据库管理系统:由中电科金仓(北京)科技股份有限公司提供。‌神通数据库管理系统:由天津神…