http/https + nodejs 同时响应http和https请求(附含SSL证书申请)

前言

Https 协议 是在 Http 协议的基础上进行了数据加密。所以使用 Https 协议 进行请求访问时，一定要有 SSL证书 (申请流程可以参考 SSL证书申请)。这篇文章主要讲述搭建简易服务端，用来接收 http 和 https 请求。

一、将SSL证书导入项目内

提示： 即使你没有 SSL证书， 以下代码也会对你有所帮助。尤其是第六部分，在项目开发中实用性很强。

1、我们将下载的 SSL证书 重新命名(包括修改后缀，申请流程可以参考 SSL证书申请)，私钥 文件命名为 private.key ，证书 文件命名为 file.crt 。之后将这两个文件拷贝到项目中，其目录结构如下 (仅做参考，可以自由创建目录)。

2、可以看到上述目录有几个文件，我们主要讲述router.js、app.js和server.js ，核心部分是 server.js文件，希望有序阅读。像node_modules、package-lock.json 和 package.json文件需要 npm所需的模块, 会用到 nodeJs，不了解的话，可以访问 NodeJs 服务端的简单搭建 或 NodeJs教程 了解一下，很简单的。

注意：该博文全部代码可以直接复制，如果出现 某某模块不存在 的错误，就需要npm对应的模块。

二、router.js

'use strict'
var express = require('express')		// 记得npm 'express' 模块
var router = express.Router()

var value = "1"
router.get("/", function(req, res, next){
	res.send("/")
})

router.get("/setValue", function(req, res, next){
	// 获取key - value
	var keys = Object.keys(req.query)
	
	// 以返回第一个参数为例
	value = req.query[keys[0]]
	
	// 简单处理一下value 
	value = value || {value:null}
	res.send(value)
})

router.get("/getValue", function(req, res, next){	
	// 有上述的set，怎么也得有个配套的get
	res.send(value)
})

module.exports = router

三、app.js

'use strict'
var express = require("express")
var path = require("path")
var cookieParser = require('cookie-parser')		// 记得npm 'cookie-parser' 模块
var bodyParser = require('body-parser')			// 记得npm 'body-parser' 模块
var router = require("./router")
var app = express()

app.all("*", function(req, res, next){
	res.header('Access-Control-Allow-Origin', '*')
	res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild')
	res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS')
	
	if (req.method == 'OPTIONS') 
		res.send(200) /*让options请求快速返回*/
	else 
		next()
})

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: false}))
app.use(cookieParser())
app.use("/", router)

module.exports = app

四、server.js

'use strict'
var fs = require('fs')
var path = require('path')
var http = require('http')
var https = require('https')
var app = require('./app')

//检测端口号是否合法
var normalizePort = function(val)
{
	var port = parseInt(val, 10)
	
	if(isNaN(port))
		return val

	if(port >= 0)
		return port

	return false
}

// 获取ssl证书所在的路径
var ssl_path = path.resolve(__dirname, '.') + '/ssl'

// 将ssl证书配置在对象内
var credentials = {
  key: fs.readFileSync( ssl_path + '/private.key', 'utf8'),
  cert: fs.readFileSync(ssl_path + '/file.crt', 'utf8')
}

// 创建https， 端口号是8080 (如果端口号不能用，需要查看设置是否被拦截或不信任)
var https_port = normalizePort('8080')
var https_server = https.createServer(credentials, app)
https_server.listen(https_port)

// 创建http，端口号是8000 (如果端口号不能用，需要查看设置是否被拦截或不信任)
var http_port = normalizePort('8000')
var http_server = http.createServer(app)
http_server.listen(http_port)

五、执行结果

1、打开终端， cd 到 server.js 所在目录，点击回车，接着输入指令 node server.js 并回车，这个简易的服务端便开始运行了。如果报了一些诸如模块不存在的错误，就需要 npm 该模块了。成功运行的话什么也没有输出，如下图。

2、我们输入不同网址来对比一下。
(1)输入网址 http://localhost:8000/setValue?&age=18， 网页显示一个 18。
(2)输入网址 http://localhost:8080/setValue?&age=18， 网页 无法正常打开。
(3)输入网址 https://localhost:8080/setValue?&age=18， 网页显示一个 18。
(4)输入网址 https://localhost:8000/setValue?&age=18， 网页 无法正常打开。

通过上述四个对比，我们可以了解到在同一个服务端内，http请求 和 https请求 都被监测到了，但不同的协议只能访问相对应的端口，否则访问失败。
3、我们在输入网址 https://localhost:8000/getValue, 网页显示一个 18。

通过网页方式访问服务端已经完成了。可在实际开发中，我们总不能所有的东西都通过网页访问吧，接下来我们了解一下怎么在项目内用代码访问上述服务端。

六、客户端代码访问服务端

1、上述内容只是在网页端进行简单的操作，在项目内实用性不强。接下来，讲一下实用性强的开发内容。我们创建一个名为 request_server.js 的文件，编辑内容如下(代码可直接拷贝)：

var request_server = 
{
    value:0,    
    request_server_value : function()
    {
        var xmlhttp = null
        if(window.XMLHttpRequest)
            xmlhttp = new XMLHttpRequest()
        else
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
	
		// 在 onreadystatechange 调用该 callback，该函数在下面
        var callback = function(ret, data)
        {
            if(ret)
            {
            	// 对数据做些简单的处理
            	// 该示例在请求访问时，传递的参数是可转义的类型，如 "1"和1, 如果是其他类型，可以自行修改下述两行代码
                var _value = typeof(data) == 'object' ? '0':data
                https_request.value = parseInt(_value)
	
				// 打印一下访问到的结果
                console.log(">>>> value is ", https_request.value)
                try{

                }catch(e){

                }
            }
            else
                https_request.value = 0
        }

        xmlhttp.onreadystatechange = function()
        {
            if(xmlhttp.readyState == 4)
                callback?callback(xmlhttp.status==200, xmlhttp.responseText):''
        }
	
		// 做本地访问操作，localhost 可以是你的远超服务端的 ip地址 或 域名
        xmlhttp.open("GET", 'https://localhost:8080/getValue', true)
        xmlhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
        xmlhttp.send()
    },
}

2、然后我们把 request_server.js 文件放到项目内。我呢，为了测试做了个简单的按钮，其回调函数是 click_callback()，代码如下：

click_callback: function ()
{
	// 点击按钮时，调用 request_server_value 函数
    request_server.request_server_value()
}

这个按钮的功能只能靠你自己完成了，客户端的种类繁多，一时也说不清楚。
点击按钮，并打开编辑器的控制台，发现收到的数据是18，那么这就成功了。

所有的讲解都结束了，希望对你有所帮助。