What the heck is Meteor DDP?

I was using Meteor for my messenger project. I was so curious about the real time connection. I wanted to know how exactly this mechanism works. In this post, I will go through the DDP Specification, an overview of WebSocket, and a simple demo about how to subscribe a publication of Rocket.Chat (containing a DDP server) from an external webpage.

At a glance, I knew that Meteor invented a protocol called DDP which uses for handling real time connection. So then, what is DDP?

"DDP (Distributed Data Protocol) is the stateful WebSocket protocol that Meteor uses to communicate between the client and the server." [1]

All right! Why does DDP matter?

"DDP is a standard way to solve the biggest problem facing client-side JavaScript developers: querying a server-side database, sending the results down to the client, and then pushing changes to the client whenever anything changes in the database". [2]

In order to understand deeply the protocol, I decided to explore its specification, and then took a look at its implementation.

The Specification

The official specification is easily found here. It is quite simple! I tried to draw a diagram (sequence-liked) to visualize its flow.

The Implementation

As its definition, DDP is a WebSocket protocol. Hence, I needed to understand WebSocket protocol as well. A normative way to learn a protocol is to read it RFC. The WebSocket Protocol is specified under RFC-6455. After that, I followed to implement a WebSocket server with Node.js. I was able to understand how WebSocket protocol works.

Then, I took a look into some implementations of DDP available on the net. Here was an example:

- DDP client

- DDP server

I tried to simplify an implementation of DDP by writing a pseudo code as below:

Practice

Assignment: “Obtaining Active Users of Rocket.Chat instance for a webpage in real time”

As my understanding so far, I needed to use WebSocket with DDP, so that I could:

- Maintain real time connection via WebSocket

- Communicate with Meteor via DDP

With node-ddp-client, I could make a connection with DDP server of Meteor, but the implementation was only in server side. I decided to implement a similar stuff, but in client side, which can be executed in browsers.

Check out my project here

------------

Reference:

[1]. https://github.com/meteor/meteor/tree/devel/packages/ddp

[2]. https://blog.meteor.com/introducing-ddp-6b40c6aff27d?gi=65983e20e448

[3]. https://hackernoon.com/implementing-a-websocket-server-with-node-js-d9b78ec5ffa8

[4]. https://github.com/hharnisc/node-ddp-client

Comments

Math fundamentals and Katex

It was really tough for me to understand many articles about data science due to the requirements of understanding mathematics (especially linear algebra). I’ve started to gain some basic knowledges about Math by reading a book first. The great tool Typora and stackedit with supporting Katex syntax simply helps me to display Math-related symbols. Let’s start! The fundamental ideas of mathematics: “doing math” with numbers and functions. Linear algebra: “doing math” with vectors and linear transformations. 1. Solving equations Solving equations means finding the value of the unknown in the equation. To find the solution, we must break the problem down into simpler steps. E.g: x 2 − 4 = 4 5 x 2 − 4 + 4 = 4 5 + 4 x 2 = 4 9 x = 4 9 ∣ x ∣ = 7 x = 7 or x = − 7 \begin{aligned} x^2 - 4 &= 45\\ x^2 - 4 + 4 &= 45 + 4\\ x^2 &= 49\\ \sqrt{x}&=\sqrt{49}\\ |x| &= 7\\ x=7 &\text{ or } x=-7 \end{aligned} x 2 − 4 x 2 − 4 + 4 x 2 x ∣ x ∣ x = 7 = 4 5 = 4 ...

Junit - Test fails on French or German string assertion

In my previous post about building a regex to check a text without special characters but allow German and French . I met a problem that the unit test works fine on my machine using Eclipse, but it was fail when running on Jenkins' build job. Here is my test: @Test public void shouldAllowFrenchAndGermanCharacters(){ String source = "ÄäÖöÜüß áÁàÀâÂéÉèÈêÊîÎçÇ"; assertFalse(SpecialCharactersUtils.isExistSpecialCharater(source)); } Production code: public static boolean isExistNotAllowedCharacters(String source){ Pattern regex = Pattern.compile("^[a-zA-Z_0-9_ÄäÖöÜüß áÁàÀâÂéÉèÈêÊîÎçÇ]*$"); Matcher matcher = regex.matcher(source); return !matcher.matches(); } The result likes the following: Failed tests: SpecialCharactersUtilsTest.shouldAllowFrenchAndGermanCharacters:32 null A guy from stackoverflow.com says: "This is probably due to the default encoding used for your Java source files. The ö in the string literal in the J...

Styling Sort Icons Using Font Awesome for Primefaces' Data Table

So far, Primefaces has used image sprites for displaying the sort icons. This leads to a problem if we want to make a different style for these icons; for example, I would make the icon "arrow up" more blurry at the first time the table loading because I want to highlight the icon "arrow down". I found a way that I can replace these icons with Font Awesome icons. We will use "CSS Pseudo-classes" to achieve it. The hardest thing here is that we should handle displaying icons in different cases. There is a case both "arrow up" and "arrow down" showing and other case is only one of these icons is shown. .ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s { background-image: none; margin-left: 5px; font-size: 1.1666em; position: relative; } .ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s:not(.ui-icon-triangle-1-s)::before { content: "\f106"; font-family: "FontAwesome"; position: ...

Building Axon.ivy Projects on Bitbucket Pipelines

Read me if you don't know what Axon.ivy (Ivy) is. Motivation - Ivy projects are designed to be built on a continuous integration (CI) server like Jenkins - Today, Bitbucket supports for CI with Bitbucket Pipelines - We're using Bitbucket. Then, why not? It must be very cool and convenient for us if we can centralize our CI and VCS (version control system) tools in one place. Here is an approach We have to use a maven plugin called project-build-plugin to build ivy projects. This plugin requires an instance of Ivy engine during building time. Bitbucket Pipelines allows us to specify our own docker image as a build environment. What we need to do is to prepare our docker image with needed stuffs such as JDK, Maven, Ivy engine, etc. Step 1. Prepare Docker images For testing purpose, I already created two docker images: Maven and Axon.ivy engine. They are now available on Docker Hub This image for Maven using Oracle JDK 8 This image for Axon.iv...

Java Core - Top 10 Questions Every Developer Should Know

#RandomlyPickedByMe What is the difference between Javascript and Java? Difference between StringBuilder and StringBuffer? Why do I get "SomeType@a3fde" when I print my code? Why is String immutable? Why "equals" method when we have "==" operator? Is List<Dog> a subclass of List<Animal>? Why shouldn't we use raw type? Is Java “pass-by-reference” or “pass-by-value”? What's the advantage of a Java enum versus a class with public static final fields? Why "double x = 0.1 + 0.2" and result of print(x) is 0.30000000000000004? 1. What is the difference between Javascript and Java? Holy crap! (Vietnamese: Thế quái nào lại có câu hỏi ngớ ngẩn vậy chứ?) "Java and Javascript are similar like Car and Carpet are similar." - Greg Hewgill (on StackOverflow) 2. Difference between StringBuilder and StringBuffer String is immutable. StringBuilder and StringBuffer are mutable. StringBuffer is thread-safe. String...

vhandit

Search This Blog