[Node.js] Creating Webserver (p1)
I. Client and server
- Clients and servers communicate by exchanging messages request and response.
- Each computer is identified by IP address
- To communicate, server/client needs to connect to IP address of each other to open the socket between 2 computers.
II. Create a server using http module
1. http module
- http is a built-in module of Node.js, used to create HTTP server which listens to server ports and give a response to the client.
- http stands for Hyper Text Transfer Protocol.
// require http module
const http = require('http');
// create HTTP server using createServer()
// whenever user sends a request to the server, callback fnc will be fired.
http.createServer((req, res) => {
// send a response to client
res.write("Welcome!");
// end the response
res.end();
}).listen(3000); // server is listening on port 3000
// or http.listen(3000);
- http.listen(port, hostname - IP address, backlog - max length of pending connections' queue, cbFnc - fired when listener has been added): makes server listen to a specific port on computer.
- http.get(): sets method to GET, returns an object containing user's request.
- http.request(): returns an object containing user's request.
2. HTTP header
- HTTP header allows client and server pass additional information with an HTTP request or response.
- Request headers contain infomation about the resource to be fetched.
- Response headers provide information about response's location or the server itself.
- Representation headers is information about the body of the resource.
- Payload headers is information about payload data such as content length, transport's encoding.
// writeHead(statusCode - number,[statusMsg - string],[headers - object]
// a response header sending text
res.writeHead(200, {'Content-Type': 'text/plain'});
// a response header sending html
res.writeHead(200, {'Content-Type': 'text/html'});
III. Serve data to client
1. Buffers and streams: consuming data before it all arrived
- Buffers is a temporary storage that a stream takes to hold data until it is consumed.
- Streams transfer data with a better performance.
- There are 4 types of streams:
Readable streams to read data from a stream.
const fs = require('fs');
// create read stream, read file and return chunck of data little by little
let myReadStream = fs.createReadStream('filename', 'utf8');
// createReadStream inherits EventEmitter so it can listen to events -> cbFnc is executed when a chunk arrives
myReadStream.on('data', (chunck/buffer) => {
// do smt with a chunk of data
});
Writable streams to write data to a stream.
let myWriteStream = fs.createWriteStream('filename');
myWriteStream.write('data');
Duplex can read and write to a stream.
Transform streams can read and write to a stream but data can be modified while reading/writing.
2. Pipes
- Takes data from read stream then pipes them to write stream
const fs = require('fs');
// Step 1: Create read stream
let myReadStream = fs.createReadStream('original.txt','utf8');
// Step 2: Create write stream
let myWriteStream = fs.createWriteStream('copy.txt');
// Step 3. Use pipe()
myReadStream.pipe(myWriteStream);
3. Serve HTML page
http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/html'})
let myReadStream = fs.createReadStream("index.html", 'utf8');
// res object is a writable stream
myReadStream.pipe(res);
// or
fs.createReadStream("index.html", 'utf8').pipe(res);
});
4. Serve JSON data
const person = { "name": "Vivian", "gender": "female"};
http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'application/json'})
let data = JSON.stringify(person);
res.end(data); // arg should be string or buffer
});
IV. Express JS
- An easy and flexible routing system.
- Integrating with many templating engines to build dynamic content.
- Containing middle ware framework
- Installation:
npm install express --save
// return a function
let express = require('express');
let app = express();
// app.get(route, cbFnc) instructs what to do when a get request to the / route is called
app.get('/', (req,res) => {
// send input to the client
res.send("Hello world!");
});
app.listen(3000);
- app.set(name,value): assigns the setting name to value, configure the behavior of the server.
- res.send(data - string or buffer or object) : sends the HTTP response
- res.sendFile(path, [options], [cbFnc]): transfers the given file and sets Content-Type value based on the given file extention.
- res.render(view,[{}],[cbFnc]): render a view (template for dynamic content) and sends rendered HTML string to client. {} contains embedded data to be passed to view (.ejs).
1. HTTP methods - kinds of request client make
- GET
- POST
- DELETE
- PUT
2. Route paramters - dynamic request
// param can be named anything
app.get('/profile/:paramName', (req,res) => {
// param is accessed through req object
req.params.paramName;
});
3. Query strings
- Additional data added to a HTTP request in form of name-value pair
- Separated by & if there are many query strings:
?person=vivi&dept=it
- Access query string:
req.query
-> return an object{dept: 'it', person: 'vivi'}
V. Templating (EJS)
- Used to embedded dynamic data to HTML.
- Installation:
npm install ejs --save
1. Templating syntax
- Output data:
<%= %>
- Output JS code:
<% %>
- Looping
<% data.arrayName.forEach((item) => {%>
<li><%=item%></li>
<%});%>
All Rights Reserved