教程介绍
如果您的网站对于向客户机发送数据较为依赖,那么使用客户端模板以及WebSocket能够显著提高其性能表现。在今天的教程中,我们就一起来了解如何实现这一目标。 简介 我 们将以现有应用程序为起点,一步步了解如何使其在高流量环境下拥有更快的响应速度与更可靠的运行表现。我将向大家展示如何从应用程序代码中准确定位对应代 码段,如何对其进行修改以提升运行性能。不过首先大家需要下载我准备好的范例应用。这款应用的内容非常简单,运行目的在于随机显示服务器当中的帖子内容 ——不过对于我们这篇指南文章来讲,这已经足够了。 第一步: 准备 对我们已经下载完成的文件进行解压,为其选定文件夹或者保存位置,而后加以运行: 现在我们前往http://localhost:8080/并查看其内容。这时大家应该只能看到一个按钮。各位还需要准备一款安装了各类开发者工具的浏览器,这样就能掌握HTTP请求的实际大小。打开开发者工具,而后访问Network标签。接下来点击几下该按钮,注意/getpost请求的大小: 这条请求只有830字节,对吧?好的,想象一下,当我们的网站人气爆棚时,可能同时有一百多万用户想看到这篇帖子,这时请求的数据总量将达到约830MB。请注意,是每篇帖子830MB!这可就不是个小数目了。 第二步: 检查 在 第二步中,我将带领大家了解如何在应用中找到能够提升性能表现的对应代码片段。在前一步中,大家已经找到了用于获取帖子内容的请求,现在我们需要了解代码 是如何实现这一过程的。大家可以利用自己熟悉的代码编辑器打开index.js文件,其中第16到第20行内容如下所示:
就是它了!首先,帖子的模板会被编译至postTemplate变量当中。接下来,该模板会在/getpostGET请求中实现提交。这是一种非常典型的解决办法,可以说是乏善可陈。我们要对其进行变更以改进性能表现。 第三步: 设置Socket.IO To begin the improvements, first, install Socket.IO. In your terminal type:为了实现性能提升,我们首先需要安装Socket.IO。大家需要在命令行终端内输入:
等待命令执行完成。通过将以下代码行添加到index.js的全部require之后将socket.io引入代码:
现在大家必须对Express的设置进行修改,以使其与Socket.IO顺利协作。首先,在app definition之后加入下列内容:
接下来移除该文件中的最后一行: 之所以这么做,是因为Socket.IO的运作与HTTP Server紧密相关——而非Express app。 现在,如果大家运行该应用,应该会在自己的终端中看到如下所示的内容: |