首页 > 其他分享 >前端的全栈混合之路Meteor篇:分布式数据协议DDP深度剖析

前端的全栈混合之路Meteor篇:分布式数据协议DDP深度剖析

时间:2024-10-08 19:20:04浏览次数:11  
标签:DDP Server 全栈 Client Meteor msg id 客户端

本文属于进阶篇,并不是太适合新人阅读,但纯粹的学习还是可以的,因为后续会实现很多个ddp的版本用于web端、nodejs端、安卓端和ios端,提前预习和复习下。ddp协议是一个C/S架构的协议,但是客户端也同时可以是服务端。

什么是DDP?

DDP (Distributed Data Protocol) 是Meteor框架中使用的一种简单而强大的发布/订阅协议。它允许客户端和服务器之间进行实时数据同步,是Meteor实现实时应用的核心技术之一。

DDP的主要特点

  1. 传输层灵活性: DDP可以基于WebSocket,也可以通过HTTP长轮询等方式实现,例如使用SockJS在不支持WebSocket的环境中工作。
  2. JSON格式: 所有的消息都使用JSON格式,便于解析和调试。-需要注意的是,实际的传输是用的EJSON进行序列化和反序列,从而支持了更多的对象传输,详参考 前端的全栈混合之路Meteor篇(四):支持自定义对象序列化的EJSON介绍
  3. 发布/订阅模型: 允许客户端订阅服务器端的数据集,并在数据变化时接收更新。它的应用例子见文章 前端的混合全栈之路Meteor篇(三):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
  4. 方法调用: 客户端可以调用服务器端的方法,实现远程过程调用(RPC)。基于它的应用例子见文章 前端的全栈混合之路Meteor篇(二):RPC方法注册及调用
  5. 实时更新: 当订阅的数据发生变化时,服务器会自动将更新推送给客户端。这部分是和发布订阅关联的,本文会涉及到底层实现
  6. 会话管理: 使用会话ID来维护客户端和服务器之间的连接状态。

DDP协议的详细过程

1. 握手和连接建立

  1. 客户端发送 connect 消息,可能包含版本信息和会话ID(如果是重连)。
  2. 服务器回复 connected 消息,包含新的会话ID。
  3. 如果是重连,服务器会恢复之前的订阅和方法调用状态。

2. 保活和心跳机制

  1. 客户端定期(通常每45秒)发送 ping 消息。
  2. 服务器回复 pong 消息。
  3. 如果超时未收到 pong,客户端可能会尝试重新连接。

3. 方法调用

  1. 客户端发送 method 消息,包含方法名和参数。
  2. 服务器执行方法,可能会触发数据变更。
  3. 服务器发送 result 消息,包含方法执行结果或错误信息。
  4. 如果方法导致数据变更,服务器会发送相应的 addedchangedremoved 消息。

4. 发布和订阅

  1. 客户端发送 sub 消息,包含订阅名称和参数。
  2. 服务器开始发送相关数据:
    • added 消息用于新增的文档
    • changed 消息用于更新的文档
    • removed 消息用于删除的文档
  3. 服务器发送 ready 消息,表示初始数据集已发送完毕。
  4. 之后,服务器会持续发送 addedchangedremoved 消息以保持数据同步。
  5. 客户端可以发送 unsub 消息来取消订阅。

DDP消息类型详解

  1. connect: 客户端发起连接请求

    {"msg": "connect", "version": "1", "support": ["1", "pre2", "pre1"]}
    
  2. connected: 服务器确认连接成功

    {"msg": "connected", "session": "RandomSessionId123"}
    
  3. ping/pong: 心跳消息

    {"msg": "ping", "id": "unique-id-123"}
    {"msg": "pong", "id": "unique-id-123"}
    
  4. sub/unsub: 订阅和取消订阅

    {"msg": "sub", "id": "random-id", "name": "publicationName", "params": []}
    {"msg": "unsub", "id": "random-id"}
    
  5. added/changed/removed: 数据更新通知

    {"msg": "added", "collection": "collectionName", "id": "documentId", "fields": {}}
    {"msg": "changed", "collection": "collectionName", "id": "documentId", "fields": {}}
    {"msg": "removed", "collection": "collectionName", "id": "documentId"}
    
  6. ready: 初始数据加载完成通知

    {"msg": "ready", "subs": ["subscription-id-1", "subscription-id-2"]}
    
  7. method/result: 方法调用和结果

    {"msg": "method", "method": "methodName", "params": [], "id": "call-id"}
    {"msg": "result", "id": "call-id", "result": {} }
    

DDP全生命周期时序图

可使用mermaid进行预览,时序图code如下

sequenceDiagram
    participant Client
    participant Server

    %% 握手和连接建立
    Client->>Server: connect {version: "1", support: ["1", "pre2", "pre1"]}
    Server-->>Client: connected {session: "RandomSessionId123"}

    %% 发布订阅
    Client->>Server: sub {id: "sub1", name: "posts", params: []}
    Server-->>Client: added {collection: "posts", id: "post1", fields: {...}}
    Server-->>Client: added {collection: "posts", id: "post2", fields: {...}}
    Server-->>Client: ready {subs: ["sub1"]}

    %% 实时更新
    loop Real-time updates
        Server-->>Client: changed {collection: "posts", id: "post1", fields: {...}}
        Server-->>Client: added {collection: "posts", id: "post3", fields: {...}}
        Server-->>Client: removed {collection: "posts", id: "post2"}
    end

    %% 方法调用
    Client->>Server: method {method: "addPost", params: [...], id: "m1"}
    Server-->>Client: added {collection: "posts", id: "post4", fields: {...}}
    Server-->>Client: result {id: "m1", result: {...}}

    %% 取消订阅
    Client->>Server: unsub {id: "sub1"}

    %% 心跳机制
    loop Keep-alive
        Client->>Server: ping {id: "ping1"}
        Server-->>Client: pong {id: "ping1"}
    end

