A simple nodejs tutorial. Lets start from implement the 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).listed(3000);
console.log("Server has started on port :3000.");goto localhost:3000 great! we have our page!
<HTML>
<HEAD>
<TITLE> hello javascript </TITLE>
</HEAD>
<BODY>
<h1> SIMPLE KANBAN </h1>
</BODY>
</HTML>// 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();
});response.writeHead(200, {"Content-Type": "text/html"});
response.write(page);Now we have our page! Lets add some route
var url = require("url");
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();
}<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><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function SubForm (){
$.ajax({
url: "http://hare1039.nctu.me:5900/message",
type: "post",
data: $("#msg").serialize(),
success: function(){
console.log("worked");
}
});
};
</script>var qs = require("querystring");
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();
});
}<button onClick="update()"> update </button>
<div id="hello"> </div>
function update (){
$.get("http://hare1039.nctu.me:5900/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);
});
};var messages = {};
if (messages[post["username"]] == undefined) {
messages[post["username"]] = [];
messages[post["username"]].push(post["message"]);
} else {
messages[post["username"]].push(post["message"]);
}// on GET message response.write(JSON.stringify(messages));
<!-- 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>// in update
window.animatelo.bounce("#hello");