Node.js搭建WEB服务器的示例代码


Posted in Javascript onAugust 15, 2018

前言

这几天为了熟悉vue.js框架,还有webpack的使用,就准备搭建一个发布和浏览markdwon的简单WEB应用。原本是想着用bash脚本和busybox的httpd来作为后台服务,但是bash脚本解析和生成JSON非常不方便,而用Java语言写又觉得部署不方便,所以就想到了正在用到的Node.js,于是就有了这篇博文。(文末有本文代码的github地址)

简单例子

首先,从搭建最简单的 Hello world 开始,建立以下目录、文件和内容。

建立项目及运行

project

web-server
+ | - server.js

server.js

const http = require('http');

http.createServer(function(request, response) {
 // 设置响应头
 response.writeHeader(200, {
  "Content-Type" : "text/plain"
 });
 // 响应主体为 "Hello world!"
 response.write("Hello world!");
 response.end();
})
// 设置监听端口为9000
.listen(9000);

现在,在项目目录运行下面命令来执行 server.js ,浏览器地址栏中输入 localhost:9000 ,如果一切访问都正常,浏览器就会显示 Hello world! 。

node server.js

提示:使用 ctrl+c 停止脚本运行。

至此一个简单例子就运行成功了,下面来分析一下代码。

代码分析

首先, server.js 中引入了Node.js的 http模块 ,它提供了非常底层HTTP API支持。这里使用 createServer() 方法,它返回一个 http.server 实例,使用该实例的 listen() 方法来设置监听端口。

方法 createSever() 中填写的参数是一个函数,该函数会作为回调函数自动添加到 request事件 去,其参数类型分别为 http.IncomingMessage 和 http.ServerResponse 。在回调函数体里,利用 http.ServerResponse 的方法设置了响应头和响应主体,最后以 end() 方法结束本次请求。

路由功能

上述的例子仅仅实现了简单请求响应功能,现在增加路由的功能来健壮我们的WEB服务器。现在,修改为以下的目录、文件和内容。

实现简单路由

project

web-server
 | - server.js
+ | - router.js

server.js

const http = require('http');
const router = require('./router.js');

function handleHello(request, response) {
 // 设置响应头
 response.writeHeader(200, {
  "Content-Type" : "text/plain"
 });
 // 响应主体为 "Hello world!"
 response.write("Hello world!");
 response.end();
}

http.createServer(function(request, response) {
 // 注册路径和其对应回调函数
 router.register(request, response, [
  {
   'url': '/hello',
   'handler': handleHello
  }
 ]);
})
// 设置监听端口为9000
.listen(9000);

router.js

const url = require('url');

exports.register = function(request, response, mapping) {
 // 解析请求路径
 var pathName = url.parse(request.url).pathname;
 // 执行相应请求路径的回调函数
 for(let i = 0, len = mapping.length;i < len;i++) {
  if(mapping[i].url === pathName) {
   mapping[i].handler(request, response);
   return;
  }
 }
 // 请求路径不存在返回404页面
 response.writeHeader(404, {
  "Content-Type" : "text/html"
 });
 response.end(`
  <html>
   <head>
    <title>NOT FOUND</title>
   </head>
   <body>
    <h1>404 NOT FOUND</h1>
   </body>
  </html>
 `);
}

现在,再次执行 server.js 脚本,接着浏览器访问 localhost:9000\hello 会得到 Hello world! 的结果,而访问其他路径则会得到404页面。

这个功能的核心实现是在 router.js 中,通过请求路径的解析,然后根据预先注册好的 mapping 数组,找到与之对应的路径并执行相应的回调函数。

静态资源请求

当前的路由功能只能实现回调函数的执行,而一个WEB服务器应具有响应静态资源请求的能力,接下我们继续来改造它。现在,保持 server.js 内容不变,只改变 router.js 中的内容(部分代码内容省略)。

route.js

const url = require('url');
const path = require('path');
const fs = require('fs');

function getErrorInfo(errorType) {
 // 省略代码
}

function writeErrorPage(response, errorType) {
 // 省略代码
}

exports.register = function(request, response, mapping) {
 // 解析请求路径
 var pathName = url.parse(request.url).pathname;
 // 执行相应请求路径的回调函数
 for(let i = 0, len = mapping.length;i < len;i++) {
  if(mapping[i].url === pathName) {
   mapping[i].handler(request, response);
   return;
  }
 }
 // 请求路径为文件返回文件内容
 var file = path.resolve(__dirname, '.' + pathName);
 fs.exists(file, function(exists) {
  // 请求路径不存在返回404页面
  if(!exists) {
   writeErrorPage(response, 'NOT_FOUND');
  }
  else {
   var stat = fs.statSync(file);
   // 请求路径为目录返回403页面
   if(stat.isDirectory()) {
    writeErrorPage(response, 'FORBIDDEN');
   }
   else {
    response.writeHeader(200, {
     "Content-Type" : "text/html"
    });
    response.end(
     fs.readFileSync(file, 'utf-8')
    );
   }
  }
 });
}

将静态资源请求的行为置后的设计,是为了保证回调函数一定能执行。当静态资源不存在时,应当返回不存在的错误,同时也设置了禁止目录的访问的规则。

后话

现在,只是实现了WEB服务器基本的功能,它还有很大的改进空间。我将项目开源到 github 上,有兴趣的可以克隆下来。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 Javascript
JS实现多功能计算器
Oct 28 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 #Javascript
vue升级之路之vue-router的使用教程
Aug 14 #Javascript
layui table 参数设置方法
Aug 14 #Javascript
layui 表格的属性的显示转换方法
Aug 14 #Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 #Javascript
layui实现table加载的示例代码
Aug 14 #Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 #Javascript
You might like
浅析php原型模式
2014/11/25 PHP
php递归json类实例
2014/12/02 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
javascript填充默认头像方法
2018/02/22 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python和c语言的主要区别总结
2019/07/07 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
岗位安全生产责任书
2014/07/28 职场文书
合作合同协议书范本
2015/01/27 职场文书
语文教师求职信范文
2015/03/20 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
上班迟到检讨书
2015/05/06 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
python 对图片进行简单的处理
2021/06/23 Python
python中pymysql包操作数据库方法
2022/04/19 Python
Python时间操作之pytz模块使用详解
2022/06/14 Python
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers