[ulp id=’7Yp6ijpjjxyeaN8A’]
\n
\nNode.js is a JavaScript framework for running JavaScript on the server side. HTTP module, part of Node.js, allows us to handle requests from browser and issue HTTP Requests of our own to services. We will use the json-server module to mock a service API. I will go through, in a later section, with the details of setting all of this up. I have used the Visual Studio Code IDE as I feel most comfortable with it, though you are free to switch to one of many available IDEs out there.<\/p>\n
2. Project Layout<\/h2>\n
The structure of our project would look like below:<\/p>\n You can easily initialize and prepare an initial project structure using the commands below at the root of the folder you want it to reside in.<\/p>\n This command asks a few basic questions and suggests defaults for them as well. Apart from a few you can go along with the suggestions to setup initial project structure. followed by<\/p>\n We use Http to create a web server of our own. This server would listen to service requests from the browser and relaying them on to our own mock service. Apart from this it will also handle requests for resource files like JavaScript, css and Html files.<\/p>\n The http module is part of Node.js and gives us the capability to create a basic web server. We include this module through a require statement and then call its index.js<\/em><\/span><\/p>\n In the Next section, we setup our mock service using the This module allows us to quickly mock a service API. The API is backed with a store of some test data in a file called db.json<\/em><\/span><\/p>\n As evident from the data we will build a page showing my dream cricket team whilst allowing users to create one of their own with their favorite players. index.js<\/em><\/span><\/p>\n As you can notice from the snippet the mock service runs on the URL http.request.server.js<\/em><\/span><\/p>\n We use the Onwards now to build our front end and make calls to the server as a result of user actions. We start off with a standard index.html<\/em><\/span><\/p>\n We use the http.request.js<\/em><\/span><\/p>\n To run the application you need to navigate to the root of the application and run the following command:<\/p>\n Once the command completes you can navigate to the URL This wraps our look at making HTTP Requests with Node.js example.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/ProjectLayoutNodejsHttpProject.jpg\")
<\/a>> npm init\r\n<\/pre>\n
\nYou can create the css, js<\/code> folders and the files in them manually using command line or GUI or from within the IDE. The two modules that our example depends on and their dependencies can be installed and saved using the following commands:<\/p>\n> npm install --save request\r\n<\/pre>\n
> npm install --save json-server\r\n<\/pre>\n
3. Server Side Implementation with Http & json-server Modules<\/h2>\n
3.1 Http Module<\/h3>\n
createServer<\/code> method. This method takes a callback to which it passes the response and request object for the incoming requests. We also specify the hostname<\/code> and port<\/code> to listen for requests on.
\nWe use the url<\/code> module, part of Node.js, to handle incoming requests and return appropriate responses for each. The code for this resides in the file index.js<\/code> at the root of our project. Our index.js<\/code> file with the web server code looks like below:<\/p>\n\/\/including Node.js modules\r\nvar http = require(\"http\");\r\nvar url = require(\"url\");\r\nvar fs = require(\"fs\");\r\n\r\n\/\/Url of our web server\r\nvar host = \"localhost\";\r\nvar port = 8090;\r\n\r\n\/\/Setting up our web server\r\nhttp.createServer(function(req, res){\r\n var path = url.parse(req.url, true);\r\n if(path.pathname.endsWith(\"html\")){\r\n fs.readFile(\".\" + path.pathname, function(err, data){\r\n res.writeHead(200, \"OK\", { \"Content-Type\": \"text\/html\"} );\r\n res.write(data);\r\n res.end();\r\n });\r\n } else if(path.pathname.endsWith(\"css\")){\r\n fs.readFile(\".\" + path.pathname, function(err, data){\r\n res.writeHead(200, \"OK\", { \"Content-Type\": \"text\/css\"});\r\n res.write(data);\r\n res.end();\r\n });\r\n } else if(path.pathname.endsWith(\"js\")){\r\n fs.readFile(\".\" + path.pathname, function(err, data){\r\n res.writeHead(200, \"OK\", { \"Content-Type\": \"text\/javascript\"});\r\n res.write(data);\r\n res.end();\r\n });\r\n\r\n } else if(path.pathname.endsWith(\"names\")){\r\n switch(req.method){\r\n case \"GET\": api.getRequest(res, path.query.team); \r\n break;\r\n case \"POST\": \r\n var data = \"\";\r\n req.on(\"data\", function(d){\r\n data+=d;\r\n });\r\n req.on(\"end\", function(){\r\n api.postRequest(data, res);\r\n }); \r\n break; \r\n case \"DELETE\":\r\n var delData = \"\";\r\n req.on(\"data\", function(d){\r\n delData += d;\r\n });\r\n req.on(\"end\", function(){\r\n api.deleteRequest(res, delData);\r\n });\r\n break;\r\n }\r\n }\r\n}).listen(port, host);\r\n<\/pre>\njson-server<\/code> module.<\/p>\n3.2 json-server Module<\/h3>\n
db.json<\/code>. Our data store is in the folder called db<\/code> and its contents look as follows:<\/p>\n{\r\n \"myTeam\": [\r\n {\r\n \"id\": 1,\r\n \"name\": \"Mahendra Singh Dhoni\"\r\n },\r\n {\r\n \"id\": 2,\r\n \"name\": \"Virat Kohli\"\r\n },\r\n {\r\n \"id\": 3,\r\n \"name\": \"Bhuvneshvar Kumar\"\r\n },\r\n {\r\n \"id\": 4,\r\n \"name\": \"Mohmd. Shami\"\r\n },\r\n {\r\n \"id\": 5,\r\n \"name\": \"Ishant Sharma\"\r\n },\r\n {\r\n \"id\": 6,\r\n \"name\": \"Ajinkya Rahane\"\r\n },\r\n {\r\n \"id\": 7,\r\n \"name\": \"K L Rahul\"\r\n },\r\n {\r\n \"id\": 8,\r\n \"name\": \"Yuvraj Singh\"\r\n },\r\n {\r\n \"id\": 9,\r\n \"name\": \"Harbhajan Singh\"\r\n },\r\n {\r\n \"id\": 10,\r\n \"name\": \"Kuldeep Yadav\"\r\n },\r\n {\r\n \"id\": 11,\r\n \"name\": \"Yajuvendra Chahal\"\r\n }\r\n ],\r\n \"yourTeam\": [\r\n \r\n ]\r\n}\r\n<\/pre>\n
\nThe code to setup this mock service resides in the index.js<\/code> file and it looks like below:<\/p>\nvar jsonServer = require('json-server');\r\nvar server = jsonServer.create();\r\nvar router = jsonServer.router('.\/db\/db.json');\r\nvar middlewares = jsonServer.defaults();\r\n\r\nserver.use(middlewares);\r\nserver.use(router);\r\n\r\nserver.listen(9090, function() {\r\n console.log('JSON Server is running');\r\n});\r\n<\/pre>\nhttp:\/\/localhost:9090<\/code>.
\nNow finally we create a file named http.request.server.js<\/code> to organize the code for making service calls to our mock service. We later include it into our index.js<\/code> file through a require statement. In this file we have methods to enable requests using different HTTP verbs like GET, POST, DELETE<\/code> among others. The http.request.server.js<\/code> file looks like below:<\/p>\nvar request = require(\"request\");\r\nvar host = \"http:\/\/127.0.0.1\";\r\nvar port = 9090;\r\nvar api ={\r\n getRequest:function(res, team){\r\n if(team){\r\n request.get(host + \":\" + port + \"\/yourTeam\", function(error, response, body){\r\n res.writeHead(200, \"OK\", { \"Content-Type\":\"application\/json\", \"Access-Control-Allow-Origin\" : \"http:\/\/localhost:8090\"});\r\n res.write(body);\r\n res.end();\r\n });\r\n }\r\n else{\r\n request.get(host + \":\" +port + \"\/myTeam\", function(error, response, body){\r\n res.writeHead(200, \"OK\", { \"Content-Type\":\"application\/json\", \"Access-Control-Allow-Origin\" : \"http:\/\/localhost:8090\"});\r\n res.write(body);\r\n res.end();\r\n });\r\n }\r\n },\r\n postRequest: function (player, res){\r\n request.post(host + \":\" + port +\"\/yourTeam\", function(error, response, body){\r\n res.writeHead(200, \"OK\");\r\n res.write(body);\r\n res.end();\r\n }).form(JSON.parse(player));\r\n },\r\n deleteRequest: function (res, id){\r\n var player = JSON.parse(id);\r\n request.del(host + \":\" + port + \"\/yourTeam\/\" + player.playerId, function(error, response, body){\r\n res.writeHead(200, \"OK\");\r\n res.write(body);\r\n res.end();\r\n });\r\n }\r\n};\r\nmodule.exports = api;\r\n<\/pre>\nrequest<\/code> module to make calls to the mock service. As you can see from the code above we have a method for each one of the HTTP verbs we will use in our example, although all HTTP verbs are supported by this mock service. We will stick to GET, POST, DELETE<\/code> to keep things simple in our example.<\/p>\n4. Client Side Implementation with JavaScript, HTML & CSS<\/h2>\n
HTML<\/code> and adding markup to display two teams as ordered lists. We also add html to allow the user to add players to their own team. Each team member added by the user would also have a link to remove the player from the list. We achieve the hover effect and styling by adding css in the http.request.css<\/code> file. Our final Html markup looks like below:<\/p>\n \r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"utf-8\">\r\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->\r\n<title>WCG -- Node.js HTTP Request Example<\/title>\r\n\r\n<link rel=\"Stylesheet\" href=\"css\/http.request.css\"\/>\r\n<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->\r\n<!-- WARNING: Respond.js doesn't work if you view the page via file:\/\/ -->\r\n<!--[if lt IE 9]>\r\n<script src=\"https:\/\/oss.maxcdn.com\/html5shiv\/3.7.3\/html5shiv.min.js\"><\/script>\r\n<script src=\"https:\/\/oss.maxcdn.com\/respond\/1.4.2\/respond.min.js\"><\/script>\r\n<![endif]-->\r\n<\/head>\r\n<body>\r\n<h1>WCG -- Node.js HTTP Request Example<\/h1>\r\n<div class=\"teams\">\r\n<div class=\"myteam\">\r\nMy All Star Cricket 11\r\n<\/div>\r\n<div class=\"yourteam\">\r\nYours?\r\n<\/div>\r\n<div class=\"addplayers\">\r\n<input type=\"text\" placeholder=\"Player Name\" id=\"playerName\"\/>\r\n<input type=\"button\" value=\"Add\" id=\"addPlayer\" \/>\r\n<\/div>\r\n<\/div>\r\n<script src=\"js\/http.request.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
4.1 Ajax calls with JavaScript<\/h3>\n
XMLHttpRequest<\/code> object to issue calls to the server which in turn makes calls to our mock service. The code for the client side resides in http.request.js<\/code> file. We load both teams at startup. Apart from this we make a call to add team players in user’s team on the click of the Add<\/code> button. Similarly we make a call when the delete player link is clicked. After each call we also make request for the updated team. Our client side code now looks as follows:<\/p>\nvar myteam = document.getElementsByClassName(\"myteam\")[0];\r\nvar addPlayer = document.getElementById(\"addPlayer\");\r\nvar playerName = document.getElementById(\"playerName\");\r\nvar deleteLink = document.getElementsByClassName(\"deletelink\");\r\nvar yourteam = document.getElementsByClassName(\"yourteam\")[0];\r\nvar host = \"http:\/\/localhost\";\r\nvar port = \"8090\";\r\n\r\nfunction setupDeleteLink(){\r\n for(var l=0; l<deleteLink.length; l++){\r\n deleteLink[l].addEventListener(\"click\", function(event){\r\n var xmlHttp = new XMLHttpRequest();\r\n var ctrl = event.target;\r\n xmlHttp.onreadystatechange = function(){\r\n if(xmlHttp.status === 200 && xmlHttp.readyState === 4){\r\n console.log(xmlHttp.responseText);\r\n refreshYourTeam();\r\n }\r\n };\r\n xmlHttp.open(\"DELETE\", host +\":\" + port + \"\/names\");\r\n xmlHttp.send(JSON.stringify({ \"playerId\": ctrl.getAttribute(\"playerId\")}));\r\n });\r\n }\r\n}\r\n\r\naddPlayer.addEventListener(\"click\", function(){\r\n var player = {};\r\n player.name = playerName.value;\r\n var xmlHttp = new XMLHttpRequest();\r\n xmlHttp.onreadystatechange = function(){\r\n\r\n if(xmlHttp.status === 200 && xmlHttp.readyState === 4){\r\n console.log(xmlHttp.responseText);\r\n refreshYourTeam();\r\n }\r\n \r\n };\r\n xmlHttp.open(\"POST\", host +\":\" + port + \"\/names\");\r\n xmlHttp.send(JSON.stringify(player));\r\n \r\n});\r\n\r\nfunction Initialize(){\r\n var xmlHttp = new XMLHttpRequest();\r\n xmlHttp.onreadystatechange = function(){\r\n\r\n if(xmlHttp.status === 200 && xmlHttp.readyState === 4){\r\n console.log(xmlHttp.responseText);\r\n populateMyTeam(xmlHttp.responseText);\r\n }\r\n \r\n };\r\n xmlHttp.open(\"GET\", host + \":\" + port + \"\/names\", true); \r\n xmlHttp.withCredentials = false;\r\n xmlHttp.send();\r\n}\r\n\r\nfunction refreshYourTeam(){\r\n var xmlHttp = new XMLHttpRequest();\r\n xmlHttp.onreadystatechange = function(){\r\n\r\n if(xmlHttp.status === 200 && xmlHttp.readyState === 4){\r\n console.log(xmlHttp.responseText);\r\n populateYourTeam(xmlHttp.responseText);\r\n }\r\n \r\n };\r\n xmlHttp.open(\"GET\", host + \":\" + port + \"\/names?team=yourTeam\", true);\r\n xmlHttp.send();\r\n}\r\nfunction populateYourTeam(team){\r\n var orderedList = document.createElement(\"OL\");\r\n var players = JSON.parse(team);\r\n\r\n for(var i=0; i < players.length; i++){\r\n var listItem = document.createElement(\"LI\");\r\n var delLink = document.createElement(\"SPAN\");\r\n delLink.className = \"deletelink\";\r\n delLink.appendChild(document.createTextNode(\"X\"));\r\n delLink.setAttribute(\"playerId\", players[i].id);\r\n listItem.appendChild(document.createTextNode(players[i].name));\r\n listItem.appendChild(delLink);\r\n orderedList.appendChild(listItem);\r\n \r\n }\r\n yourteam.innerHTML = orderedList.outerHTML;\r\n\r\n setupDeleteLink();\r\n}\r\nfunction populateMyTeam(team){\r\n var orderedList = document.createElement(\"OL\");\r\n var players = JSON.parse(team);\r\n\r\n for(var i=0; i < players.length; i++){\r\n var listItem = document.createElement(\"LI\");\r\n \r\n listItem.appendChild(document.createTextNode(players[i].name));\r\n \r\n orderedList.appendChild(listItem);\r\n \r\n }\r\n myteam.appendChild(orderedList);\r\n\r\n}\r\nInitialize();\r\nrefreshYourTeam();\r\n<\/pre>\n5. Running the Application<\/h2>\n
> node index.js\r\n<\/pre>\n
http:\/\/localhost:8090\/index.html<\/code> in a browser.
\nThis takes you to the landing page of our application which looks like below:<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/LandingPageNodejsHttpRequest-e1518013232935.jpg\")
<\/a>6. Download the Source Code<\/h2>\n