对于使用nodejs创建Web服务器的教程

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

 
  1. var http=require('http');

  2. var fs = require('fs');

  3. var url = require('url');

  4. //创建服务器

  5. http.createServer(function(request,response) {

  6. //解析请求,包括文件名

  7. var pathname= url.parse(request.url).pathname;

  8. //输出请求的文件名

  9. console.log("Request for "+ pathname + " received.");

  10. //从文件系统中都去请求的文件内容

  11. fs.readFile(pathname.substr(1),function(err, data) {

  12. if(err) {

  13. console.log(err);

  14. //HTTP 状态码 404 : NOT FOUND

  15. //Content Type:text/plain

  16. response.writeHead(404,{'Content-Type': 'text/html'});

  17. }

  18. else {

  19. //HTTP 状态码 200 : OK

  20. //Content Type:text/plain

  21. response.writeHead(200,{'Content-Type': 'text/html'});

  22. //写会相应内容

  23. response.write(data.toString());

  24. }

  25. //发送响应数据

  26. response.end();

  27. });

  28. }).listen(8081);

  29. console.log('Server running at http://127.0.0.1:8081/');

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

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

 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>index</title>

  6. </head>

  7. <body>

  8. 这是一个用于进行nodejs服务器测试的html文件,我们能够通过在浏览器上面输入

  9. http://127.0.0.1:8081/WebServer/index.html进行访问

  10. </body>

  11. </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设置边框

 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>index</title>

  6. <style>

  7. body {

  8. border: 1px solid red;

  9. }

  10. div {

  11. border-radius: 10px;

  12. width: 500px;

  13. height: 200px;

  14. border: 2px solid green;

  15. }

  16. </style>

  17. </head>

  18. <body>

  19. 这是一个用于进行nodejs服务器测试的html文件,我们能够通过在浏览器上面输入

  20. http://127.0.0.1:8081/WebServer/index.html进行访问

  21. <div>1</div>

  22. <div>2</div>

  23. </body>

  24. </html>

效果如下所示,

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

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


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

 
  1. var http=require('http');

  2. var fs = require('fs');

  3. var url = require('url');

  4. //创建服务器

  5. http.createServer(function(request,response) {

  6. //解析请求,包括文件名

  7. var pathname= url.parse(request.url).pathname;

  8. //输出请求的文件名

  9. console.log("Request for "+ pathname + " received.");

  10. //当请求static文件夹时,设置文件返回类型是text/css

  11. var firstDir = pathname && pathname.split('/')[2];

  12. var ContentType = null;

  13. if (firstDir && firstDir === 'static') {

  14. ContentType = {'Content-Type': 'text/css'};

  15. } else {

  16. ContentType = {'Content-Type': 'text/html'}

  17. }

  18. //从文件系统中去请求的文件内容

  19. fs.readFile(pathname.substr(1),function(err, data) {

  20. if(err) {

  21. console.log(err);

  22. //HTTP 状态码 404 : NOT FOUND

  23. //Content Type:text/plain

  24. response.writeHead(404, {'Content-Type': 'text/html'});

  25. }

  26. else {

  27. //HTTP 状态码 200 : OK

  28. //Content Type:text/plain

  29. response.writeHead(200, ContentType);

  30. //写会回相应内容

  31. response.write(data.toString());

  32. }

  33. //发送响应数据

  34. response.end();

  35. });

  36. }).listen(8081);

  37. console.log('Server running at http://127.0.0.1:8081/');

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

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

 
  1. body {

  2. border: 1px solid blue;

  3. }

  4. div {

  5. border-radius: 10px;

  6. width: 400px;

  7. height: 200px;

  8. border: 2px solid yellow;

  9. }

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

 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>index</title>

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

  7. </head>

  8. <body>

  9. 这是一个用于进行nodejs服务器测试的html文件,我们能够通过在浏览器上面输入

  10. http://127.0.0.1:8081/WebServer/index.html进行访问

  11. <div>1</div>

  12. <div>2</div>

  13. </body>

  14. </html>

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

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

在上面效果中,当我点击2号div的时候,将会调用我在js文件夹中的方法去执行弹窗,详细代码请到github下载: GitHub - suwu150/node-http-server: 使用http进行搭建自己的文件服务器,通过对服务器文件读取,然后传送给浏览器

使用 Node 创建 Web 客户端

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

 
  1. var http = require('http');

  2. //用于请求的选项

  3. var options = {

  4. host: 'localhost',

  5. port: '8081',

  6. path: '/WebServer/index.html'

  7. };

  8. //处理响应的回调函数

  9. var callback= function(response) {

  10. //不断更新数据

  11. var body = '';

  12. response.on('data',function(data) {

  13. body+=data;

  14. });

  15. response.on('end', function() {

  16. //数据接收完成

  17. console.log(body);

  18. });

  19. };

  20. //向服务器端发送请求

  21. var req = http.request(options, callback);

  22. req.end();

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

对与服务器,可以参见我以前写过的服务器,其工作原理是一致的: 自己的web服务器项目-request请求和response响应处理(一)_suwu150-CSDN博客  这是使用java进行写的服务器

业务搭载离不了云服务器,选择合适的平台最重要!

从目前国内云计算市场的格局来看,国内云计算前三强分别是阿里云、腾讯云和华为云,阿里云、腾讯云作为背靠互联网平台的企业,更偏向于B端用户;华为与作为传统的通信巨头,更偏向于G端。

本人从事云计算相关工作至今已有多年,国内主流的云平台都接触过,包括他们的销售及技术团队,对各家的产品也小有了解,并且指导过数百家企业迁移上云,对云平台选择也有一定的发言权!

网上有很多评测,评测数据也五花八门,说谁好的都有,这个两篇博文分析汇总的非常详细,分享给大家,文档地址:

博文1:云服务器哪家好!阿里云、腾讯云、华为云的服务器配置及价格对比?​

博文2:阿里云服务器突发型t6、n4、s6、c5、c6怎么选?和腾讯云服务器标准型s3、sn3ne、s4、s5、sa2相比哪家好?全面解析

如果是高并发,高IO业务场景,需要确定服务器规格,可让业务应用性能发挥到最佳,参考官方文档:

阿里云服务器规格:规格实例族 - 云服务器 ECS

腾讯云服务器规格:规格实例族 - 云服务器CVM

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值