node ref char*_使用Node.js原生API写一个web服务器 - _蒋鹏飞

2023-12-13 23:40

本文主要是介绍node ref char*_使用Node.js原生API写一个web服务器 - _蒋鹏飞,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

JavaScript基础上发展起来的语言,所以前端开发者应该天生就会一点。一般我们会用它来做CLI工具或者Web服务器,做Web服务器也有很多成熟的框架,比如ExpressKoa。但是ExpressKoa都是对原生API的封装,所以其实不借助任何框架,只用原生API我们也能写一个Web服务器出来。本文要讲的就是不借助框架,只用原生API怎么写一个Web服务器。因为在我的计划中,后面会写ExpressKoa的源码解析,他们都是使用原生API来实现的。所以本文其实是这两个源码解析的前置知识,可以帮我们更好的理解ExpressKoa这种框架的意义和源码。本文仅为说明原生API的使用方法,代码较丑,请不要在实际工作中模仿!

本文可运行代码示例已经上传GitHub,大家可以拿下来玩玩:/tree/master/Examples//HttpServer

Hello World

要搭建一个简单的Web服务器,使用原生的http模块就够了,一个简单的Hello World程序几行代码就够了:

const http = require('http')const port = 3000const server = ((req, res) => {res.statusCode = 200('Content-Type', 'text/plain')('Hello World')
})(port, () => {(`Server is running on :${port}/`)
})

这个例子就很简单,直接用创建了一个服务器,这个服务器也没啥逻辑,只是在访问的时候返回Hello World。服务器创建后,使用运行在3000端口就行。

这个例子确实简单,但是他貌似除了输出一个Hello World之外,啥也干不了,离我们一般使用的Web服务器还差了很远,主要是差了这几块:

  1. 不支持HTTP动词,比如GETPOST
  2. 不支持路由
  3. 没有静态资源托管
  4. 不能持久化数据

前面三点是一个Web服务器必备的基础功能,第四点是否需要要看情况,毕竟目前很多NodeWeb服务器只是作为一个中间层,真正跟数据库打交道做持久化的还是各种微服务,但是我们也应该知道持久化怎么做。

所以下面我们来写一个真正能用的Web服务器,也就是说把前面缺的几点都补上。

处理路由和HTTP动词

前面我们的那个Hello World也不是完全不能用,因为代码位置还是得在里面,我们就在里面添加路由的功能。为了跟后面的静态资源做区分,我们的API请求都以/api开头。要做路由匹配也不难,最简单的就是直接用if条件判断就行。为了能拿到请求地址,我们需要使用url模块来解析传过来的地址。而Http动词直接可以用拿到。所以改造如下:

const url = require('url');const server = ((req, res) => {// 获取url的各个部分// 可以将解析成一个对象// 里面包含有pathname和querystring等const urlObject = ();const { pathname } = urlObject;// api开头的是API请求if (('/api')) {// 再判断路由if (pathname === '/api/users') {// 获取HTTP动词const method = ;if (method === 'GET') {// 写一个假数据const resData = [{id: 1,name: '小明',age: 18},{id: 2,name: '小红',age: 19}];('Content-Type', 'application/json')((resData));return;}}}
});

现在我们访问/api/users就可以拿到用户列表了:

af1f0d4dc8b53f7802a419599af26eff.png

支持静态文件

上面说了API请求是以/api开头,也就是说不是以这个开头的可以认为都是静态文件,不同文件有不同的Content-Type,我们这个例子里面暂时只支持一种.jpg吧。其实就是给我们的if (('/api'))加一个else就行。返回静态文件需要:

  1. 使用fs模块读取文件。
  2. 返回文件的时候根据不同的文件类型设置不同的Content-Type

所以我们这个else就长这个样子:

// ... 省略前后代码 ...else {// 使用path模块获取文件后缀名const extName = (pathname);if (extName === '.jpg') {// 使用fs模块读取文件(pathname, (err, data) => {('Content-Type', 'image/jpeg');(data);();})}
}

然后我们在同级目录下放一个图片试一下:

3ac0bf688042907563b367a8fadf01d8.png

数据持久化

数据持久化的方式有好几种,一般都是存数据库,少数情况下也有存文件的。存数据库比较麻烦,还需要创建和连接数据库,我们这里不好demo,我们这里演示一个存文件的例子。一般POST请求是用来存新数据的,我们在前面的基础上再添加一个POST /api/users来新增一条数据,只需要在前面的if (method === 'GET')后面加一个POST的判断就行:

