Getting ready

Let's create a server.js file ready for our code, and an HTML file called form.html, that contains the following:

<form method=post>
  <input type=text name=userinput1><br>
  <input type=text name=userinput2><br>
  <input type=submit>
</form>

For our purposes, we'll place form.html in the same folder as server.js. Though this is not generally a recommended practice, we should usually place our public code in a separate folder from our server code.

How to do it...

We'll provision our server for both GET and POST requests. Let's start with GET by requiring the http module and loading form.html to serve through createServer, as follows:

var http = require('http');
var form = require('fs').readFileSync('form.html');
http.createServer(function (request, response) {
  if (request.method === "GET") {
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.end(form);
  }
}).listen(8080);

We are synchronously loading form.html at initialization time instead of accessing the disk on each request. If we navigate to localhost:8080, we'll be presented with a form. But if we fill out our form, nothing happens because we need to handle POST requests, as follows:

if (request.method === "POST") {
  var postData = '';
  request.on('data', function (chunk) {
    postData += chunk;
  }).on('end', function() {
    console.log('User Posted:\n' + postData);
    response.end('You Posted:\n' + postData);
  });
}

Once the form is completed and submitted, the browser and console will output the raw query string sent from the client. Converting our postData variable into an object provides an easy way to interact with and manipulate the submitted information. The querystring module has a parse method, which transforms query strings into objects, and since form submission arrives in query string format, we can use it to objectify our data as follows:

var http = require('http');
var querystring = require('querystring');
var util = require('util');
var form = require('fs').readFileSync('form.html');

http.createServer(function (request, response) {
  if (request.method === "POST") {
    var postData = '';
    request.on('data', function (chunk) {
      postData += chunk;
    }).on('end', function () {
 var postDataObject = querystring.parse(postData);
      console.log('User Posted:\n', postData);
 response.end('You Posted:\n' + util.inspect(postDataObject));
    });
  }
  if (request.method === "GET") {
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.end(form);
  }
}).listen(8080);

Notice the util module—we require it to use its inspect method for a simple way to output our postDataObject to the browser.

Finally, we're going to protect our server from memory overload exploits.

To achieve this, we'll set a variable for the maximum acceptable data size and check it against the growing length of our postData variable as follows:

var http = require('http');
var querystring = require('querystring');
var util = require('util');
var form = require('fs').readFileSync('form.html');
var maxData = 2 * 1024 * 1024; //2mb
http.createServer(function (request, response) {
  if (request.method === "POST") {
    var postData = '';
    request.on('data', function (chunk) {
      postData += chunk;
 if (postData.length > maxData) {
 postData = '';
 this.destroy();
 response.writeHead(413); // Request Entity Too Large
 response.end('Too large');
 }
    }).on('end', function () {
 if (!postData) { response.end(); return; } // prevents empty post
 // requests from
 // crashing the server
 var postDataObject = querystring.parse(postData);
 console.log('User Posted:\n', postData);
 response.end('You Posted:\n' + util.inspect(postDataObject));
 });
//rest of our code....

How it works...

Once we know that a POST request has been made for our server (by checking request.method), we aggregate our incoming data into our postData variable via the data event listener on the request object. However, if we find that the submitted data exceeds our maxData limit, we clear our postData variable and pause the incoming stream, preventing any further data arriving from the client (using stream.destroy instead of stream.pause seems to interfere with our response mechanism. Once a stream has been paused for a while, it is automatically removed from memory by V8's garbage collector).

We then send a 413 Request Entity Too Large HTTP header. In the end event listener, as long as postData hasn't been cleared for exceeding maxData (or wasn't blank in the first place), we use querystring.parse to turn our POST message body into an object. From this point on, we can perform any number of interesting activities, such as manipulate, analyze, and pass it to a database. However, for the example, we simply output postDataObject to the browser and postData to the console.

In Chapter 5, Employing Streams, we'll look into ways to constrain the actual stream input to a maximum size and abort if that size is exceeded by using the post-Node 0.8 extra stream API's.

There's more...

If we want our code to look a little more elegant and we're not so concerned about handling POST data as a stream, we can employ a user land (non-core) module to get a little sugar on our syntax.

npm install connect
npm install body-parser

var connect = require('connect');
var bodyParser = require('body-parser');
var util = require('util');
var form = require('fs').readFileSync('form.html');
connect(connect.limit('2mb'), bodyParser(),function (request, response) {
  if (request.method === "POST") {
    console.log('User Posted:\n', request.body);
    response.end('You Posted:\n' + util.inspect(request.body));
  }
  if (request.method === "GET") {
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.end(form);
  }
}).listen(8080);

console.log(require('body-parser').toString());

See also