/simple-nodejs-example

Primary LanguageHTML

Table of Contents

  1. Intro
  2. build steps
    1. first http server
      1. server.js
      2. on browser
    2. first web page
      1. index.html
      2. server.js
      3. on browser
    3. lets add some route
      1. server.js
    4. post function
      1. index.html
      2. server.js
    5. communication part
      1. index.html
      2. server.js
    6. final add some animation!
      1. index.html
  3. Enjoy

Intro

A simple nodejs tutorial. Lets start from implement the server.js

build steps

first http server

server.js

var vhttp = require("http");

function onRequest(request, response) {
  console.log("Request received.");
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("hello world!");
  response.end();
}
vhttp.createServer(onRequest).listen(3000);
console.log("Server has started on port :3000.");

on browser

goto localhost:3000 great! we have our page!

first web page

index.html

<HTML>
  <HEAD>
	<TITLE> hello javascript </TITLE>
  </HEAD>
  <BODY>
	<h1> SIMPLE KANBAN </h1>
  </BODY>
</HTML>

server.js

  1. new

    // we now need to read index.html and serve it to our client
var fs = require("fs");        
var page = "";

fs.readFile( __dirname + "/index.html", function (err, data) {
  if (err) {
	throw err; 
  }
  page = data.toString();
});
// ------ add these line at the front of

  2. changes

    response.writeHead(200, {"Content-Type": "text/html"});
response.write(page);
// ------ add these line in onRequest function

on browser

Now we have our page! Lets add some route

lets add some route

change -> server.js

  1. new

    var url = require("url");
// ------ add this line at the beginning

var pathname = url.parse(request.url).pathname;
console.log("Request for " + pathname + " received.");
if (pathname == "/") {
  response.writeHead(200, {"Content-Type": "text/html"});
  response.write(page);
  response.end();
} else if (pathname == "/message") {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("You are on /message !");
  response.end();
}
// ------ add these line in onRequest function

post function

change -> index.html

  1. new

    <form id="msg" method="POST" action="#">
  <label> name </label><input type="text" id="username" name="username" />
  <label> message </label><input type="text" id="message" name="message" />
</form>
<button onClick="SubForm()"> call </button>
<script>
  function SubForm (){
	alert(" you called me~~");
  }
</script>
// ------ add these line in index.html, after <h1> SIMPLE KANBAN </h1>

  2. next

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  function SubForm (){
	$.ajax({
	  url: "/message",
	  type: "post",
	  data: $("#msg").serialize(),
	  success: function(){
		console.log("worked");
	  }
	});
  };
</script>
// ------ change the content of SubForm()

server.js

  1. new

    var qs = require("querystring");
// ------ add this line at the beginning


if (request.method == "GET") {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("You are on /message !");
  response.end();
  return;
} else if (request.method == "POST") {
  var body = "";
  request.on("data", function (data) {
	body += data;
  });
  request.on("end", function () {
	var post = qs.parse(body);
	console.log(post["username"]);
	console.log(post["message"]);
	response.writeHead(200, {"Content-Type": "text/plain"});
	response.write("done");
	response.end();
  });
}
// ------ change the content of onRequest function `else if (pathname == "/message")`

communication part

index.html

  1. new

    <button onClick="update()"> update </button>
<div id="hello"> </div>
 // ------ add these line below <button onClick="SubForm()"> call </button>
 
<script>
function update (){
  $.get("/message", function(data) {
	$("#hello").empty();
	data = JSON.parse(data);
	for(var i in data) {
		for(var j in data[i]) {
			$("#hello").append("<div>" + i + " says " + data[i][j] + "</div>");	  
		}
	}
	console.log(data);
  });
};
</script>
// ------ add these line within <script>

server.js

  1. new

    var messages = {};
// ------ add this line at the beginning

if (messages[post["username"]] == undefined) {
  messages[post["username"]] = [];
  messages[post["username"]].push(post["message"]);
} else {
  messages[post["username"]].push(post["message"]);			
}
// ------ add these line within

  2. change

    // on GET message
response.write(JSON.stringify(messages));

final add some animation!

index.html

  1. new

    <!-- Include the polyfill -->
<script src="//cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"></script>

<!-- Include Animatelo -->
<script src="//cdnjs.cloudflare.com/ajax/libs/animatelo/1.0.3/animatelo.min.js"></script>

  2. change

    // in update function
window.animatelo.bounce("#hello");

Enjoy