前端的全栈混合之路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.rhkb.cn/news/440228.html

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

相关文章

Django学习笔记二:数据库操作详解

Django框架提供了一个功能强大的ORM(对象关系映射)系统,使得开发者可以使用Python代码来操作数据库,而无需编写复杂的SQL语句。以下是Django数据库操作的一些基本概念和方法: 模型定义 在Django中,模型是…

两数相除(c语言)

1.//给你两个整数,被除数 dividend 和除数 divisor。将两数相除,要求 不使用 乘法、除法和取余运算。 //整数除法应该向零截断,也就是截去(truncate)其小数部分。 // 例如,8.345 将被截断为 8 ,…

内网穿透工具ngrok

写作背景 最近在公司内购淘了个MAC电脑,想当个Linux服务器起Docker搭建环境用,现在问题是如何在公网上能访问到MAC这个机器上的资源。 之前写了一篇文章Mac当作云服务器,你真的会搞吗 最近想重启一下这台老伙计了,发现ngrok还是…

视频加字幕用什么软件最快?12款工具快速添加字幕!

对于大多数同学来讲,剪辑中比较头疼的就是如何给视频加字幕和唱词啦,特别是用Pr或者FCXP等专业剪辑软件,加字幕也是特别费时的,哪怕是有批量添加的功能orz... 虽然关于这方面的内容已经很多啦,但是真正全面的内容还特…

VTC视频时序控制器,TPG图像测试数据发生器,LCD驱动——FPGA学习笔记19

详情可以见LCD篇 LCD彩条显示——FPGA学习笔记10_依次显示红绿蓝三个通道-CSDN博客 一、VTC简介 Video Timing Controller 缩写 VTC 是我们在所有涉及 FPGA 图像、 FPGA 视频类方案中经常用到的一种用于产生视频时序的控制器。 本课以 VGA 为切入点, 学习视频传输…

[Linux]:线程(三)

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ 🎈🎈养成好习惯,先赞后看哦~🎈🎈 所属专栏:Linux学习 贝蒂的主页:Betty’s blog 1. POSIX 信号量 1.1 信号量的概念 为了解决多执行流访问临界区&#xff0c…

基于SpringBoot+Vue的酒店客房管理系统

作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏:…

[SAP ABAP] 程序调用

示例数据 学生表(ZDBT_STU_437) 程序: Z437_TEST_20241006 代码如下所示 REPORT Z437_TEST_20241006.* 创建跟表或结构同名的工作区 TABLES: zdbt_stu_437.SELECTION-SCREEN BEGIN OF BLOCK b1 WITH FRAME TITLE TEXT-001.PARAMETERS: p_1 TYPE c LENGTH 4.SELECT-O…

Kali或Debian系统安装JDK1.8保姆级教程

一、下载JDK1.8 先到Oracle的官网下载JDK1.8 Java Archive | Oraclehttps://www.oracle.com/java/technologies/downloads/archive/Java Archive Downloads - Java SE 8

CUDA、Pytorch、Pycharm的安装与配置

文章目录 一、CUDA安装1.检查英伟达驱动支持的最高CUDA版本 二、Pytorch的安装与环境配置1.选择是下载CPU版本还是GPU版本2.上Pytorch官网找到安装命令3.运行指令(1)CPU版本(2)GPU版本 4.验证5.安装其他所需模块(0)安装torch(1)安装Matplotlib(2)安装 pillow(可能an…

OSPF的不规则区域

1.远离骨干非骨干区域 2.不连续骨干 解决方案 tunnel ---点到点GRE 在合法与非ABR间建立隧道,然后将其宣告于OSPF协议中; 缺点:1、周期和触发信息对中间穿越区域造成资源占用(当同一条路由来自不同区域,路由器会先…

javaScript基础(8个案例+代码+效果图)

目录 1.js常用的输出语句 案例:js初体验 1.代码 2.效果 2.js命名规则 3.js赋值 var 关键字声明变量 案例:交换两个变量的内容 完整代码 效果 4.js数据类型 布尔类型 整数 浮点数 字符串 空型 未定义型 5. 数据检测 6.算术运算符 7.比较运算符 案例:计算圆周长和面积 1.代码 2.…

【游戏模组】重返德军总部2009高清重置MOD,建模和材质全部重置,并且支持光追效果,游戏画质大提升

各位好,今天小编给大家带来一款新的高清重置MOD,本次高清重置的游戏叫《重返德军总部2009》2009年发布,我相信很多玩家已经玩过了,如果你还没有玩过我也可以和你简单介绍一下剧情,这款游戏故事背景接续在《重返德军总部…

Cilium-实战系列-(一)Cilium-安装与部署

前言: 1、首先说一下这篇实战系列和Cilium-ebpf系列文章为 “一文一武”,一个注重点解,一个注重实际操作。 Cilium ebpf 系列文章-什么是ebpf?(一)_clium ebpf-CSDN博客文章浏览阅读419次。一、We Create a containe…

ElasticSearch备考 -- Multi field

一、题目 Create the index hamlet_2 with one primary shard and no replicas Copy the mapping of hamlet_1 into hamlet_2, but also define a multi-field for speaker. The name of such multi-field is tokens and its data type is the (default) analysed string Reind…

[git] github管理项目之环境依赖管理

导出依赖到 requirements.txt pip install pipreqs pipreqs . --encodingutf8 --force但是直接使用pip安装不了torch,需要添加源!! pip install -r requirements.txt -f https://download.pytorch.org/whl/torch_stable.htmlpython 项目中 …

基于VirtualBox和Ubuntu的虚拟环境搭建

VirtualBox简介 VirtualBox 是一款开源虚拟机软件。 是由德国 Innotek 公司开发,由Sun Microsystems公司出品的软件,使用Qt编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。简单易用,可虚拟的系统包括Windows&…

JavaScript-下篇

上篇我们学习了,一些基础语法和函数,现在我们学习下篇,主要包括,对象和事件。而对象又包括,数组Arrays,String字符串,BOM,DOM等 JS对象 Arrays数组 数组是一种特殊的对象,用于存储…

子比主题美化 – 添加天气教程

前言 经常看到很多的网站顶部或者侧边有显示天气状态的小条幅,看着也美观,寻思着也在自己的小站上显示天气。大体的思路是能识别用的ip地址来确认位置然后以代码形式在前台显示出。 经过在百度上搜索一番,发现一个很不错的天气api&#xff…

Java之二叉树的基本操作实现

1. 模拟实现二叉树前,我们要先表示树,首先定义一个内部类,当作二叉树节点 static class TreeNOde{char val;//存放二叉树的值TreeNOde left;//指向左子树的引用TreeNOde right;//指向右子树的引用//构造方法,用于实例化树的节点p…