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

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.mzph.cn/bicheng/55425.shtml

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

相关文章

overleaf的使用[4]:图表与插图管理

菜鸟:老鸟,我最近在用Overleaf写论文,但在插入图表和插图时总是遇到问题。你能帮帮我吗? 老鸟:当然可以!图表和插图在LaTeX中是非常重要的部分。你有没有试过用 figure 和 table 环境? 菜鸟&a…

宁夏众智科技OA办公系统存在SQL注入漏洞

漏洞描述 宁夏众智科技OA办公系统存在SQL注入漏洞 漏洞复现 POC POST /Account/Login?ACTIndex&CLRHome HTTP/1.1 Host: Content-Length: 45 Cache-Control: max-age0 Origin: http://39.105.48.206 Content-Type: application/x-www-form-urlencoded Upgrade-Insecur…

Spring Boot项目中使用MyBatis

在Spring Boot项目中使用MyBatis可以极大地简化配置过程,因为Spring Boot提供了很多自动化配置的功能。以下是一个简单的指南,介绍如何在Spring Boot项目中使用MyBatis。 1. 添加依赖 首先,你需要在pom.xml文件中添加MyBatis和MyBatis-Spri…

【在Linux世界中追寻伟大的One Piece】System V共享内存

目录 1 -> System V共享内存 1.1 -> 共享内存数据结构 1.2 -> 共享内存函数 1.2.1 -> shmget函数 1.2.2 -> shmot函数 1.2.3 -> shmdt函数 1.2.4 -> shmctl函数 1.3 -> 实例代码 2 -> System V消息队列 3 -> System V信号量 1 -> Sy…

【MySQL 06】表的增删查改

目录 1.insert 增添数据 1.1单行数据 全列插入 1.2多行数据 指定列插入 1.3插入否则更新 1.4.插入否则替换 2.select查找 2.1 全列查找 2.2指定列查找 2.3查询字段为表达式 2.4为查询结果指定别名 2.5 结果去重 2.6 where条件查询 2.7结果排序 2.8.筛选分页结果…

Python中深拷贝和浅拷贝

# 在Python中,浅拷贝(shallow copy)和深拷贝(deep copy)是两种不同的复制方法,主要用于复制复杂对象(如列表、字典、集合等)。 # # 浅拷贝: # # 浅拷贝会创建一个新的对象…

侧边菜单的展开和折叠

环境准备&#xff1a;Vue3Element-UI Plus <script setup> import {ref} from "vue";// 是否折叠菜单&#xff0c;默认折叠 const isCollapse ref(true)// 退出登录 function logout() {alert(退出) }// 个人中心 function profile() {alert(个人中心) } <…

Java后端面试题+下一篇答案+实况场景题

uu们大家好&#xff01;市面上面试题很多&#xff0c;这边汇总并更新一下java后端面试的题目&#xff0c;助大家早日斩下心仪的offer&#xff01;&#xff01;&#xff08;下次跟新场景题...等我多碰几次壁...哈哈哈哈哈&#xff09; 这边放题目&#xff0c;下一篇跟新所有另面…

设计模式、系统设计 record part02

软件设计模式&#xff1a; 1.应对重复发生的问题 2.解决方案 3.可以反复使用 1.本质是面向对象 2.优点很多 1.创建型-创建和使用分离 2.结构型-组合 3.行为型-协作 571123种模式 UML-统一建模语言-Unified Modeling Language 1.可视化&#xff0c;图形化 2.各种图&#xff08;9…

[Unity Demo]从零开始制作空洞骑士Hollow Knight第十一集:制作法术系统的回血机制和火球机制

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、制作法术系统的回血机制 1.制作动画以及使用UNITY编辑器编辑2.使用代码和PlaymakerFSM制作回血机制二、制作法术系统的火球机制 1.制作动画以及使用UNITY编…

鸿蒙开发知识点速记全解

入门 1、API涵盖应用框架、系统、媒体、图形、应用服务、AI六大领域。 应用框架相关Kit开放能力&#xff1a;Ability Kit&#xff08;程序框架服务&#xff09;、ArkUI&#xff08;方舟UI框架&#xff09;等。系统相关Kit开放能力&#xff1a;Universal Keystore Kit&#xf…

