引言
近年来，Web 技术不断发展，越来越多的网站和应用程序都变得实时化，也就是说，当服务器上的数据发生变化时，客户端可以立即更新这些数据，反之亦然。实时 Web 应用程序对程序员和用户都带来了很多好处。
与此同时，Node.js 技术也飞速发展，成为一种流行的服务器端编程语言和平台。Node.js 提供了很多优秀的 Web 服务器框架，HapiJS 就是其中之一，它是构建 Web 应用程序和服务的现代工具。
在实时 Web 应用程序中，我们需要一个可靠的通信工具来实现客户端与服务器之间的实时通信，而 Socket.IO 正是这样一个工具。它是一种实时实现双向通信的 JavaScript 库，支持多种协议，可在浏览器和服务器之间双向通信。
在本文中，我们将介绍如何使用 HapiJS 和 Socket.IO 构建实时 Web 应用程序。
准备工作
在开始之前，我们需要完成以下准备工作：
- 安装 Node.js 和 npm；
- 创建一个新的项目，可以使用
npm init命令创建一个新的package.json文件； - 安装 HapiJS 和 Socket.IO，可以使用
npm install hapi socket.io --save命令安装。
HapiJS 的基本用法
为了使用 HapiJS 快速启动一个 Web 服务器，我们需要创建一个新的 server.js 文件，并添加如下代码：
-- -------------------- ---- -------
----- ---- - ----------------
-- -------
----- ------ - -------------
----- -----
----- -----------
---
-- ----
--------------
------- ------
----- ----
-------- --------- -- -- -
------ ------- --------
-
---
-- -----
----- -------- ------- -
--- -
----- ---------------
------------------- ------- --- ---------------------
- ----- ----- -
-----------------
----------------
-
-
--------以上代码创建了一个新的服务器实例，监听 3000 端口，并在访问根路径时返回 "Hello, world!" 消息。启动服务器使用了 async 函数的形式，这是因为 server.start() 方法是异步的。
Socket.IO 的基本用法
启动 HapiJS 之后，我们需要添加 Socket.IO 的支持，以实现实时通信。这里我们需要在 server.js 文件中添加如下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------- - ---------------------
-- -------
----- ------ - -------------
----- -----
----- -----------
---
-- -----
----- -------- ------- -
--- -
----- ---------------
------------------- ------- --- ---------------------
- ----- ----- -
-----------------
----------------
-
-
-- -- ---------
----- -------- ---------- -
----- -- - --------------------------
------------------- -------- -- -
-------------- ---- ------------
----------------------- -- -- -
-------------- ---- ---------------
---
---
-
--------
-----------以上代码创建了一个 Socket.IO 实例，并在有新的客户端连接时，打印出 "A user connected" 消息，有客户端离开时，打印出 "A user disconnected" 消息。
现在我们已经知道如何使用 HapiJS 和 Socket.IO 的基本用法，在接下来的部分中，我们将探索如何构建实时 Web 应用程序。
首先，让我们考虑一个场景：当用户在浏览器中输入某个 URL 地址时，我们需要将该 URL 地址实时推送给其他所有连接到服务器的客户端。为了实现这个功能，我们需要创建一个名为 broadcast.js 的新文件，并添加如下代码：
-- -------------------- ---- -------
----- -------- - ---------------------
--- ---
-------- ------------ -
-- - --------------------------
------------------- -------- -- -
-------------- ---- ------------
---------------- ------ -- -
--------------------- ---- --------------
-------------- ------
---
----------------------- -- -- -
-------------- ---- ---------------
---
---
-
-------------- - -----以上代码创建了一个名为 broadcast 的函数并导出，该函数接收一个 HapiJS 的服务器对象作为参数，负责启动 Socket.IO，并在客户端连接和断开时打印信息。该函数还注册了一个 url 事件，当客户端发送一个 url 事件时，将该事件实时广播给所有客户端。
接下来，我们需要更新 server.js 文件，添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------- - -----------------------
-- -------
----- ------ - -------------
----- -----
----- -----------
---
-- -----
----- -------- ------- -
--- -
----- ---------------
------------------- ------- --- ---------------------
- ----- ----- -
-----------------
----------------
-
-
-- -- --------- ----
----------------------
--------以上代码导入 broadcast.js 中新建的函数，并将 HapiJS 服务器对象 server 作为参数传递给该函数。该函数将启动 Socket.IO 并注册 url 事件和 disconnect 事件。
现在，我们已经完成了实时推送 URL 地址到客户端的功能。为了测试该功能，我们需要在客户端代码中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- --- -----------
-------
------
------------ --- --------
--- ---------------
----- --------------
------ ----------- -------------- ------------------
------- ---------------------------
-------
------- ---------------------------------------
--------
----- ------ - -----
-- ------ --- --
---------------- ------ -- -
----- - --- - - -----
----- -- - -----------------------------
-------------- - ----
------------------------------------------------
---
-- -----
-------------------------------------------------------------- ------- -- -
-----------------------
----- --- - --------------------------------------------------
-- ----- -
------------------ - --- ---
------------------------------------------ - ---
-
---
---------
-------
-------以上代码包含了一个包含表单和列表的简单 HTML 页面，我们可以在表单中输入 URL 地址，然后在客户端上实时显示。表单提交后，客户端将发送一个名为 url 的事件给服务端，服务端将再次广播给所有其他客户端。
结论
本文介绍了如何使用 HapiJS 和 Socket.IO 构建实时 Web 应用程序，详细介绍了 HapiJS 和 Socket.IO 的基本用法及其在实时 Web 应用程序中的应用，并提供了示例代码和学习指导。
希望这篇文章对读者学习和理解实时 Web 应用程序有所帮助，也希望读者在实践和应用中能够取得更好的成果和收获。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fbcd6644713626016383b6