时序图预览
ddp全生命周期时序图

DDP在Meteor中的应用

  1. 实时数据同步: 当服务器端的数据发生变化时,客户端可以立即收到更新。
  2. 用户界面响应: 通过DDP,用户界面可以实时反映数据的变化,提供流畅的用户体验。
  3. 分布式计算: 客户端可以调用服务器端的方法,实现复杂的计算或数据处理。
  4. 多客户端协作: 多个客户端可以同时订阅相同的数据集,实现实时协作功能。
  5. 离线支持: 通过本地缓存和重连机制,DDP可以支持离线操作和数据同步。

总结

DDP协议是Meteor框架的核心组件之一,它为实时Web应用提供了强大而灵活的数据同步机制。通过使用DDP,开发者可以轻松构建响应迅速、实时更新的现代Web应用,同时保持了在不同网络环境下的适应性。

标签:DDP,Server,全栈,Client,Meteor,msg,id,客户端
From: https://blog.csdn.net/m0_38015699/article/details/142754699

相关文章

  • P3527 MET-Meteors 题解
    Solution单次二分:二分时间,做这个时间前的所有操作,然后线性统计。注意到可以整体二分,直接整体二分是\(O(n\log^2n)\)。考虑扫描序列,用线段树维护每个时间段内该位置的增加值,差分一下可以实现。将这棵线段树持久化一下,一个国家所有位置同时二分即可\(O(n\logn)\),可惜空间太......
  • 前端后端以及全栈的区别
    一.前端前端概念:前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。前端特点:前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现。前端技术:HTMLCSSJavaScript二.后端后端概念:多数后端开发......
  • Spring Boot电商系统:购物商城的全栈开发
    摘要本课题是根据用户的需要以及网络的优势建立的一个基于SpringBoot的网上购物商城系统,来满足用户网络购物的需求。本网上购物商城系统应用Java技术,MYSQL数据库存储数据,基于SpringBoot框架开发。在网站的整个开发过程中,首先对系统进行了需求分析,设计出系统的主要功能......
  • 打造全栈云自主可控体系,天翼云构筑数字安全屏障!
    2024年国家网络安全宣传周期间,云计算服务安全闭门会在广州同期召开。会议围绕如何解决当前云计算建设、采购、管理、使用各环节存在的突出安全问题,更好地发挥云计算服务安全评估制度作用等重要议题开展交流。天翼云科技有限公司副总经理、首席网络安全官广小明受邀参会并发表......
  • 重磅!阿里云可观测产品家族全新升级,AI +数据双驱动,打造全栈可观测体系
    引言:近日,阿里云可观测产品家族正式发布云监控2.0,隶属产品日志服务SLS、云监控CMS、应用实时监控服务ARMS迎来重磅升级。借助全新升级的一站式全景接入、统一观测图谱以及AI增强的跨域智能洞察能力。同时,为了帮助企业与开发者更从容地面对AI创新,阿里云正式发布开箱即用的A......
  • 重磅!阿里云可观测产品家族全新升级,AI +数据双驱动,打造全栈可观测体系
    引言:近日,阿里云可观测产品家族正式发布云监控2.0,隶属产品日志服务SLS、云监控CMS、应用实时监控服务ARMS迎来重磅升级。借助全新升级的一站式全景接入、统一观测图谱以及AI增强的跨域智能洞察能力。同时,为了帮助企业与开发者更从容地面对AI创新,阿里云正式发布开箱即用的......
  • 【蓝桥杯】2024.9.22算法赛——灵魂问题\全栈项目小组(C++)
    一、灵魂问题题目灵魂问题题目分析1.要求输出一个整数2.题目在玩脑筋急转弯,关键句子标出来了——糖什么的根本不重要。所以咖啡不加糖,答案是0!!!代码#include<iostream>usingnamespacestd;intmain(){ cout<<0; return0;}二、全栈项目小组题目全栈项目小组......
  • 如何掌握 MERN 堆栈:全栈开发人员指南
    MERN堆栈(MongoDB、Express.js、React.js、Node.js)已成为全堆栈Web开发最流行的技术之一。作为一名开发人员,学习MERN堆栈可以打开一个充满机遇的世界,并让您走上构建强大的动态Web应用程序的道路。以下是您如何掌握MERN堆栈并将您的全堆栈开发技能提升到新水平的方法。了解......
  • 反思我的旅程:构建初学者房地产列表全栈应用程序
    当我第一次开始学习python时,我不知道这段旅程会带我走向何方。我记得深入研究python教程,努力学习循环、函数和面向对象编程等基本概念。快进到今天,我使用flask后端和react前端的组合构建了一个全栈房地产列表应用程序。这个项目不仅是一个挑战,也是一次令人难以置信的学习......
  • 【H2O2|全栈】关于CSS(2)CSS基础(二)
    目录CSS基础知识前言准备工作选择器的组合盒模型示例网页代码后代选择器亲代选择器相邻兄弟选择器后续兄弟选择器多个元素选择器 通配符选择器优先级其他应用伪类锚链接的属性列表的属性list-style-typelist-style-positionlist-style-image伪元素表格......