测试管理新增视图与高级搜索功能,测试计划支持一键生成缺陷详情,MeterSphere开源持续测试工具v3.3版本发布

2024年9月29日&#xff0c;MeterSphere开源持续测试工具正式发布v3.3版本。 在这一版本中&#xff0c;接口测试方面&#xff0c;接口导入功能支持导入Postman、JMX、HAR和MeterSphere格式的文件&#xff0c;接口场景的自定义请求步骤支持cURL快捷导入&#xff1b;测试管理方面…

VUE3.5版本解读

官网&#xff1a;Announcing Vue 3.5 | The Vue Point 2024年9月1日&#xff0c;宣布 Vue 3.5“天元突破&#xff1a;红莲螺岩”发布&#xff01; 反应系统优化 在 3.5 中&#xff0c;Vue 的反应系统经历了另一次重大重构&#xff0c;在行为没有变化的情况下实现了更好的性能…

HarmonyOS/OpenHarmony 如何将rawfile中文件复制到沙箱中

关键词&#xff1a;h5离线加载、HarmonyOS、OpenHarmony、文件操作、复制、解压 当下有一个场景&#xff0c;需要离线加载 h5离线资源zip包&#xff0c;并实现资源包的动态更新&#xff0c;那么仅靠 $rawfile并不能实现该功能&#xff0c;那么我们该如何实现&#xff1f; 我们…

在线代码编辑器

在线代码编辑器 文章说明前台核心代码后台核心代码效果展示源码下载 文章说明 采用Java结合vue3设计实现的在线代码编辑功能&#xff0c;支持在线编辑代码、运行代码&#xff0c;同时支持导入文件&#xff0c;支持图片识别&#xff0c;支持复制代码&#xff0c;可将代码导出为图…

【项目开发】跨专业合作平台实战(附源码)

原创文章,禁止转载。 文章目录 项目背景+项目需求开发语言及环境数据库构建项目介绍+项目展示1、用户注册界面(register.php)2、用户登录界面(login.php)3、项目大厅界面(project_hall.php)4、标签详情界面(tag_detail.php)5、项目详情界面(project_detail.php)6、发起招募界面…

【mod分享】侠盗猎魔2冬日mod,贴图高清化,增加下雪场景,支持光追,并且增加红色霓虹灯

今天小编为大家带来一个新的游戏mod&#xff0c;这次mod主要是修改了游戏《侠盗猎魔2》&#xff0c;我给游戏增加了下雪的场景&#xff0c;并且增加了红色的霓虹灯&#xff0c;整体让游戏沉浸在一种诡异的圣诞气氛中。并且我还提高了游戏材质的分辨率。更多细节需要玩家自己探索…

[高频题]Leetcode 815 Bus route

题意 给定数组routes&#xff0c;代表每一辆车能够到达哪些车站&#xff0c;求最少需要多少次中转我才能够到达终点 https://leetcode.com/problems/bus-routes/description/ routes [[1,2,7],[3,6,7]], source 1, target 6 answer 2 理论上我应该建立车站到车站&#xf…

【STM32开发笔记】移植AI框架TensorFlow到STM32单片机【下篇】

【STM32开发笔记】移植AI框架TensorFlow到STM32单片机【下篇】 一、上篇回顾二、项目准备2.1 准备模板项目2.2 支持计时功能2.3 配置UART4引脚2.4 支持printf重定向到UART42.5 支持printf输出浮点数2.6 支持printf不带\r的换行2.7 支持ccache编译缓存 三、TFLM集成3.1 添加tfli…

设计模式-策略模式-200

优点&#xff1a;用来消除 if-else、switch 等多重判断的代码&#xff0c;消除 if-else、switch 多重判断 可以有效应对代码的复杂性。 缺点&#xff1a;会增加类的数量&#xff0c;有的时候没必要为了消除几个if-else而增加很多类&#xff0c;尤其是那些类型又长又臭的 原始代…