淺談使用nodejs搭建web服務(wù)器的過程

更新時間：2020年07月20日 14:27:09 作者：suwu150

這篇文章主要介紹了淺談使用nodejs搭建web服務(wù)器的過程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

使用 Node 創(chuàng)建 Web 服務(wù)器

什么是 Web 服務(wù)器？

Web服務(wù)器一般指網(wǎng)站服務(wù)器，是指駐留于因特網(wǎng)上某種類型計算機(jī)的程序，Web服務(wù)器的基本功能就是提供Web信息瀏覽服務(wù)。它只需支持HTTP協(xié)議、HTML文檔格式及URL，與客戶端的網(wǎng)絡(luò)瀏覽器配合。

大多數(shù) web 服務(wù)器都支持服務(wù)端的腳本語言（php、python、ruby）等，并通過腳本語言從數(shù)據(jù)庫獲取數(shù)據(jù)，將結(jié)果返回給客戶端瀏覽器。

目前最主流的三個Web服務(wù)器是Apache、Nginx、IIS。

Node.js 提供了 http 模塊，http 模塊主要用于搭建 HTTP 服務(wù)端和客戶端，使用 HTTP 服務(wù)器或客戶端功能必須調(diào)用 http 模塊，代碼如下：

var http = require('http');

在通常的服務(wù)器中，數(shù)據(jù)流通的方式是客戶先通過瀏覽器進(jìn)行發(fā)送請求，服務(wù)器在項目中進(jìn)行查找，然后進(jìn)客戶所需要的頁面進(jìn)行返回，在查找的過程中可能存在兩種情況，就是存在和不存在，當(dāng)然，我們會做出判斷，下面就是簡單的服務(wù)器實現(xiàn)過程：

1、編寫服務(wù)器代碼server.js

var http=require('http');
var fs = require('fs');
var url = require('url');
 
//創(chuàng)建服務(wù)器
http.createServer(function(request,response) {
 //解析請求，包括文件名
 var pathname= url.parse(request.url).pathname;
 //輸出請求的文件名
 console.log("Request for "+ pathname + " received.");
 
 //從文件系統(tǒng)中都去請求的文件內(nèi)容
 fs.readFile(pathname.substr(1),function(err, data) {
 if(err) {
 console.log(err);
 //HTTP 狀態(tài)碼 404 ： NOT FOUND
 //Content Type:text/plain
 response.writeHead(404,{'Content-Type': 'text/html'});
 }
 else {
 //HTTP 狀態(tài)碼 200 ： OK
 //Content Type:text/plain
 response.writeHead(200,{'Content-Type': 'text/html'});
 
 //寫會相應(yīng)內(nèi)容
 response.write(data.toString());
 }
 //發(fā)送響應(yīng)數(shù)據(jù)
 response.end();
 });
}).listen(8081);
 
console.log('Server running at http://127.0.0.1:8081/');

通過上面代碼，我們就能夠?qū)崿F(xiàn)服務(wù)器對于文件的查找，下面，我們就進(jìn)行創(chuàng)建一個html文件，然后通過瀏覽器進(jìn)行訪問

2、編寫html文件（index.html），用于瀏覽器進(jìn)行請求

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>index</title>
</head>
<body>
 這是一個用于進(jìn)行nodejs服務(wù)器測試的html文件，我們能夠通過在瀏覽器上面輸入
 http://127.0.0.1:8081/WebServer/index.html進(jìn)行訪問
</body>
</html>

創(chuàng)建完之后，我們進(jìn)行測試，現(xiàn)在我的目錄結(jié)構(gòu)是這樣的：

3、進(jìn)行測試

(1) 首先我們啟動服務(wù)器，使用命令node WebServer/server.js
(2) 在瀏覽器進(jìn)行訪問，在url欄中輸入http://127.0.0.1:8081/WebServer/index.html

其顯示效果如下所示：

后臺效果如下所示：

當(dāng)然，我們也能夠通過訪問通過http://127.0.0.1:8081/LoveYou.html訪問server.js文件夾外邊的文件,進(jìn)行到這里，我們就可以得到文件返回給前端，但是有些同學(xué)可能會問，樣式該怎么做？？如下面代碼，我們進(jìn)行了樣式的定義，修改了兩個div的大小,并且給div設(shè)置邊框

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>index</title>
 <style>
 body {
 border: 1px solid red;
 }
 
 div {
 border-radius: 10px;
 width: 500px;
 height: 200px;
 border: 2px solid green;
 }
 </style>
