Build your First Real-Time App in Node

tahazsh.com tahazsh.com3 years ago in #Dev Love585

Have you ever wondered how real-time apps like chat apps and online games are built? If you’ve never built one before, read this tutorial as I’m going to show you how to build a simple one using socket.io. What are we going to build? It’s a simple app with one button and a label below it. The label displays “Likes: X” (where x is the current number of likes). When the user clicks on the button, the number of likes increases by one. We’re going to make it real time by showing users on the app how the number of likes increases as other users are clicking on the button. So you don’t need to reload the page to see the latest value. Here’s how the app would look like: You can get the source code of this project on GitHub. Creating a new project In a new folder, add package.json using npm init -y, and then install these three packages: npm install express ejs socket.io We’ll use ejs as the templating engine, and socket.io for making our app a real-time app. Displaying a hello world page As mentioned above, we’ll use ejs for rendering our views. So create index.ejs and add the following: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Realtime like app</title> </head> <body> Hello World! </body> </html> Now let’s create our node server and serve the above file as the homepage. So create node.js and add this: const app = require(‘express’)() const path = require(‘path’) app.engine(‘html’, require(‘ejs’).renderFile) app.set(‘view engine’, ‘html’) app.get(“https://tahazsh.com/”, (req, res) => { res.render(path.join(__dirname + ‘/index.ejs’), null, (err, html) => { res.send(html) }) }) app.listen(3000, () => console.log(‘the app is running on localhost:3000’)) So we created a new server that runs on port 3000. When the user hits http://localhost:3000/ in the browser, we’ll render index.ejs and display it. If you run the app using node index.js (or using nodemon if you want the app to restart automatically on changes) and open http://localhost:3000/, you should see “Hello World!” displayed. Adding style.css This isn’t a CSS tutorial, so let’s quickly add style.css in the root directory and fill it with this: body { background: hsl(0, 50%, 80%); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; padding: 0; } button { background: hsl(0, 50%, 90%); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; cursor: pointer; outline: none; box-shadow: 0 14px 28px hsla(0, 50%, 10%, 25%), 0 10px 10px hsla(0, 50%, 10%, 22%); transition: all 0.3s cubic-bezier(.25,.8,.25,1); } button:hover { box-shadow: 0 1px 3px hsla(0, 50%, 10%, 12%), 0 1px 2px hsla(0, 50%, 10%, 24%); } button:active { box-shadow: none; } svg path { fill: hsl(0, 30%, 30%); } .main { display: flex; flex-direction: column; justify-content: center; align-items: center; } .likes { margin-top: 20px; color: hsl(0, 60%, 20%); font-weight: bold; font-family: sans-serif; text-transform: uppercase; font-size: 20px; } Now let’s tell our server about it so when we request it, it responds with this file. Add this route in index.js (below the root route): app.get(‘/style.css’, (req, res) => { res.sendFile(path.join(__dirname + ‘/style.css’)) }) And then let’s use it in our index.ejs by adding this at the bottom of : <link rel=”stylesheet” href=”https://tahazsh.com/./style.css”> Displaying the button and the label Open index.ejs and update it like this: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Realtime like app</title> <link rel=”stylesheet” href=”https://tahazsh.com/./style.css”> </head> <body> <div class=”main”> <button> <svg style=”width:80px;height:80px” viewBox=”0 0 24 24″> <path fill=”#000000″ d=”M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z” /> </svg> </button> <span class=”likes”>Likes: <%= likes %></span> </div> </body> </html> For this to work, we have to…

Like to keep reading?

This article first appeared on tahazsh.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply