NodeJs的Http服务器的搭建

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

NodeJs启动Http服务

发送Http请求

使用Http服务,先进行使用require('http'); 进行使用:Http Api

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

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

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

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

接收Http请求

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

  1. var http = require('http');
  2. var server = http.createServer();
  3. server.on('request',function(res,resp){
  4. console.log(res.method);
  5. resp.write("hello changsha");
  6. resp.end();
  7. });
  8. server.listen(8080, function() {
  9. console.log("localhost:8080")
  10. });

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

编码格式(中文乱码)

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

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

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

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

返回网页信息

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

  1. var http = require('http');
  2. var fs = require('fs')
  3. var server = http.createServer();
  4. server.on('request', function(res, resp) {
  5. console.log(res.method);
  6. resp.setHeader('Content-type', 'text/html;charset=utf-8')
  7. fs.readFile('./http2.html', 'utf8', (err,data) => {
  8. resp.end(data);
  9. })
  10. });
  11. server.listen(8080, function() {
  12. console.log("localhost:8080")
  13. });

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

图片的响应

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

  1. var http = require('http');
  2. var fs = require('fs')
  3. var server = http.createServer();
  4. server.on('request', function(res, resp) {
  5. console.log(res.url);
  6. var urls = res.url;
  7. if (urls == '/') {
  8. resp.setHeader('Content-type','text/html;charset=utf-8')
  9. fs.readFile('./http2.html', 'utf8', (err, data) => {
  10. resp.end(data);
  11. })
  12. } else {
  13. fs.readFile('..' + urls, (err, data) => {
  14. //读取这个图片的路径
  15. resp.end(data);
  16. })
  17. }
  18. });
  19. server.listen(8080, function() {
  20. console.log("localhost:8080")
  21. });

在node下运行这个js文件,查看端口可以看到这个html页面的图片就显示出来了

在这里插入图片描述

其他静态资源的响应

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

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

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

  1. var http = require('http');
  2. var fs = require('fs')
  3. var server = http.createServer();
  4. server.on('request', function(res, resp) {
  5. console.log(res.url);
  6. var urls = res.url;
  7. if (urls == '/') {
  8. resp.setHeader('Content-type', 'text/html;charset=utf-8')
  9. fs.readFile('./http2.html', 'utf8', (err, data) => {
  10. resp.end(data);
  11. })
  12. } else { //在这里是对其他所有静态资源进行响应
  13. fs.readFile('.' + urls, (err, data) => {
  14. resp.end(data);
  15. })
  16. }
  17. });
  18. server.listen(8080, function() {
  19. console.log("localhost:8080")
  20. });

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

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

在这里使用的是文件系统当中的一个readdir方法,API文档,单击前往
在这里插入图片描述
使用代码实现:

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

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

发表评论

表情:
评论列表 (有 0 条评论,454人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Http服务器

    一、Nginx介绍 > Nginx是一个高性能的HTTP和方向代理服务,也是一个IMAP/POP3/SMTP服务。 > > 其特点是占用内存少,并发能力强,中国大陆使用

    相关 自己https服务器详解

    研究了一天多,终于明白了域名、SSL证书和项目之间的关系了!!域名和云服务器都是买的腾讯云,SSL证书是在腾讯云里免费领取的。我推荐腾讯云是因为我觉得好用而已,不是为了打广告,