使用Node.js原生API写一个web服务器

袁雄奎 發表於 2020-10-26 14:15:00

<code>Node.js</code>是<code>JavaScript</code>基础上发展起来的语言，所以前端开发者应该天生就会一点。一般我们会用它来做<code>CLI工具</code>或者<code>Web服务器</code>，做<code>Web服务器</code>也有很多成熟的框架，比如<code>Express</code>和<code>Koa</code>。但是<code>Express</code>和<code>Koa</code>都是对<code>Node.js</code>原生<code>API</code>的封装，所以其实不借助任何框架，只用原生<code>API</code>我们也能写一个<code>Web服务器</code>出来。本文要讲的就是不借助框架，只用原生<code>API</code>怎么写一个<code>Web服务器</code>。因为在我的计划中，后面会写<code>Express</code>和<code>Koa</code>的源码解析，他们都是使用原生API来实现的。所以本文其实是这两个源码解析的前置知识，可以帮我们更好的理解<code>Express</code>和<code>Koa</code>这种框架的意义和源码。本文仅为说明原生API的使用方法，代码较丑，请不要在实际工作中模仿！
本文可运行代码示例已经上传GitHub，大家可以拿下来玩玩：https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/Node.js/HttpServer
<h2 id="hello-world">Hello World</h2>
要搭建一个简单的<code>Web服务器</code>，使用原生的<code>http</code>模块就够了，一个简单的<code>Hello World</code>程序几行代码就够了：
<pre><code class="language-javascript">const http = require('http')

const port = 3000

const server = http.createServer((req, res) => {
res.statusCode = 200
res.setHeader('Content-Type', 'text/plain')
res.end('Hello World')
})

server.listen(port, () => {
console.log(`Server is running on http://127.0.0.1:${port}/`)
})
</code></pre>
这个例子就很简单，直接用<code>http.createServer</code>创建了一个服务器，这个服务器也没啥逻辑，只是在访问的时候返回<code>Hello World</code>。服务器创建后，使用<code>server.listen</code>运行在<code>3000</code>端口就行。
这个例子确实简单，但是他貌似除了输出一个<code>Hello World</code>之外，啥也干不了，离我们一般使用的<code>Web服务器</code>还差了很远，主要是差了这几块：
<blockquote>
<ol>
<li>不支持<code>HTTP</code>动词，比如<code>GET</code>，<code>POST</code>等</li>
<li>不支持路由</li>
<li>没有静态资源托管</li>
<li>不能持久化数据</li>
</ol>
</blockquote>
前面三点是一个<code>Web服务器</code>必备的基础功能，第四点是否需要要看情况，毕竟目前很多<code>Node</code>的<code>Web服务器</code>只是作为一个中间层，真正跟数据库打交道做持久化的还是各种微服务，但是我们也应该知道持久化怎么做。
所以下面我们来写一个真正能用的<code>Web服务器</code>，也就是说把前面缺的几点都补上。
<h2 id="处理路由和http动词">处理路由和HTTP动词</h2>
前面我们的那个<code>Hello World</code>也不是完全不能用，因为代码位置还是得在<code>http.createServer</code>里面，我们就在里面添加路由的功能。为了跟后面的静态资源做区分，我们的API请求都以<code>/api</code>开头。要做路由匹配也不难，最简单的就是直接用<code>if</code>条件判断就行。为了能拿到请求地址，我们需要使用<code>url</code>模块来解析传过来的地址。而<code>Http</code>动词直接可以用<code>req.method</code>拿到。所以<code>http.createServer</code>改造如下：
<pre><code class="language-javascript">const url = require('url');

const server = http.createServer((req, res) => {
// 获取url的各个部分
// url.parse可以将req.url解析成一个对象
// 里面包含有pathname和querystring等
const urlObject = url.parse(req.url);
const { pathname } = urlObject;

// api开头的是API请求
if (pathname.startsWith('/api')) {
// 再判断路由
if (pathname === '/api/users') {
 // 获取HTTP动词
 const method = req.method;
 if (method === 'GET') {
 // 写一个假数据
 const resData = [
 {
 id: 1,
 name: '小明',
 age: 18
 },
 {
 id: 2,
 name: '小红',
 age: 19
 }
 ];
 res.setHeader('Content-Type', 'application/json')
 res.end(JSON.stringify(resData));
 return;
 }
}
}
});
</code></pre>
现在我们访问<code>/api/users</code>就可以拿到用户列表了：
<img src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d77769e6f05743428519b9bae79611c1~tplv-k3u1fbpfcp-zoom-1.image">
<h2 id="支持静态文件">支持静态文件</h2>
上面说了<code>API</code>请求是以<code>/api</code>开头，也就是说不是以这个开头的可以认为都是静态文件，不同文件有不同的<code>Content-Type</code>，我们这个例子里面暂时只支持一种<code>.jpg</code>吧。其实就是给我们的<code>if (pathname.startsWith('/api'))</code>加一个<code>else</code>就行。返回静态文件需要：
<blockquote>
<ol>
<li>使用<code>fs</code>模块读取文件。</li>
<li>返回文件的时候根据不同的文件类型设置不同的<code>Content-Type</code>。</li>
</ol>
</blockquote>
所以我们这个<code>else</code>就长这个样子：
<pre><code class="language-javascript">// ... 省略前后代码 ...

