• Meteor

The Connection Data Store

From the class:  Publish Subscribe in Meteor

We've talked a lot about what happens when we subscribe to a Publish function like Items, and how those messages get sent down to the client as DVP messages, like the Added message and the Ready message. But what happens to these messages when they get to the client? In this video, we'll explore just that.

For the rest of the video, on the right, I'll have the browser. And this will be the client browser, not the one used to debug the server. And on the left, I'll have my code.

Normally, you'll create a collection that will exist on both the client and the server. For example, we might create a collection called Items. And we do that by calling a New with the Meteor.collection and giving it a name. What this actually does under the hood when we create this new collection is it registers itself with the connection.

In this video, we're just going to do that directly so you can see what's happening. In the client, what I can do is get the DVP connection and call a function on it named Register Store. And then, we give the store a name. In this case, we'll call it Items. And then an object, which will have some methods that we need to define. So a store will be the minimum API required to interface between a local data cache and the Live Data connection.

So there's a couple of methods that we'll define in the store. And we'll even come back to this when we talk about RPC. But to get us started, we're just going to look at three methods.

The first is called Begin Update. And it takes a batch size and a function called Reset, in case we're resetting the whole store. And the second function called Update. And the Update function will get called with a message object, which we'll look at more carefully in a second. And finally, End Update.

So when we get an update off the wire, what's going to happen is what's called a transactional update. And so first, the Begin Update function will get called. And then, the actual Update function with the message off of the DVP wire. And then, End Update when we're done.

To get a sense of what's happening, let's create some console logs. I'm going to say this is Begin Update. And I'll pass the batch size. And when we get an update, I'll just print to the console "update" and a stringified version of the message so we can see it. And then finally, on End Update, I'll just print "end update."

And to make this a little bit easier to see, when we're done with the update I'm going to print out some stars. And I'll put some stars up here in the Begin Update as well.

OK. So now we have a store that we've registered with the Meteor connection, or the Live Data DVP connection. And the store is called Items. And here's the API that lets it work with DVP messages that come off the wire. Then, we're subscribing to the item's publication. And on the server, this just calls the Added function once, which is going to send one Added message to the client.

Now, when I press Save, we can go over to the browser and take a look. I got an error in the browser. And that's just because I misspelled stringify. Once I fix that and we subscribe to the Items publication, the server will send the Added message, which we can see in the network console. And once the Live Data connection gets this Added message, it sees that we do have a store in the message. It's called a collection called Items. And we've defined that over here. And then, it will begin a transactional update.

And so you can see on the second one here, at first, it calls Begin Update. And we have a batch size of one, because we just have one document. And then, here's our Update message.

And so we can choose to do what we want with that Update message. But Mini Mongo, for example, would update the local cache of your data. And then, once that's done, the End Update method is called to end the transaction.

When we get to the class on Mini Mongo, we'll cover how they implement this, or that package implements this, in more detail.

Now, let's take a look at some of the other messages that can be sent. After we send the initial Added message, let's set a timeout. And we'll just use JavaScript to send another one in three seconds. And that will be a Changed message. So we'll change the document with an ID of 1. And we'll just change the title. And then, three seconds later from that-- so I'll just say in 6,000 milliseconds-- we'll send a Removed message.

I've gotten rid of the network for you so we can get a better view of the store console logs. So we can see the first transaction happens here for the Added message. And then, three seconds later, we get the second update. And this time, the message is Changed. So it's pretty much the same as what comes off of the wire from DVP. And then, the third message, a couple seconds later, is to remove the document from the collection.

Now once again, typically we wouldn't call Register Store ourselves unless we were implementing a client-side database like Mini Mongo. But I wanted to show you what that API looks like, so you can get an intuitive sense of what's happening under the hood when one of these messages comes off the wire. Namely, every time we create a new collection, it registers itself as a store with the Live Data connection. And then, Live Data connection can call these methods-- Begin Update, Update, and End Update-- every time it wants to update the store.