06_Node js 创建 web 服务器

194 阅读3分钟

到这里,我们就可以利用 http 模块,url 模块,path 模块和 fs 模块创建一个 Web 服务器了。

什么是 Web 服务器?

Web 服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,可以向浏览器等 Web 客户端提供文档,也可以放置网站文件,让全世界浏览,可以放置数据文件,让全世界下载。

目前最主流的三个 Web 服务器是 Apache、Nginx、IIS。

下面,我们使用 Node.js 来创建一个 Web 服务:

首先创建一个项目目录和一个 WebService.js,在项目目录下新建一个 index.html 和 404.html,为了下边的测试,我们在 style 目录下添加一个样式表,可以加一些初始化样式,然后在 index.html 中引用它。

image.png

WebService.js

const http = require('http');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((request, response) => {
    // 获取响应路径
    let pathName = request.url;

    // 默认加载路径
    if (pathName == '/') {
        // 默认加载首页
        pathName = 'index.html';
    };

    // 过滤 /favicon.ico 的请求
    if (pathName != '/favicon.ico') {
        // 读取 www 目录下的 index.html
        fs.readFile('www/' + pathName, (err, data) => {
            if (err) {
                // 如果不存在这个文件
                console.log('404 Not Fount!');
                fs.readFile('www/404.html', (errorNotFound, dataNotFound) => {
                    if (errorNotFound) {
                        console.log(errorNotFound);
                    } else {
                        response.statusCode = 200;
                        response.setHeader('Content-Type', 'text/html;charset=utf-8');
                        response.end(dataNotFound);
                    };
                });
                return;
            } else {
                // 如果存在这个文件,返回该文件
                response.statusCode = 200;
                response.setHeader('Content-Type', 'text/html;charset=utf-8');
                response.end(data);
            };
        });
    };
});

server.listen(port, hostname, () => {
    console.log(`服务器运行在 http://${hostname}:${port}`);
});

执行 node WebService.js,访问 127.0.0.1:3000/。

如果访问成功,此时就可以看到 index.html 页面了,但是在检查中我们发现引入的 css.css 文件并没有生效,那是因为在 Content-Type 中没有设置 css 等文件的类型。

所以下一步就该动态加载 html、css、js 这些文件了。

修改 WebService.js。

WebService.js:

const http = require('http');
const fs = require('fs');
const path = require('path');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((request, response) => {
    let pathName = request.url;

    if (pathName == '/') {
        // 默认加载首页
        pathName = 'index.html';
    };

    // 获取文件的后缀名
    let extName = path.extname(pathName);

    if (pathName != '/favicon.ico') {
        fs.readFile('www/' + pathName, (err, data) => {
            if (err) {
                console.log('404 Not Fount!');
                fs.readFile('www/404.html', (errorNotFound, dataNotFound) => {
                    if (errorNotFound) {
                        console.log(errorNotFound);
                    } else {
                        response.statusCode = 200;
                        response.setHeader('Content-Type', 'text/html;charset=utf-8');
                        response.end(dataNotFound);
                    };
                });
                return;
            } else {
                // 如果存在这个文件,返回该文件
                // 获取文件类型
                let ext = getExt(extName);
                response.statusCode = 200;
                response.setHeader('Content-Type', ext + ';charset=utf-8');
                response.end(data);
            };
        });
    };
});

server.listen(port, hostname, () => {
    console.log(`服务器运行在 http://${hostname}:${port}`);
});

// 获取后缀名方法
getExt = (extName) => {
    switch (extName) {
        case '.html':
            return 'text/html';
        case '.css':
            return 'text/css';
        case '.js':
            return 'text/js';
        default:
            return 'text/html';
    };
};

执行 node WebService.js,访问 localhost:3000。

此时再去检查页面,就会发现 css.css 已经可以成功引用了。

但是这仅仅设置了三种文件类型,如果需要更多类型的文件呢?

接下来我们再次修改一下 WebService.js,让它能够适应更多类型文件的请求。

首先新建 ext.json 文件,然后在里边添加数据,因为数据比较多,你可以去GitHub地址拷贝 json 数据,该 json 中定义了各种文件类型。

接下来再次修改 WebService.js。

WebService.js:

const http = require('http');
const fs = require('fs');
const path = require('path');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((request, response) => {
    let pathName = request.url;

    if (pathName == '/') {
        pathName = 'index.html';
    };

    // 获取文件的后缀名
    let extName = path.extname(pathName);

    if (pathName != '/favicon.ico') {
        fs.readFile('www/' + pathName, (err, data) => {
            if (err) {
                console.log('404 Not Fount!');
                fs.readFile('www/404.html', (errorNotFound, dataNotFound) => {
                    if (errorNotFound) {
                        console.log(errorNotFound);
                    } else {
                        response.statusCode = 200;
                        response.setHeader('Content-Type', 'text/html;charset=utf-8');
                        response.end(dataNotFound);
                    };
                });
                return;
            } else {
                let ext = getExt(extName);
                response.statusCode = 200;
                response.setHeader('Content-Type', ext + ';charset=utf-8');
                response.end(data);
            };
        });
    };
});

server.listen(port, hostname, () => {
    console.log(`服务器运行在 http://${hostname}:${port}`);
});

// 获取后缀名方法
getExt = (extName) => {
    // 读取 ext.json
    // readFile 是异步操作,所以需要用 readFileSync
    let data = fs.readFileSync('ext.json');
    // 因为文件是通过服务器获取的,所以先将数据转换为 javascript 对象(字符串),然后再转换为 JSON 对象。
    let ext = JSON.parse(data.toString());
    return ext[extName];
};

至此,我们已经创建了一个简单的 web 服务器了。


期待您的关注!