In this video, Emmanuel Henri introduces the publication and subscription model in Meteor and shows you how to use it in the application.
- [Instructor] Now that we've got some pieces of the puzzle for our data, let's add a published subscription. But what is this published subscription? When Meteor was built they wanted to create a way to dynamically get the data as it was updated. Typically a rest API only updates when requests are made to the API, so the Meteor team wanted to do something better. Therefore the publish subscribe pattern, which basically allows to get live updates of the data as it is updated in the server. So whenever there is an update on the data, the server pushes the change to the client, or whoever is subscribing to the specific queries.
With this model you can also create specific queries and have the client subscribe only to these queries versus full queries. For example, all of our members. With this approach, you could specify a publication of only members that has used the hotel a certain amount of days and then show them in a special page. Top members and subscribed to these publications. Let me demonstrate. So the first thing we need to do is open up our Terminal so go inside of View, Integrated Terminal, and then make sure your server is down.
And what you need to do is do a command which is called meteor remove autopublish. So the remove command is basically the opposite of add so if you want to remove a package you can do it this way or you can simply go inside of the meteor folder, click on package, and then remove it manually. So you could remove this line here and it would do the same thing as the command. So let's do the command and you'll see it change on-screen. Then what we need to do is install Faker and Lodash because we're going to use it to actually create fake data as our server loads our collection.
So let's do meteor npm install - -save Faker and Lodash. By the way if you're using the latest version of npm, and not specifically to Meteor, you can omit to do the save thing. Okay so let's do that but I'm still going to do the save, because some of you or the version of Meteor may not have the latest version of npm so I'll add the --save. Okay so once this is done we can start our server back by doing meteor and while meteor is loaded we are going to go inside of our main.
So as you can see the package has been removed so let's close that file and let's go back to main. So right now we have imported members and rooms which is good. Now we're going to start coding stuff in here. So basically the Meteor.startup and you have pretty much the same command so let's close the packages here. So let's close that folder and let's close node_modules. So if you take a look at the server file, you have the Meteor.startup command, if you look at the client file, you could have, also, the same command here, you don't have it right now, but you could also have a startup.
So if you want to have specific things started up when you start your client, so, for example, jQuery stuff, you could put it in here with the startup command, like this one. So when our server is started, whatever we put in here is going to be started as well. So, what we're going to do is start adding some code to first publish our collection and run a command that will basically find all the members, and then create fake data as well, so if there's no fake data in our database, then the server will create it, so this is the code that we're going to do.
So, hit Return on line six, like so, and then let's do a Meteor.publish. And we're doing a publication, so we're doing a publication of members. So basically, the publish variable that you put in here, is the name of that specific publish. So when we actually subscribe to it, the name that you use in here will be the name that you subscribe to it. So, for example this one, I'm going to call it members.allMembers.
So right now we're going to publish all the members in this specific publication. Like so, and then it's a function. And then what we'll do is return... A find of all the members. So this is basically MongoDB command, so we're going to look inside of our collection members and find all the members. Okay. Semicolon here, and then Return twice, and then what we'll do is create new members.
So first we'll create a variable that will check if there's any members inside of our collection. So we'll do, again, a Members.find. And then count. So once it does that, and you can actually add some variables here if you want to find specific amount, or specific things inside of your database, and then we'll just console.log it just to make sure that we have something to show for.
'Cause I want to check, when I first start my server, if there's anything, also, inside of our server. Okay. And then we'll do an if command. So if there's no members, or if there's nothing inside of the variable here that we created, so if it finds absolutely nothing here, then we'll create, with Lodash, and let's make sure we import Lodash and Faker as well, while we're here, so let's import it at the top here.
So import, underscore for from 'lodash'. Like so. And let's import Faker as well. From 'faker'. And here we're going to use Lodash, so basically we're going to use the function called times. So it's going to check here if there's anything, and if there's nothing then we'll create for 20 times a member.
And basically we'll use all the... fields here that we have in here so, for example, we'll have the... firstName, and then use Faker in a function inside of Faker which is called name.firstName. So it's going to create a first name in our variable firstName. And now let's copy that and we'll do that a couple times.
So we need to also do a last name. So please pay particular attention to the the actual variables you create, because if you're not creating the same variables that the schema is expecting, then it's going to give you an error when you first do this. So, same thing here, there's a function called lastName inside of Faker, that allows you to create last name. And then let's do the member. And for this one we'll use something different, so internet in the category internet we'll create a username.
Again, it is a function. Then we'll create street, and this one is called Faker.address.streetAddress. And let's use this one 'cause we're going to use a few function from the address object inside of faker, so the next one is city, and guess what it's called city as well, we're going to do also state, and this one is called state.
Lo and behold. Next one is zip, and guess what, this one is called zipCode. Then we need to do a few different ones, so lastCheckout is Faker date... In the past, so date.past, it's a function. So basically this is going to generate a date in the past...
For the number of nights, and again, if you're trying to do this on your own, you're trying to create the code and then watch the video to see, and that's a good way to learn by the way, if you are trying to do all this first and then watch the video to see what you got wrong, or if you got it right, this is the perfect way to learn because doing it this way will actually challenge you, and you'll learn a lot faster that way. I know, I've done that in the past, and it has helped me tremendously. So we're going to do random.number.
And I want a random number up to 40. So basically the ARG minute it takes it's in between one and 40. So it's going to basically give us number of nights in between one and 40. And then the final one is the preferences. And for this one is random words that I use so, just to fill it with some data, otherwise it's not going to work. If you're not filling anything with all the variables here it's not going to work.
Okay, so once we created those variables, we need to actually insert them inside of our database, our collection. So insert, so we're using the function insert and basically what we're going to do is insert all this. So firstName, lastName, member, street, city, so I'm going in order, state...
Zip... Then lastCheckout. numberofNights, preferences, and then, finally, we're going to, createdAt, we're going insert something with a new date, because it requires the new Date as well. Okay so, it needs to be that way, and then semicolon here so we remove all those red lines, semicolon here, and off we go.
So, let's do Expected space after the if, So these are all from our linter, so we should be good to go right now, let's save this file here, and the other thing that we need to do in Members and Rooms, right now we're exporting default, it's not working too well with the schema and when we import in the server with Meteor so, the way to fix this is to basically remove that line on 31 like so, and then do an export directly from the collection, I know it's going to show me that it prefers a default export, but it's working better this way with Meteor, so save that.
Let's do the same here while we're at it. Export and then remove here like so, if you see a red line, as bad as it sounds, it means that you're good to go, and now the import here will work with what we're doing. Okay. So let's bring up our console, so let's do View, Integrated Terminal, and then let's start Meteor. By starting Meteor, you're going to see a console log at 0, once the server has started, so now it's at 0, so at console.log, basically the number of members at 0, and then it ran Lodash 20 times to create 20 people.
There's two ways you can check that. You can check that directly in your browser with the Meteor Devtool, or you can check that with Robo T, and I'll show you that later on. So let's go ahead and check inside of our browser, so let's open up our browser. I'm going to open the hotel application, which is running right now, and we have our Meteor installed, so let's open up our devtools. And let's go in Meteor.
And let's refresh the page. And you see that it has a collection that was added, if we go to Minimongo we have a collection here, so we have some stuff happening, and we'll check how we can take a look at the database later on. Alright, so we got our first publication completed, let's move on.
- Installing Meteor
- Setting up ESLint and ES6 support
- Using Atmosphere or npm
- Collections and schemas
- Using the publication and subscription (pub/sub) model
- Updating styles with Materialize
- Routing and CSS in Meteor
- Updating styles with Materialize
- Securing external keys