浅谈使用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 相关文章推荐
Ubuntu中搭建Nodejs开发环境过程分享
Jun 01 NodeJs
nodejs中操作mysql数据库示例
Dec 20 NodeJs
Nodejs实战心得之eventproxy模块控制并发
Oct 27 NodeJs
详解nodejs 文本操作模块-fs模块(一)
Dec 22 NodeJs
nodejs入门教程四:URL相关模块用法分析
Apr 24 NodeJs
配置nodejs环境的方法
May 13 NodeJs
Windows下使用Nodejs运行js的方法
Sep 02 NodeJs
nodejs对express中next函数的一些理解
Sep 08 NodeJs
nodejs搭建本地服务器轻松解决跨域问题
Mar 21 NodeJs
对mac下nodejs 更新到最新版本的最新方法(推荐)
May 17 NodeJs
基于Nodejs的Tcp封包和解包的理解
Sep 19 NodeJs
nodejs实现聊天机器人功能
Sep 19 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
2006/12/14 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
php模板函数 正则实现代码
2012/10/15 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
python实现外卖信息管理系统
2018/01/11 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
python如何读取bin文件并下发串口
2019/07/05 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
环境工程专业个人求职信
2013/12/05 职场文书
企划专员岗位职责
2013/12/09 职场文书
租赁协议书范本
2014/04/22 职场文书
企业法人代表任命书
2014/06/06 职场文书
群众路线对照检查材料
2014/09/22 职场文书
资产运营委托书范本
2014/10/16 职场文书
就业推荐表院系意见
2015/06/05 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL