浅谈使用nodejs搭建web服务器的过程


Posted in NodeJs onJuly 20, 2020

使用 Node 创建 Web 服务器

什么是 Web 服务器?

Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,Web服务器的基本功能就是提供Web信息浏览服务。它只需支持HTTP协议、HTML文档格式及URL,与客户端的网络浏览器配合。

大多数 web 服务器都支持服务端的脚本语言(php、python、ruby)等,并通过脚本语言从数据库获取数据,将结果返回给客户端浏览器。

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

Node.js 提供了 http 模块,http 模块主要用于搭建 HTTP 服务端和客户端,使用 HTTP 服务器或客户端功能必须调用 http 模块,代码如下:

var http = require('http');

在通常的服务器中,数据流通的方式是客户先通过浏览器进行发送请求,服务器在项目中进行查找,然后进客户所需要的页面进行返回,在查找的过程中可能存在两种情况,就是存在和不存在,当然,我们会做出判断,下面就是简单的服务器实现过程:

1、编写服务器代码server.js

var http=require('http');
var fs = require('fs');
var url = require('url');
 
//创建服务器
http.createServer(function(request,response) {
 //解析请求,包括文件名
 var pathname= url.parse(request.url).pathname;
 //输出请求的文件名
 console.log("Request for "+ pathname + " received.");
 
 //从文件系统中都去请求的文件内容
 fs.readFile(pathname.substr(1),function(err, data) {
 if(err) {
 console.log(err);
 //HTTP 状态码 404 : NOT FOUND
 //Content Type:text/plain
 response.writeHead(404,{'Content-Type': 'text/html'});
 }
 else {
 //HTTP 状态码 200 : OK
 //Content Type:text/plain
 response.writeHead(200,{'Content-Type': 'text/html'});
 
 //写会相应内容
 response.write(data.toString());
 }
 //发送响应数据
 response.end();
 });
}).listen(8081);
 
console.log('Server running at http://127.0.0.1:8081/');

通过上面代码,我们就能够实现服务器对于文件的查找,下面,我们就进行创建一个html文件,然后通过浏览器进行访问

2、编写html文件(index.html),用于浏览器进行请求

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>index</title>
</head>
<body>
 这是一个用于进行nodejs服务器测试的html文件,我们能够通过在浏览器上面输入
 http://127.0.0.1:8081/WebServer/index.html进行访问
</body>
</html>

创建完之后,我们进行测试,现在我的目录结构是这样的:

浅谈使用nodejs搭建web服务器的过程

3、进行测试

    (1) 首先我们启动服务器,使用命令node WebServer/server.js  
    (2) 在浏览器进行访问,在url栏中输入http://127.0.0.1:8081/WebServer/index.html   

其显示效果如下所示:

浅谈使用nodejs搭建web服务器的过程

后台效果如下所示:

浅谈使用nodejs搭建web服务器的过程

当然,我们也能够通过访问通过http://127.0.0.1:8081/LoveYou.html访问server.js文件夹外边的文件,进行到这里,我们就可以得到文件返回给前端,但是有些同学可能会问,样式该怎么做??如下面代码,我们进行了样式的定义,修改了两个div的大小,并且给div设置边框

<!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>
这是一个用于进行nodejs服务器测试的html文件,我们能够通过在浏览器上面输入
http://127.0.0.1:8081/WebServer/index.html进行访问
<div>1</div>
<div>2</div>
</body>
</html>

效果如下所示

浅谈使用nodejs搭建web服务器的过程

有了这些,我们还会问,你这样直接将样式写在html中,我可不干,我要把样式写道另外单独一个文件中,然后通过引用的方式引入,于是就会有人使用下面代码:

<link rel="stylesheet" href="http://127.0.0.1:8081/WebServer/index.css" rel="external nofollow" >

然而,这段代码并不会起作用,因为传递给前端的方式Content-Type是有问题的,需要我们的服务器进行下一步操作,也就是处理静态文件。既然传给前端时需要告诉type是css,那么我们就进行区分对待,如下面代码,我们对server.js进行修改如下:

var http=require('http');
var fs = require('fs');
var url = require('url');
 
//创建服务器
http.createServer(function(request,response) {
 //解析请求,包括文件名
 var pathname= url.parse(request.url).pathname;
 //输出请求的文件名
 console.log("Request for "+ pathname + " received.");
 //当请求static文件夹时,设置文件返回类型是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'}
 }
 
 //从文件系统中去请求的文件内容
 fs.readFile(pathname.substr(1),function(err, data) {
 if(err) {
 console.log(err);
 //HTTP 状态码 404 : NOT FOUND
 //Content Type:text/plain
 response.writeHead(404, {'Content-Type': 'text/html'});
 }
 else {
 //HTTP 状态码 200 : OK
 //Content Type:text/plain
 response.writeHead(200, ContentType);
 
 //写会回相应内容
 response.write(data.toString());
 }
 //发送响应数据
 response.end();
 });
}).listen(8081);
 
