使用 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>

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


3、进行测试

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

其显示效果如下所示:


后台效果如下所示:


当然,我们也能够通过访问通过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>

效果如下所示


有了这些,我们还会问,你这样直接将样式写在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文件夹,如下面所示结构:


在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文件中,然后在浏览器查看内容,效果如下所示:

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


在上面效果中,当我点击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();

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


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

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

浅谈使用nodejs搭建web服务器的过程的更多相关文章

  1. HTML5 Web缓存和运用程序缓存(cookie,session)

    这篇文章主要介绍了HTML5 Web缓存和运用程序缓存(cookie,session),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. ios – ARkit – 从SCNScene中的Web服务器URL加载.scn文件

    我正在为我的应用程序使用ARKit,我尝试从我的web服务器(URL)动态加载.scn文件这是我的代码的一部分NSLog的:.scn文件下载与上面提到的(新位置)文件路径..但当我尝试在SCNScene中使用此下载文件总是场景值为零.错误Thread4:Fatalerror:UnexpectedlyfoundnilwhileunwrappinganOptionalvalue如何解决这个问题.谢谢解

  3. android – 在Internet上发布我的RESTful Web服务

    什么是最好的方法?例如,我可以使用AmazonWebServices或ApacheHTTPServer吗?

  4. android – 通过套接字看到一个Web服务器. . .

    ).HTTP的默认端口为80.因此,如果我们假设该PC的IP地址是192.168.0.1,则应该具有:要么

  5. nodejs npm package.json中文文档

    这篇文章主要介绍了nodejs npm package.json中文文档,本文档中描述的很多行为都受npm-config(7)的影响,需要的朋友可以参考下

  6. 浅析Nodejs npm常用命令

    这篇文章主要介绍了浅析Nodejs npm常用命令的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

  7. nodejs 使用nodejs-websocket模块实现点对点实时通讯

    这篇文章主要介绍了nodejs 使用nodejs-websocket模块实现点对点实时通讯的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  8. nodeJs链接Mysql做增删改查的简单操作

    本篇文章主要介绍了nodeJs链接Mysql做增删改查的简单操作,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  9. Nodejs中使用captchapng模块生成图片验证码

    本篇文章主要介绍了Nodejs中使用captchapng模块实现图片验证码,非常具有实用价值,需要的朋友可以参考下

  10. nodejs 图片预览和上传的示例代码

    本篇文章主要介绍了nodejs 图片预览和上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

随机推荐

  1. Error: Cannot find module ‘node:util‘问题解决

    控制台 安装 Vue-Cli 最后一步出现 Error: Cannot find module 'node:util' 问题解决方案1.问题C:\Windows\System32>cnpm install -g @vue/cli@4.0.3internal/modules/cjs/loader.js:638 throw err; &nbs

  2. yarn的安装和使用(全网最详细)

    一、yarn的简介:Yarn是facebook发布的一款取代npm的包管理工具。二、yarn的特点:速度超快。Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。超级安全。在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。超级可靠。使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。三、y

  3. 前端环境 本机可切换node多版本 问题源头是node使用的高版本

    前言投降投降 重头再来 重装环境 也就分分钟的事 偏要折腾 这下好了1天了 还没折腾出来问题的源头是node 使用的高版本 方案那就用 本机可切换多版本最终问题是因为nodejs的版本太高,导致的node-sass不兼容问题,我的node是v16.14.0的版本,项目中用了"node-sass": "^4.7.2"版本,无法匹配当前的node版本根据文章的提

  4. nodejs模块学习之connect解析

    这篇文章主要介绍了nodejs模块学习之connect解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  5. nodejs npm package.json中文文档

    这篇文章主要介绍了nodejs npm package.json中文文档,本文档中描述的很多行为都受npm-config(7)的影响,需要的朋友可以参考下

  6. 详解koa2学习中使用 async 、await、promise解决异步的问题

    这篇文章主要介绍了详解koa2学习中使用 async 、await、promise解决异步的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. Node.js编写爬虫的基本思路及抓取百度图片的实例分享

    这篇文章主要介绍了Node.js编写爬虫的基本思路及抓取百度图片的实例分享,其中作者提到了需要特别注意GBK转码的转码问题,需要的朋友可以参考下

  8. CentOS 8.2服务器上安装最新版Node.js的方法

    这篇文章主要介绍了CentOS 8.2服务器上安装最新版Node.js的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. node.js三个步骤实现一个服务器及Express包使用

    这篇文章主要介绍了node.js三个步骤实现一个服务器及Express包使用,文章通过新建一个文件展开全文内容,具有一定的参考价值,需要的小伙伴可以参考一下

  10. node下使用UglifyJS压缩合并JS文件的方法

    下面小编就为大家分享一篇node下使用UglifyJS压缩合并JS文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

返回
顶部