// ... 省略其他代码 ...else if (method === 'POST') {// 注意数据传过来可能有多个chunk// 我们需要拼接这些chunklet postData = '';('data', chunk => {postData = postData + chunk;})('end', () => {// 数据传完后往插入内容((__dirname, ''), postData, () => {(postData);  // 数据写完后将数据再次返回});})
}

然后我们测试一下这个API:

b8d181df4cb679ac8f036c42eb54863b.png

再去看看文件里面写进去没有:

8ad57cb9a7a2e081de7a94701887199c.png

总结

到这里我们就完成了一个具有基本功能的web服务器,代码不复杂,但是对于帮我们理解Node web服务器的原理很有帮助。但是上述代码还有个很大的问题就是:代码很丑!所有代码都写在一堆,而且HTTP动词和路由匹配全部是使用if条件判断,如果有几百个API,再配合十来个动词,那代码简直就是个灾难!所以我们应该将路由处理HTTP动词静态文件数据持久化这些功能全部抽离出来,让整个应用变得更优雅,更好扩展。这就是ExpressKoa这些框架存在的意义,下一篇文章我们就去Express的源码看看他是怎么解决这个问题的,点个关注不迷路~

本文可运行代码示例已经上传GitHub,大家可以拿下来玩玩:/tree/master/Examples//HttpServer

文章的最后,感谢你花费宝贵的时间阅读本文,如果本文给了你一点点帮助或者启发,请不要吝啬你的赞和GitHub小星星,你的支持是作者持续创作的动力。

作者博文GitHub项目地址:

作者掘金文章汇总:

我也搞了个公众号[进击的大前端],不打广告,不写水文,只发高质量原创,欢迎关注~

这篇关于node ref char*_使用Node.js原生API写一个web服务器 - _蒋鹏飞的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/490367

相关文章

从零教你安装pytorch并在pycharm中使用

《从零教你安装pytorch并在pycharm中使用》本文详细介绍了如何使用Anaconda包管理工具创建虚拟环境,并安装CUDA加速平台和PyTorch库,同时在PyCharm中配置和使用PyTor... 目录背景介绍安装Anaconda安装CUDA安装pytorch报错解决——fbgemm.dll连接p

pycharm远程连接服务器运行pytorch的过程详解

《pycharm远程连接服务器运行pytorch的过程详解》:本文主要介绍在Linux环境下使用Anaconda管理不同版本的Python环境,并通过PyCharm远程连接服务器来运行PyTorc... 目录linux部署pytorch背景介绍Anaconda安装Linux安装pytorch虚拟环境安装cu

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

使用Python创建一个能够筛选文件的PDF合并工具

《使用Python创建一个能够筛选文件的PDF合并工具》这篇文章主要为大家详细介绍了如何使用Python创建一个能够筛选文件的PDF合并工具,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录背景主要功能全部代码代码解析1. 初始化 wx.Frame 窗口2. 创建工具栏3. 创建布局和界面控件4

一文详解如何在Python中使用Requests库

《一文详解如何在Python中使用Requests库》:本文主要介绍如何在Python中使用Requests库的相关资料,Requests库是Python中常用的第三方库,用于简化HTTP请求的发... 目录前言1. 安装Requests库2. 发起GET请求3. 发送带有查询参数的GET请求4. 发起PO

Java中的Cursor使用详解

《Java中的Cursor使用详解》本文介绍了Java中的Cursor接口及其在大数据集处理中的优势,包括逐行读取、分页处理、流控制、动态改变查询、并发控制和减少网络流量等,感兴趣的朋友一起看看吧... 最近看代码,有一段代码涉及到Cursor,感觉写法挺有意思的。注意是Cursor,而不是Consumer

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》:本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》:本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同时,还强调了响应式设计的重要性,以确保图片墙在不同设备上都能良好显示,详细内容请阅读本文,希望能对你有所帮助...

Rust中的注释使用解读

《Rust中的注释使用解读》本文介绍了Rust中的行注释、块注释和文档注释的使用方法,通过示例展示了如何在实际代码中应用这些注释,以提高代码的可读性和可维护性... 目录Rust 中的注释使用指南1. 行注释示例:行注释2. 块注释示例:块注释3. 文档注释示例:文档注释4. 综合示例总结Rust 中的注释