• Meteor

The DDP Package

From the class:  Introduction to DDP

In this video, I'm going to show you around the DDP package. It's the core Meteor package that's responsible for giving us Pub/Sub, and Meteor Methods, and the DDP wire protocol. To start us off, I want to show you what happens when we initially make an HTTP request to a Meteor application. So up top, I've got a simple Meteor app running, and I'm using a special package that will show us the requests that come off the wire.

We'll start off using cURL as the client. And the reason for that is so that you can see the text response that comes back from the server. And in a second we'll go over to the browser. There's a few things to notice here. Up top, there's been one HTTP request made to the Meteor server for the root URL. And that's what's returned this HTML down here. Notice we get it 200 status code back saying that the request was OK, and a bunch of headers.

And then in the HTML body down here, you see a bunch of script tags in the head section, one for each package that we're using. So here's underscore, for example. If I scroll down a little further, you can see the DDP package loaded here. So what's going to happen when we run this in the browser is that for each one of these script tags a new HTTP request will be made to the server for that resource.

And then, when the JavaScript file comes off the wire, it'll start executing. So nothing has executed yet. We've just gotten an HTML file back, which is just text. And once we get this DDP file, that's when the DDP magic will start to happen. Let's take a look in the browser. Now, we've gone to the same root URL in a browser, and notice the request logging looks a bit different.

So we get that initial HTML back, and that's shown here. But the browser is smarter than cURL. So for each one of these script tags, or link tag, or any kind of resource tag, it goes to the server and makes an additional HTTP request for each resource. And here's the DDP package being requested, and it's down here in the head section in the HTML. So then once that code loads in the browser, the browser is able to execute the JavaScript.

So here's the DDP JavaScript file right here, and it's been loaded up. And what that does is it opens up a persistent bidirectional connection with the server. And we can get a sense for that by going into the console and typing meteor.connection. And that will be the connection object that we have with our server, specifically, the DDP server. So let me step back here and show you a diagram of what's just happened.

So here's a simple diagram of what we just witnessed. We have a client, which was initially cURL, or it could be a browser, and then we have the Meteor server. And we make our initial request to the server using HTTP. We just request the root of the application. And what we get back is some HTML and some script tags. And then, the client can make an additional request for each one of those script tags.

And so finally, when we get to the DDP package, we load that file into the browser and start executing it. And so one of the things that the DDP client does is it opens up a connection with the server. And it's a special kind of connection. It's not like HTTP. It's a DDP connection over Web Sockets. So it's persistent, and it stays open for the entire lifespan of the application.

So the JavaScript that's running on the client is the DDP JS file that we saw. But there's also some DDP code running on the server. So both of this code is just JavaScript. And so, what we have here is the client and then some messages that get passed back and forth over the wire using the special wire protocol called DDP, which, as we saw, are just simple JSON messages.

And then we have a server that responds to these DDP messages and sends back some kind of response. And this can go in both directions. So the DDP package is responsible for giving us the client JavaScript code, the server JavaScript code, and then defining these messages that go back and forth. So what kind of features do we get from this? The first is just the ability to send messages back and forth, so the wire protocol itself.

And the second is we use this wire protocol and the code on the client and the server to get Publish and Subscribe, so Pub/Sub. And the third big thing that we get is Meteor Methods, are Meteor's implementation of remote procedure calls. So let me take you around to the actual package so you can see where these files live in the Meteor core. I've opened up the source code for the DDP package. It's located in the packages directory of the Meteor source.

And you can see it's a pretty big package, because it implements a lot of the functionality that we get in the Meteor framework. The file that I just opened up is Client Convenience, and I wanted to show you the code that's getting executed on the client when this DDP.js file loads up in the browser. So one of the lines in this application, or in this file rather, is meteor.connection equals DDP connect. And so, this is where we're actually connecting to the DDP server, the meteor DDP server, and keeping a connection open with it.

And that's stored in this meteor.connection object. I've opened up the package js file for the DDP package. And you can see there's a bunch of files here that run on the client, on the server, and in both places. And so, this will give you a sense of which code runs in which place.

Now that you have a better sense of what the DDP package is, I'd like to show you what the DDP server actually looks like as an object in JavaScript, and then what happens when a client opens a persistent connection with the DDP server.