欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

利用node.js搭建简易的http服务程序

程序员文章站 2022-04-18 11:29:02
...

1.使用http模块建立简单的HTTP服务 

创建一个名为server.js的文件，内容如下:

/*
1. 加载HTTP模块
2. 创建http服务对象
3. 监听用户请求事件
4. 启动服务
*/

// 1、加载http模块
var http = require('http');
 
// 2、创建一个http服务对象
var server = http.createServer();
 
// 3、监听用户的请求事件（request事件）
// 回调函数中有两个参数
// request 对象 包含用户请求报文中所有内容，通过request对象可以获取所有用户提交过来的数据
// response 对象 用来向用户响应一些数据，当服务器要向客户端响应数据的时候必须使用response对象
server.on('request', function (req, res) {
  res.write('Hello World!!!');
  // 对于每一个请求，服务器必须结束响应，否则，客户端（浏览器）会一直等待服务器响应结束
  res.end();
});
 
// 4、启动服务
server.listen(8080, function () {
  console.log('服务器启动了，请访问：http://localhost:8080');
});

进入dos模式，进入到server.js的路径,运行node server.js  ，然后就可以在浏览器打开http://localhost:8080

利用node.js搭建简易的http服务程序

利用node.js搭建简易的http服务程序

2. 优化代码

var http = require('http'); 
var server = http.createServer(function (req, res) {
  res.write('Hello Node js!!!');
  res.end();
});
 
server.listen(8080, function () {
  console.log('服务器已经启动，url：http://localhost:8080');
});

运行方式和第1步是相同

2. 继续优化代码

var http = require('http');
 
http.createServer(function (req, res) {
  res.write('Hello Node js!!!');
  res.end();
}).listen(8080, function () {
  console.log('服务器已经启动，url：http://localhost:8080');
});

3. 用ES6优化代码

const http = require('http');
 
http.createServer(function (req, res) {
  res.write('Hello ,这里是Node js 测试服务器!!! ');
  res.end();
}).listen(8080, function () {
  console.log('服务器已经启动，url：http://localhost:8080');
});

4. 解决中文乱码问题

const http = require('http');
 
const server = http.createServer();
server.on('request', function (req, res) {  
  // 编码时默认使用的是utf-8，但是浏览器在解析时，浏览器默认的解析方法不是utf-8
  // 解决乱码的思路就是：服务器通过设置http响应报文头，告诉浏览器使用相应的编码来解析网页
  // 'text/plain'纯文本
  res.setHeader('Content-Type', 'text/plain; charset=utf-8'); 
  res.write('Hello ,这里是Node js 测试服务器');
  res.end();
});
server.listen(8080, function () {
  console.log('服务器已经启动，url：http://localhost:8080');
});

5. 解决中文乱码问题以及设置http响应报文头解决浏览器显示html的问题

const http = require('http'); 
const server = http.createServer();
server.on('request', function (req, res) {  
  // 编码时默认使用的是utf-8，但是浏览器在解析时，浏览器默认的解析方法不是utf-8
  // 解决乱码的思路就是：服务器通过设置http响应报文头，告诉浏览器使用相应的编码来解析网页
  // 'text/plain'纯文本
  res.setHeader('Content-Type', 'text/plain; charset=utf-8'); 
  res.setHeader('Content-Type', 'text/html; charset=utf-8');
  res.write('<h1>Hello ,这里是Node js 测试服务器</h1>');
  
  res.write('<h4> 这个界面不乱码，同时还可以有标签 </h4>');
  res.end();
});
server.listen(8080, function () {
  console.log('服务器已经启动，url：http://localhost:8080');
});

6. 根据不同的请求做出不同响应

const http = require('http'); 
const server = http.createServer();
server.on('request', function (req, res) {  
  res.setHeader('Content-Type', 'text/plain; charset=utf-8'); 
  res.setHeader('Content-Type', 'text/html; charset=utf-8');
  console.log(req.url);
  if (req.url === '/' || req.url === '/index') {
	res.write('<h1>Hello ,这里首页</h1>');  
    res.end();
  } else if (req.url === '/login') {
    res.write('<h1>Hello ,这里登录页</h1>');  
    res.end();
  } else if (req.url === '/register') {
    res.write('<h1>Hello ,这里注册用户信息页</h1>');  
    res.end();
  } else if (req.url === '/order') {
	
	res.write('<h1>Hello ,这里订单页</h1>');  
	res.write(getContent());  
    res.end();
  } else {
    res.end('404, not found! 客户端错误！');
  }
  
});
server.listen(8080, function () {
  console.log('服务器已经启动，url：http://localhost:8080');
});

function getContent(){
	var s = ['apple','banana','watermalean'];
	return s.toString().toUpperCase();	
}

7. 根据用户不同的请求 ，读取不同HTML文件（带图片）响应

分别创建3个静态的html文件：
index.html

<!DOCTYPE html>
<html>
	<head>	
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<meta name="renderer" content="webkit">
		<meta name="force-rendering" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">		
		<meta name="apple-mobile-web-app-status-bar-style" content="black">    
		<meta name="referrer" content="always">
		<meta http-equiv="Cache-Control" content="no-siteapp">
	</head>
	<body>
		<h1> 这里是首页</h1>	
		<img src="../images/index.jpg" alt="index图片">
	</body>
</html>


login.html

<!DOCTYPE html>
<html>
	<head>	
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<meta name="renderer" content="webkit">
		<meta name="force-rendering" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">		
		<meta name="apple-mobile-web-app-status-bar-style" content="black">    
		<meta name="referrer" content="always">
		<meta http-equiv="Cache-Control" content="no-siteapp">
	</head>
	<body>
		<h1> 这里是登录页</h1>
	</body>
</html>


register.html

<!DOCTYPE html>
<html>
	<head>	
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<meta name="renderer" content="webkit">
		<meta name="force-rendering" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
				<meta name="apple-mobile-web-app-status-bar-style" content="black">    
		<meta name="referrer" content="always">
		<meta http-equiv="Cache-Control" content="no-siteapp">
	</head>
	<body>
		<h1> 注册用户信息</h1>
	</body>
</html>

代码文件的目录结构

利用node.js搭建简易的http服务程序

images 目录下保存一个index.jpg

最终server-1.1.js 代码如下：

const http = require('http'); 
const fs = require('fs');
const path = require('path');
const server = http.createServer();
server.on('request', function (req, res) {  
  console.log(req.url);
  if (req.url === '/' || req.url === '/index') {
	fs.readFile(path.join(__dirname, './', 'index.html'), function (err, data) {
      if (err){
		console.log(err);
		throw err;  
	  } 
      res.end(data);
    });
  } else if (req.url === '/login') {
	 // path.join第二个参数 ./表示在当前目录下查找文件
	fs.readFile(path.join(__dirname, './', 'login.html'), function (err, data) {
      if (err){
		console.log(err);
		throw err;  
	  } 
      res.end(data);
    });
  } else if (req.url === '/register') {
	fs.readFile(path.join(__dirname, './', 'register.html'), function (err, data) {
      if (err){
		console.log(err);
		throw err;  
	  } 
      res.end(data);
    });
  }else if (req.url === '/images/index.jpg') {
	fs.readFile(path.join(__dirname, 'images', 'index.jpg'), function (err, data) {
      if (err){
		console.log(err);
		throw err;  
	  } 
	  res.setHeader('Content-Type', 'image/jpeg');
      res.end(data);
    });  
  } else if (req.url === '/order') {	
	res.write('<h1>Hello ,这里订单页</h1>');  
	res.write(getContent());  
    res.end();
  } else {
    res.end('404, not found! 客户端错误！');
  }
  
});
server.listen(8080, function () {
  console.log('服务器已经启动，url：http://localhost:8080');
});

function getContent(){
	var s = ['apple','banana','watermalean'];
	return s.toString().toUpperCase();	
}

在if (req.url === '/images/index.jpg') 这个判断里面处理浏览器发送的读取图片文件的请求，注意设置的HTTP 头类型是'Content-Type', 'image/jpeg'，如果是处理客户端发送的读取css的请求，那么res.setHeader('Content-Type', 'text/css');

启动服务端之后，在浏览器输入下面的地址会看到不同的效果
http://localhost:8080/index
http://localhost:8080/
http://localhost:8080/register
http://localhost:8080/login

通过以上代码可以看到如果要响应客户端的请求，需要判断request里面的末尾关键字才行，同时还需要根据不同的请求作出不同的响应，比如请求HTML、图片和css，服务器读取的文件也不同。

相关标签： nodejs

上一篇： vue开发学习之环境搭建node.js

下一篇： JS 如何判断当前页面是否全屏

推荐阅读