</head>
<body>
這是一個用于進(jìn)行nodejs服務(wù)器測試的html文件，我們能夠通過在瀏覽器上面輸入
http://127.0.0.1:8081/WebServer/index.html進(jìn)行訪問
<div>1</div>
<div>2</div>
</body>
</html>

效果如下所示

有了這些，我們還會問，你這樣直接將樣式寫在html中，我可不干，我要把樣式寫道另外單獨一個文件中，然后通過引用的方式引入，于是就會有人使用下面代碼：

 <link rel="stylesheet"  rel="external nofollow" >

然而，這段代碼并不會起作用，因為傳遞給前端的方式Content-Type是有問題的，需要我們的服務(wù)器進(jìn)行下一步操作，也就是處理靜態(tài)文件。既然傳給前端時需要告訴type是css，那么我們就進(jìn)行區(qū)分對待，如下面代碼，我們對server.js進(jìn)行修改如下：

var http=require('http');
var fs = require('fs');
var url = require('url');
 
//創(chuàng)建服務(wù)器
http.createServer(function(request,response) {
 //解析請求，包括文件名
 var pathname= url.parse(request.url).pathname;
 //輸出請求的文件名
 console.log("Request for "+ pathname + " received.");
 //當(dāng)請求static文件夾時，設(shè)置文件返回類型是text/css
 var firstDir = pathname && pathname.split('/')[2];
 var ContentType = null;
 if (firstDir && firstDir === 'static') {
 ContentType = {'Content-Type': 'text/css'};
 } else {
 ContentType = {'Content-Type': 'text/html'}
 }
 
 //從文件系統(tǒng)中去請求的文件內(nèi)容
 fs.readFile(pathname.substr(1),function(err, data) {
 if(err) {
 console.log(err);
 //HTTP 狀態(tài)碼 404 ： NOT FOUND
 //Content Type:text/plain
 response.writeHead(404, {'Content-Type': 'text/html'});
 }
 else {
 //HTTP 狀態(tài)碼 200 ： OK
 //Content Type:text/plain
 response.writeHead(200, ContentType);
 
 //寫會回相應(yīng)內(nèi)容
 response.write(data.toString());
 }
 //發(fā)送響應(yīng)數(shù)據(jù)
 response.end();
 });
}).listen(8081);
 
console.log('Server running at http://127.0.0.1:8081/');

接著，我們需要在項目中創(chuàng)建一個static文件夾，如下面所示結(jié)構(gòu)：

在static文件夾中創(chuàng)建index.css文件，代碼內(nèi)容如下所示：

body {
 border: 1px solid blue;
}
 
div {
 border-radius: 10px;
 width: 400px;
 height: 200px;
 border: 2px solid yellow;
}

也就是修改body邊框為藍(lán)色，div邊框為黃色，同時我們需要更新index.html中文件內(nèi)容如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>index</title>
 <link rel="stylesheet"  rel="external nofollow" >
</head>
<body>
這是一個用于進(jìn)行nodejs服務(wù)器測試的html文件，我們能夠通過在瀏覽器上面輸入
http://127.0.0.1:8081/WebServer/index.html進(jìn)行訪問
<div>1</div>
<div>2</div>
</body>
</html>

也就是通過引入的方式將樣式引入到html文件中，然后在瀏覽器查看內(nèi)容，效果如下所示：

很明顯，我們的樣式已經(jīng)通過引入的方式引進(jìn)到html頁面中了，同樣的原理，我們能夠進(jìn)行將js也通過引入的方式進(jìn)行使用，在這里我就不一一貼出代碼了，看看效果如下所示：

在上面效果中，當(dāng)我點擊2號div的時候，將會調(diào)用我在js文件夾中的方法去執(zhí)行彈窗，詳細(xì)代碼請到github下載：https://github.com/suwu150/node-http-server

使用 Node 創(chuàng)建 Web 客戶端

Node 創(chuàng)建 Web 客戶端需要引入 http 模塊，創(chuàng)建 client.js 文件，代碼如下所示：

var http = require('http');
//用于請求的選項
var options = {
 host: 'localhost',
 port: '8081',
 path: '/WebServer/index.html'
};
 //處理響應(yīng)的回調(diào)函數(shù)
var callback= function(response) {
 //不斷更新數(shù)據(jù)
 var body = '';
 response.on('data',function(data) {
 body+=data;
 });
 response.on('end', function() {
 //數(shù)據(jù)接收完成
 console.log(body);
 });
};
//向服務(wù)器端發(fā)送請求
var req = http.request(options, callback);
req.end();

新打開終端，運行程序如下所示：