三、第一节 web服务器工作原理

水深无声 2023-02-18 04:27 38阅读 0赞

由于是JavaScript编写的，由于安全的原因，很多浏览器例如chrome它是不允许调用本地JavaScript文件的，所以你只能把它放在Web服务器端，通过Web服务器下载到本地，然后在运行这些程序。

另外一个原因是我们后面还要编写这个信令服务器 ，那么信令服务器我们也使用Web服务器再加上一些库，如socket IO来构建我们 的信令服务器，因为这个原因，首先我们必须向大家介绍一下web服务器的工作原理，这样在我们后面的学习才更加顺畅。

下面我给大家介绍一下web服务器的选型，现在市面上有很多web服务器，比如Nodejs、Nginx、Apache，这三个是非常有名的web服务器了，其中Apache是比较老的，市场占有率大概是80%，直到Nginx的出现，从性能方面比这个Apache更高，灵活度什么的都比这个Apache要好得多，所以Nginx逐渐就把这个Apache给取代了。Nodejs是比较特殊的，它的特殊在于他可以通过JavaScript开发服务端程序，也就是说你通过JavaScript开发的Web服务器的同时呢又可以将这个应用程序也是JavaScript放入服务端，这样浏览器发送一个Http请求，然后将服务端的代码下到本地去执行，也就是说他有两个JavaScript，大家要搞清楚，一个是用于控制服务器的，一个是用于下载到客户端去运行的，由于技术的发展，我们认为JavaScript是未来的一个趋势，以后所有的程序可能都是在一个浏览器中去执行了，那这样nodeJS就显得它的特别之处了，是很有未来市场的一个web服务器。因为做前端用JavaScript做后端也同样用JavaScript，这样JavaScript的前端程序员就可以无缝的转化过去。我们这里使用的也是NodeJS.

下面我们主要介绍一下Web服务的工作原理；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70][]

首先我们通过上图看出有个人通过浏览器敲入http，点回车那么这个请求就被浏览器发送给力web服务，就发送 了一个Http Request，这个后端服务呢，一般是挂着一个数据库，它需要做很多的逻辑处理，处理完之后，会给浏览器一个响应，就是Http Response,拿到这个响应之后实际是一个HTML的页面，就会将这个Hello World显示出来。

当然现在的前端不可能是简简单单的一个页面了，还有可能是风格类型 、用什么样的字体如何展现等 ，会有一个css文件 ，还会又一个JavaScript文件 ，来控制整个页面的行为，那用户拿到这个页面之后，在里面点击一些鼠标事件等等就会改变这个页面不同的行为，那这样就是一个完整的web服务的工作原理。

接下来我们再看nodeJS的工作原理，如下图就将整个工作的情况给我们大致梳理清楚了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 1][]

首先是APPLICATION，也就是我们自己开发的JavaScript程序，他首先会输出给V8引擎，这个V8引擎大家都非常清楚了，是从chrome的项目中抽取出来的，主要对JavaScript进行一些解析工作，解析完之后生成一个二进制代码；接下来是NODEJS本身他自己的一些API,解析后的二进制代码去调用NODEJS API，这里称为NODE BINDINGS,调用之后NODE JS还会调用LIBUV的事件处理库，它的工作原理是一直循环等待事件处理，请求过来的时候会首先插入到事件队列当中去，事件循环就不断的从事件队列里面去拿一个个事件，最后去做相应的处理。这个就是NODEJS的工作原理，重点是他有这个V8引擎 。

后面我们从另一个角度看它怎么处理 事件的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 2][]

首先我们看看JavaScript解析是怎么解析的，首先是这个V8引擎它会收到JavaScript的源程序，我们在服务端要实现服务的话首先 是写一个JavaScript的小的脚本，通过V8之后生成这个parser，解析之后生成JavaScript的函数，最终交给这个解析器，解析成bytecode,就是这个支撑代码，还有可能先进行优化，然后形成优化后的代码，最后在转换成optimized code,我们首先大体的了解运行过程就可以了，具体的细节不是我们这里所要说的。

接下来我们从另外一个角度去看看NODEJS是如何去处理事件，下图是就是NODEJS在收到事件之后处理的一个大体逻辑。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 3][]

首先有很多请求到NODEJS的应用上来，拿到这个请求之后会生成一个个事件，插入到这个事件队列当中去，也就是我们刚刚讲的LIBUV做的管理的这个事件队列，LIBUV同时启动这个事件循环，不停的从这个事件队列中取出一个个事件去做相应的处理，过程非常简单，直接就 callback回去了，callback回去之后直接返回一个response,假如说我们只是HTML的一个页面，当你请求网址的时候就返回一个Hello，非常的简单，直接就返回了。还有一种就非常复杂，可能要通过调用数据库 ，去做一些查询工作，做数据统计，这时候它会从线程池取一个线程，执行固定的function方法，最后会callback，有可能这个结果是一个中间结果，它会再插入到事件队列中，也有可能是最终的结果，直接就返回了一个Response,这就是一个NODEJS事件的一个大体的过程，当然线程用完了之后还要回收，直接返回到这个线程池，这就是NODEJS的一个事件处理过程。

再接下来我们再介绍一下V8引擎，实际在我们使用NODEJS之后，有时候会给大家一种困扰，我的服务端也是JavaScript，客户端也是JavaScript，什么时候是服务端的运行什么时候是客户端的运行，那实际是有两个V 8引擎，如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 4][]

实际上在NODEJS里面有个V8引擎在JavaScript里面也有个V8引擎，当我们发送一个Http请求到NODEJS的时候，那实际在请求之前，NodeJS这个服务它要运行起来，首先它有自己的服务端的这个JavaScript，它通过解析将整个web服务运行起来了。它这个JavaScript给V8进行解析，通过调用中间的Libuv将整个服务运行起来。这时候客户端浏览器发送一个请求过来，说我要请求 某某某文件，解析完了之后通过这个libuv以后去到这个磁盘上，拿到这个JavaScript文件，返回给浏览器，那浏览器这时就收到了服务端的JavaScript，它又交给V8来进行解析，然后在做后面的中间操作，调网卡也好读取文件也好去显示也好，那么这个就是客户端所要执行的。

这里大家一定要区分开，一个JavaScript是NODEJS自己的V8引擎去解析启动的服务 ，另外一种是客户端发起的请求，NODEJS返回这个JavaScript，然后在通过V8去解析，然后渲染出结果，大家这个千万不能混乱了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200616073639455.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200618064108160.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200618065141539.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200618065917674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200618071110546.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm,size_16,color_FFFFFF,t_70