To get a better understanding of how all these components fit together, we're going to develop our first real-time web application based on Node.js and RethinkDB. If you've never developed a web app before, this is going to be very exciting for you!
You maybe wondering what we're going to build. We're going to develop a web application that allows us to create colored "notes" containing messages that can be dragged around the screen. The interesting thing about this web application is that it's completely real time. Everything you do will be reflected in real time on all connected clients. What this means is that if you open two browser windows and drag a note around, the same note will be animated in the other browser window. The same thing happens when you create or delete notes. All the changes will appear in real time in all the open browser windows without the need of reloading the page.
If you're curious, the application we're going to build looks like this:
Let's look at this in more detail.
As you can see from the screenshot, the graphical part is extremely simple, and I have left it simple on purpose so that we can focus more on the technology stack. At the center of the screen is a button that allows the user to create a new note. By pressing it, a popup dialog is shown onscreen where the user will type the message and confirm it. Notes will pop up in different colors and each of them has a "trash" icon button that allows the user to delete the note. Finally, the user will be able to drag the notes around the screen with the mouse.
As we said earlier, all the actions performed by the user will be mirrored across all the clients that are viewing the web app in their browser. Therefore, we need to develop a way for user's actions to be sent to the server, saved in the database, and pushed to all the connected clients. In detail, every time a user creates a new note, moves one around, or deletes one, we need the server to know so that it can save the changes in our database and push updates to all connected users in real time.
To achieve this, we're going to use the following software stack:
- A Node.js server running the Express.js framework will be responsible for receiving clients' requests and processing them
- A RethinkDB database instance will contain all the data relative to the notes and their position
- Changefeeds will push changes from RethinkDB to the application logic
- The
Socket.iomodule will be responsible for sending updates from Node.js to all connected clients via WebSockets - The frontend is made up of a simple HTML file, the corresponding CSS stylesheet, and a JS script for the client-side logic
Although this may seem quite complex, you'll be surprised to learn just how easily these components blend together into a full-fledged, real-time web application.
The first thing we need to do is download and install all the Node.js modules that are required by our example app. We can do so by running the following command from a terminal window:
sudo npm install express rethinkdb socket.io body-parser ejs
This will install all modules into your node_modules folder on your system.
Let's take a quick look at the folder structure and all the files in our project:
- The
controllersfoldernotes.js
- The
modelsfolderrethinkdb.js
- The
publicfoldernotes.jsnotes.css
- The
routesfolderindex.js
- The
viewsfolderindex.ejs
- The
app.jsfile
Let's explore each file and folder to get a better understanding of how our web application is going to be structured.
The only file in the top-level folder is app.js, the most important file in our project as it is the application's entry point. In practice, this is the file that we're going to run to actually start the web app. The app.js file does a few important things. We'll look at this in more detail further on, but for now, you just need to know that this file imports all required modules, initializes Socket.io and Express.js, and finally starts the HTTP server.
The next folder in our project is the routes folder. At the start of the chapter, you learned all about the router, an essential part of every Node.js web app. This folder serves as the router in our project as it contains all the JavaScript files that contain the routes for the HTTP server.
One of the most important parts of any web app that complies with the MVC (model-view-controller) pattern is the model as this is the part of the application that interacts with the data store. One of the core aspects of this pattern is that the model is completely independent from the other components. What this means is that in theory, we can write different model files that work with different data stores and our web application can load any one of these models. For example, suppose we initially programmed our web app to use MongoDB as the data store, but we then decide to move to RethinkDB. If we've coded our app correctly, the only piece of code that we need to change is the model file. In our example, there is just one model—RethinkDB; therefore, the rethinkdb.js script is responsible for the interaction with RethinkDB.
Another component of a MVC-based web application is views. Views are, very simply, what the user sees on the screen. In this case, there is only one view—the HTML page that displays the notes; therefore, there is just one file in the views folder, index.ejs. This script makes use of the EJS templating language to write a dynamic HTML file that will be rendered by the Node.js application to the user's browser.
The last part of the MVC pattern is the controller. As we've seen earlier in the chapter, the controller is the piece of software that acts as a bridge between the model and the view. In other words, the controller contains the application's logic. A web app may have more than one controller, but in this case, we only have one called notes.js that is stored in the controllers folder.
Finally, we have the public folder. This folder contains all static files that need to be available to the client and are served by the Node.js HTTP server. In our example, we have two public files: the stylesheet for the HTML page and the JavaScript script that contains the client-side logic.
You should now have a better understanding of how our project is structured, so without further ado, let's jump right in and start coding!