NodeJs的Http服务器的搭建

﹏ヽ暗。殇╰゛Y 2022-12-13 01:21 228阅读 0赞

### NodeJs启动Http服务 ###

#### 发送Http请求 ####

使用Http服务，先进行使用`require('http')；` 进行使用：[Http Api][]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center]  
在后面进行搭建server服务器，使用的是一个[ createServer方法][createServer]方法在api文档进行查看，以及使用这个方法之后会返回一个Server类。在同级api文档目录下，进行查看Server类所包含的方法。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 1]  
其中Server类当中进行查看所对应的方法，方法还是比较多的。在里面listen方法用于启动HTTP服务器以侦听连接。此方法与server.listen()from相同net.Server。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 2]  
在这个listen方法当中简介如下：简单来说，在方法当中给定一个端口号进行监听，第二个传递给一个回调函数。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 3]  
而使用代码实现服务端启动：

var http = require('http');
    
    var server = http.createServer();
    
    server.listen(8080, function() { 
    	console.log("localhost:8080")
    });

运行这个文件，会发现该端口正在运行，不会再一次弹出文件目录，或者在浏览器当中直接访问8080端口，会发现浏览器上方一直在转圈，到这里，请求就已经成功发送了。

![在这里插入图片描述][20201008215703116.png_pic_center]  
在这里，我们还可以进行查看response的[end方法 ][end_]我们可以发现，在end方法进行调用的时候，end方法当中所带的字符串等也同样可以和write一样进行写入到浏览器当中。因此我们对于部分简单的文本写入可以省略write方法。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 4]

#### 接收Http请求 ####

接收对server类使用一个on进行绑定上一个事件，绑定的参数包括一个request和一个回调函数。回调函数当中也包含两个参数一个request和response，接收和响应数据。在回调函数之间可以把request打印出来进行查看，并且response的write方法进行写入数据到浏览器当中，使用end方法进行结束，代码如下：

var http = require('http');
    
    var server = http.createServer();
    
    server.on('request',function(res,resp){ 
    	console.log(res.method);
    	resp.write("hello changsha");
    	resp.end();
    });
    
    server.listen(8080, function() { 
    	console.log("localhost:8080")
    });

之后运行这个js文件，在浏览器当中查看8080端口，可以看到write方法的参数已经被写入到网页当中了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 5]

#### 编码格式（中文乱码） ####

在这里，同样的，我们再使用response.write进行写入内容，这一次写入中文，会发现在浏览器当中出现了乱码。这是因为在response进行响应的时候没有设置编码格式。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 6]  
因此我们在代码当中加上一条设置编码格式的代码即可。

resp.setHeader('Content-type', 'text/plain;charset=utf-8')

反之使用不同的编码格式会对不同文本进行不同的解析，如使用以下代码会把html代码块进行解析。

resp.setHeader('Content-type', 'text/html;charset=utf-8')

#### 返回网页信息 ####

在这里http搭建好了之后，我们进行响应返回不能是怎么简单一个文本，而应该返回一个html大的页面，在这里我们实现的思路是，先使用filesystem模块进行读取html文件内容再进行返回给response进行响应即可。代码实现如下：

运行项目，在浏览器当中查看8080这个端口，看http2.html这个网页文件是否被响应出来。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 7]

#### 图片的响应 ####

对于图片的响应，在这里由于路径不一致，进行显示是无法响应的，在这里的request的url属性可以看到请求的路径，在浏览器当中查看。路径不一样所以是无法做出响应的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 8]  
所以我们需要对不同路径下的不一样的请求做出不一样的响应。在读取图片文件的时候要注意urls这个的值和你本地图片的地址是否一致。不一致的话使用字符串进行拼接。而且图片本身就是二进制文件，所以不需要进行指定编码格式。代码如下所示

在node下运行这个js文件，查看端口可以看到这个html页面的图片就显示出来了  
。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 9]

#### 其他静态资源的响应 ####

在这里以js文件进行测试，如在前面的html文件当中进行引入一个js文件，在这个js文件当中进行绑定一个单击事件，给一个id为btn的按钮绑定一个事件。

document.getElementById('btn').onclick = function(){ 
    	alert("this is button")
    }

再使用script标签把这个js文件进行引入到html页面当中。在这里注意一下项目的结构，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 10]  
都是同一级的目录下，所以在前面进行判断是需要确定是不是`/`或者`./`这两个路径即可。修改前面的Http3.js文件。

在node下运行这个js文件，在浏览器当中进行查看，看这个导入的js文件是否起到了作用。可以看到会有一个alert弹出。其余的css等页面也是同理进行响应。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 11]

#### 获取当前的目录下所有文件名 ####

在这里使用的是文件系统当中的一个`readdir`方法，[API文档，单击前往][API]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 12]  
使用代码实现：

var fs = require('fs')
    
    fs.readdir('./', 'utf8', (err, data) => { 
    	console.log(data)
    })

运行这个js查看输出，返回的是一个数组类型的值。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 13]

[Http Api]: https://nodejs.org/dist/latest-v12.x/docs/api/http.html#http_http
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/7d9af19a657e47a5a90b9143bf8ee668.png
[createServer]: https://nodejs.org/dist/latest-v12.x/docs/api/http.html#http_http_createserver_options_requestlistener
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/6c547e449ac34b03a983e9ac6adb8b32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/183fb50bcadc49369a40e01108e70ebc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/83681d9300ca4aa28ab9a931c345a1f7.png
[20201008215703116.png_pic_center]: /images/20221123/b6d63496f9e94c7b92e88599404f4ad8.png
[end_]: https://nodejs.org/dist/latest-v12.x/docs/api/http.html#http_response_end_data_encoding_callback
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/78943ef3cfc54455869d1684a7a3d9ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/6a3a10d0ac144faeadf3cafd30fbd0db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/e8615193e11d448f989633a924ee7848.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/67d5167d44714258a97a05f488172ab2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/22722b74abc04508884f44a00915c613.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/d7607722c3c64909a34aa42ea1483c20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/d8bd424ff39d4081991bb431644fa46a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/4d27a485f14449af8fd1479bac9379f0.png
[API]: https://nodejs.org/dist/latest-v12.x/docs/api/fs.html#fs_fs_readdir_path_options_callback
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221123/af51cd0747b44dc9a3bdc4a419885ca4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221123/43dcbff1e05d40a1b902fda9d1b8b416.png