console.log('Server running at http://127.0.0.1:8081/');

接着,我们需要在项目中创建一个static文件夹,如下面所示结构:

浅谈使用nodejs搭建web服务器的过程

在static文件夹中创建index.css文件,代码内容如下所示:

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

也就是修改body边框为蓝色,div边框为黄色,同时我们需要更新index.html中文件内容如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>index</title>
 <link rel="stylesheet" href="http://127.0.0.1:8081/WebServer/static/index.css" rel="external nofollow" >
</head>
<body>
这是一个用于进行nodejs服务器测试的html文件,我们能够通过在浏览器上面输入
http://127.0.0.1:8081/WebServer/index.html进行访问
<div>1</div>
<div>2</div>
</body>
</html>

也就是通过引入的方式将样式引入到html文件中,然后在浏览器查看内容,效果如下所示:

浅谈使用nodejs搭建web服务器的过程

很明显,我们的样式已经通过引入的方式引进到html页面中了,同样的原理,我们能够进行将js也通过引入的方式进行使用,在这里我就不一一贴出代码了,看看效果如下所示:

浅谈使用nodejs搭建web服务器的过程

在上面效果中,当我点击2号div的时候,将会调用我在js文件夹中的方法去执行弹窗,详细代码请到github下载:https://github.com/suwu150/node-http-server

使用 Node 创建 Web 客户端

Node 创建 Web 客户端需要引入 http 模块,创建 client.js 文件,代码如下所示:

var http = require('http');
//用于请求的选项
var options = {
 host: 'localhost',
 port: '8081',
 path: '/WebServer/index.html'
};
 //处理响应的回调函数
var callback= function(response) {
 //不断更新数据
 var body = '';
 response.on('data',function(data) {
 body+=data;
 });
 response.on('end', function() {
 //数据接收完成
 console.log(body);
 });
};
//向服务器端发送请求
var req = http.request(options, callback);
req.end();

新打开终端,运行程序如下所示:

浅谈使用nodejs搭建web服务器的过程

对与服务器,可以参见我以前写过的服务器,其工作原理是一致的:https://3water.com/article/191240.htm 这是使用java进行写的服务器

到此这篇关于浅谈使用nodejs搭建web服务器的过程的文章就介绍到这了,更多相关nodejs搭建web服务器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

NodeJs 相关文章推荐
Nodejs sublime text 3安装与配置
Jun 19 NodeJs
Nodejs基于LRU算法实现的缓存处理操作示例
Mar 17 NodeJs
NodeJS学习笔记之Module的简介
Mar 24 NodeJs
nodejs个人博客开发第七步 后台登陆
Apr 12 NodeJs
Nodejs--post的公式详解
Apr 29 NodeJs
浅谈nodejs中的类定义和继承的套路
Jul 26 NodeJs
NodeJS实现视频转码的示例代码
Nov 18 NodeJs
基于nodejs实现微信支付功能
Dec 20 NodeJs
Nodejs处理异常操作示例
Dec 25 NodeJs
详解NodeJs项目 CentOs linux服务器线上部署
Sep 16 NodeJs
Nodejs监控事件循环异常示例详解
Sep 22 NodeJs
Nodejs 数组的队列以及forEach的应用详解
Feb 25 NodeJs
通过实例了解Nodejs模块系统及require机制
Jul 16 #NodeJs
Nodejs环境实现socket通信过程解析
Jul 03 #NodeJs
使用nodejs实现JSON文件自动转Excel的工具(推荐)
Jun 24 #NodeJs
nodejs各种姿势断点调试的方法
Jun 18 #NodeJs
在NodeJs中使用node-schedule增加定时器任务的方法
Jun 08 #NodeJs
nodeJS与MySQL实现分页数据以及倒序数据
Jun 05 #NodeJs
NodeJS多种创建WebSocket监听的方式(三种)
Jun 04 #NodeJs
You might like
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
php中的静态变量的基本用法
2014/03/20 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
VUE实现移动端列表筛选功能
2019/08/23 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
python解析xml模块封装代码
2014/02/07 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
Python调用C/C++的方法解析
2020/08/05 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
秘书行业自我鉴定范文
2013/12/30 职场文书
2013年研究生毕业感言
2014/02/06 职场文书
干部现实表现材料
2014/02/13 职场文书
中学教师师德承诺书
2014/05/23 职场文书
新文化运动的口号
2014/06/21 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
Django 如何实现文件上传下载
2021/04/08 Python