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

Make simple music program with beep(freq, duration) with Pascal

Pascal is my first programing language when I have studied in high school. It was really exciting for me. :) The Pascal programming language was created by Niklaus Wirth in 1970. It was named after Blaise Pascal, a famous French Mathematician. It was made as a language to teach programming and to be reliable and efficient. Pascal has since become more than just an academic language and is now used commercially . I tried to make a simple music program by using Lazarus IDE on MS Window 7, 64-bit. It frustrated me a few times how difficulty to use Sound command to make a sound. Sound did not work on my compiler and my platform anymore. So far, I just could use beep(freq, duration) from window unit to implement my work. Here is my code. ;) program mysong; uses Windows, crt; const C: Integer = 512; { x = A * EXP(LN(2)/12)} C_: Integer = 542; D: Integer = 574; D_: Integer = 608; E: Integer = 644; F: Integer = 682; F_: Integer = 723; G: Integer = ...

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: ...

How Would You Answer These Typical Interview Questions?

I have joined several job interviews with candidates at my current company. As a technical supporter, my attention was mainly focused on specific technical points rather than behavioral ones. However, I saw that these following typical questions were rarely missed for any interviews. In fact, there is a meaning behind of the questions. The concern is candidates should focus on answering the right things that interviewers really want to know. Take a look! Introduce about yourself It is "What and why are you fit for this job?". So, it is good to go "Talking too much about your hobbies."? I would say "We don't care about your hobbies much". ;) Why do you want to find a new job? It is "Why this job are interesting you?". So, it is good to go "Talking about something negative like 'I hate my boss/leader'"? I would say "Who wants to work with a negative person?" What did you do in your current j...

Sharing a virtualenv across several Python projects using Pipenv

There is a standard library for all projects in Python. However, several projects don’t always have the same dependencies all the time. That is where virtual environments come to play. You can follow this official document to use two separated tools virtualenv and pip to fulfill that need. My preferred alternative is to use pipenv . Pipenv is easy to use and convenient. The following are my steps to make a shared virtualenv for my all projects which requires the same dependencies. Step 1. Create an isolated virtualenv. python -m venv my-shared-env Step 2. Create a symbolic link to the created virtualenv. cd project_1 ln -s ~/.local/share/virtualenvs/my-shared-env .venv I have encountered the following issue at step 1. FileNotFoundError: [Errno 2] No such file or directory: '{my_project_path}/.venv/bin/pip': '{my_project_path}/.venv/bin/pip' The root cause was I tried to create virtualenv by running pipenv install and renaming the generated virtualenv to ...

Installing NGINX on macOS

I have heard of a lot of NGINX recently. One of them was it can help for security issues; for sure, it much be more. It so happens that our team has got a ton of user stories from a security audit. It's time to delve into it. What is NGINX? In order to get a basic idea and have some fun , I've just picked some available posts from my favorite Vietnamese blogger communities as below: https://kipalog.com/posts/Cau-hinh-nginx-co-ban---Phan-1 https://viblo.asia/hoang.thi.tuan.dung/posts/ZabG912QGzY6 NGINX (pronounce: Engine-X) is a web server (comparing to IIS, Apache). It can be used as a reverse proxy ( this is what I need for security issues with configuration ), load balancer and more. How to get started? I found the below path for learning NGINX by googling "learn nginx": https://www.quora.com/What-are-some-good-online-resources-to-learn-Nginx In this post, I only went first step. This is installing NGINX on macOS and taking a first look at the confi...

vhandit

Search This Blog