Introduction:
hello Everyone! I hope you are doing well. My name is Julian, and today we will learn how to:
- Build a simple server that displays a form to collect data from users.
- An efficient way of managing and saving the collected data into a file.
A lot of things might sound new to you
By the end of this session,
you will clearly understand how to handle data efficiently in Node.js.
Part 1: Understanding Streams and Buffers
Before we start coding, let’s first understand two important concepts for data handling in a server: streams and buffers.
Stream:
A stream is like a pipeline that transports data in small chunks,
just like water flowing through a pipe.
Instead of sending all the data at once,
it sends it piece by piece.
This is especially helpful for handling large amounts of data,
such as when users fill out forms or upload files,
because it uses less memory and lets us start working with the data immediately.
Example:
Think of watching a movie online.
Instead of downloading the entire movie file before you can watch it,
the video player streams the movie.
It starts playing as soon as enough data is loaded,
allowing you to enjoy the movie without waiting for the whole file to download.
Buffer:
A buffer is a temporary storage area that holds small chunks of data as it flows through the stream.
Imagine filling a small bucket with water.
The bucket fills up, you pour it out and then fill it again.
This is how buffers work: they store data temporarily before passing it along.
Part 2: Setting Up a Simple Server
Let’s build a server that will display a form,
collect user input,
and handle it using streams and buffers.
Step 1: Display the Form
When the user visits our server,
we’ll display a simple form where they can input their name.
The form will look something like this:
html
Copy code
<form action="/submit" method="post">
<label>Name:</label>
<input type="text" name="name"><br><br>
<label>Age:</label>
<input type="text" name="age"><br><br>
<button type="submit">Submit</button>
</form>
Let’s add this form to our server code.
const http = require('http');
const fs = require('fs'); // We’ll use fs to write data to a file later
const server = http.createServer((req, res) => {
if (req.method === 'GET') {
// Show the form to the user
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(`
<form action="/submit" method="post">
<label>Name:</label>
<input type="text" name="name"><br><br>
<label>Age:</label>
<input type="text" name="age"><br><br>
<button type="submit">Submit</button>
</form>
`);
}
});
server.listen(3000, () => {
console.log('Server running at http://localhost:3000');
});Explanation:
- We create a simple HTTP server using Node.js.
- When the user visits the server with a GET request, we show the form using res.end().
Part 3: Handling Form Submission with Streams and Buffers
When the user submits the form, we need to collect the data. We’ll use streams to handle the form data in small pieces and buffers to temporarily hold the incoming data.
Step 2: Collecting Data from the Form
After the form is submitted, the data will be sent to the server in small chunks. We can capture this data by using event listeners: req.on(‘data’) and req.on(‘end’).
Let’s add that part to our code:
else if (req.method === 'POST' && req.url === '/submit') {
const body = []; // Array to hold the chunks of data
// Listen for the 'data' event to collect the form data in chunks
req.on('data', chunk => {
body.push(chunk); // Add the chunk to the body array
});
// Listen for the 'end' event, which tells us all the data has been received
req.on('end', () => {
// Concatenate all the chunks into a single buffer
const buffer = Buffer.concat(body);
// Convert the buffer to a string
const formData = buffer.toString();
console.log('Data received:', formData);
});
}Explanation:
- req.on(‘data’): This event fires whenever a chunk of data is received. We add that chunk to our body variable.
- req.on(‘end’): This event fires when all the chunks have been received. At this point, we can log or process the full form data.
Part 4: Saving Data to a File
Now that we have collected the data, let’s save it to a file using the fs module.
Step 3: Writing Data to a File
We’ll use Node’s fs.writeFile() function to save the form data to a file.
javascript
Copy code
req.on('end', () => {
const buffer = Buffer.concat(body);
const formData = buffer.toString();
console.log('Data received:', formData);
// Save the form data to a file
fs.writeFile('formdata.txt', formData, (err) => {
if (err) throw err;
console.log('Form data saved!');
});
});Explanation:
- fs.writeFile(): This method writes data to a file. If the file doesn’t exist, it will be created.
Part 5: Redirecting the User to a Success Page
Once the data is saved, we want to redirect the user to a success page. We’ll use a 302 redirect to send the user to a new URL.
Step 4: Redirecting the User
After saving the data, we’ll redirect the user to a success page using the following code:
javascript
Copy code
res.writeHead(302, { 'Location': '/success' });
res.end();
Now let’s create the success page:
javascript
Copy code
else if (req.url === '/success') {
// Show the success message
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end('<h1>Form Submitted Successfully!</h1>');
}Explanation:
- 302 Redirect: This tells the browser to go to a different page (/success).
- After the redirection, the user will see a success message.
Full Code Recap:
Here’s the complete server code with all the steps included:
javascript
Copy code
const http = require('http');
const fs = require('fs');
const server = http.createServer((req, res) => {
if (req.method === 'GET') {
// Display the form
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(`
<form action="/submit" method="post">
<label>Name:</label>
<input type="text" name="name"><br><br>
<label>Age:</label>
<input type="text" name="age"><br><br>
<button type="submit">Submit</button>
</form>
`);
} else if (req.method === 'POST' && req.url === '/submit') {
const body = []; // Array to hold the chunks of data
// Listen for the 'data' event to collect the form data in chunks
req.on('data', chunk => {
body.push(chunk); // Add the chunk to the body array
});
// Listen for the 'end' event, which tells us all the data has been received
req.on('end', () => {
// Concatenate all the chunks into a single buffer
const buffer = Buffer.concat(body);
// Convert the buffer to a string
const formData = buffer.toString();
console.log('Data received:', formData);
// Save the form data to a file
fs.writeFile('formdata.txt', formData, (err) => {
if (err) throw err;
console.log('Form data saved!');
});
// Redirect to success page
res.writeHead(302, { 'Location': '/success' });
res.end();
});
} else if (req.url === '/success') {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end('<h1>Form Submitted Successfully!</h1>');
} else {
res.writeHead(404);
res.end('Page Not Found');
}
});
server.listen(3000, () => {
console.log('Server running at http://localhost:3000');
});
Conclusion:
- Streams help us handle data in chunks, which is useful for large inputs like forms.
- Buffers temporarily store these chunks until all the data has been received.
- With event listeners like req.on(‘data’) and req.on(‘end’), we can manage form data efficiently.
- We also learned how to redirect the user and save form data to a file.
Now you can handle form submissions and data efficiently in your Node.js servers! Thank you for joining the lecture, and happy coding!