else {
// 使用path模块获取文件后缀名
const extName = path.extname(pathname);

if (extName === '.jpg') {
// 使用fs模块读取文件
fs.readFile(pathname, (err, data) => {
 res.setHeader('Content-Type', 'image/jpeg');
 res.write(data);
 res.end();
})
}
}
</code></pre>
然后我们在同级目录下放一个图片试一下：
<img src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e3099e18763c49189344ae44bc5961dd~tplv-k3u1fbpfcp-zoom-1.image">
<h2 id="数据持久化">数据持久化</h2>
数据持久化的方式有好几种，一般都是存数据库，少数情况下也有存文件的。存数据库比较麻烦，还需要创建和连接数据库，我们这里不好<code>demo</code>，我们这里演示一个存文件的例子。一般<code>POST</code>请求是用来存新数据的，我们在前面的基础上再添加一个<code>POST /api/users</code>来新增一条数据，只需要在前面的<code>if (method === 'GET')</code>后面加一个<code>POST</code>的判断就行：
<pre><code class="language-javascript">// ... 省略其他代码 ...

else if (method === 'POST') {
// 注意数据传过来可能有多个chunk
// 我们需要拼接这些chunk
let postData = '';
req.on('data', chunk => {
postData = postData + chunk;
})

req.on('end', () => {
// 数据传完后往db.txt插入内容
fs.appendFile(path.join(__dirname, 'db.txt'), postData, () => {
 res.end(postData);// 数据写完后将数据再次返回
});
})
}
</code></pre>
然后我们测试一下这个<code>API</code>:
<img src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1072011bebc4b778e42fb49b51184b4~tplv-k3u1fbpfcp-zoom-1.image">
再去看看文件里面写进去没有：
<img src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ac84318f7e34cda84188c4ff9588fd2~tplv-k3u1fbpfcp-zoom-1.image">
<h2 id="总结">总结</h2>
到这里我们就完成了一个具有基本功能的<code>web服务器</code>，代码不复杂，但是对于帮我们理解<code>Node web服务器</code>的原理很有帮助。但是上述代码还有个很大的问题就是：代码很丑！所有代码都写在一堆，而且<code>HTTP动词</code>和路由匹配全部是使用<code>if</code>条件判断，如果有几百个<code>API</code>，再配合十来个动词，那代码简直就是个灾难！所以我们应该将<code>路由处理</code>，<code>HTTP动词</code>，<code>静态文件</code>，<code>数据持久化</code>这些功能全部抽离出来，让整个应用变得更优雅，更好扩展。这就是<code>Express</code>和<code>Koa</code>这些框架存在的意义，下一篇文章我们就去<code>Express</code>的源码看看他是怎么解决这个问题的，点个关注不迷路~
本文可运行代码示例已经上传GitHub，大家可以拿下来玩玩：https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/Node.js/HttpServer
文章的最后，感谢你花费宝贵的时间阅读本文，如果本文给了你一点点帮助或者启发，请不要吝啬你的赞和GitHub小星星，你的支持是作者持续创作的动力。
欢迎关注我的公众号进击的大前端第一时间获取高质量原创~
“前端进阶知识”系列文章：https://juejin.im/post/5e3ffc85518825494e2772fd
“前端进阶知识”系列文章源码GitHub地址： https://github.com/dennis-jiang/Front-End-Knowledges
<img src="https://test-dennis.oss-cn-hangzhou.aliyuncs.com/QRCode/QR1270.png"> 
来源：https://www.cnblogs.com/dennisj/p/13878243.html

頁: [1]

琼殿技术论坛's Archiver

使用Node.js原生API写一个web服务器