WebSocket 技术是创建实时应用程序的一种强大方法，如聊天室、多人游戏和在线市场等。它允许客户端和服务器之间的持久双向通信，而不必每次都发送 HTTP 请求。在本文中，我们将探讨如何使用 Hapi.js 框架来构建 WebSocket 应用程序。
Hapi.js 简介
Hapi.js 是一个用于构建 Web 应用程序的 Node.js 框架。它具有路由、插件架构和错误管理功能，可以使开发人员集中精力于业务逻辑而不是 Web 服务器的底层细节。它还支持 WebSocket 协议，使我们可以使用其功能来构建具有实时交互特性的应用程序。
安装和配置 Hapi.js
在开始使用 Hapi.js 构建 WebSocket 应用程序之前，我们需要在本地安装它。我们可以使用 npm 包管理器来安装 Hapi.js，执行以下命令即可完成安装：
npm install hapi
在安装完成后，我们需要创建一个 Hapi.js 项目并设置 WebSocket 功能。下面是一个简单的示例，演示了如何创建和配置 Hapi.js 项目：
-- -------------------- ---- -------
----- ---- - ----------------------
----- --------- - --------------
----- ---- - ----- -- -- -
----- ------ - -------------
----- -----
----- -----------
---
-- -- --------- --
----- -------- - --- ------------------ ------ ---
------------------------- -------- -- -
-----------------------
-------------------- --------- -- -
--------------------------------------
------------------------
---
---
----- ---------------
-----------------------------------------
--
-------在上面的代码中，我们首先从 @hapi/hapi 模块中导入 Hapi.js，然后创建一个 Hapi.js 服务器。接下来，我们通过创建一个 WebSocket 服务器来添加 WebSocket 功能，并在客户端连接时打印一条消息。我们还使用 socket 的 send() 方法来向客户端发送一条响应消息。
最后，我们通过调用 server.start() 来启动服务器。打开浏览器并输入 localhost:3000 可以看到服务器正在运行。
WebSocket 应用程序示例
为了更好地理解使用 Hapi.js 构建 WebSocket 应用程序的过程，我们将创建一个简单的 WebSocket 聊天室示例。在该示例中，客户端将能够向服务器发送消息并接收来自其他客户端的消息。
服务端代码
在服务端，我们将创建一个 WebSocket 服务器以接收和处理消息。我们将向特定房间中的客户端广播每个消息。 下面是一个示例代码，演示了如何监听来自客户端的消息并将其广播给所有 WebSocket 连接：
-- -------------------- ---- -------
----- ---- - ----------------------
----- --------- - --------------
----- ---- - ----- -- -- -
----- ------ - -------------
----- -----
----- -----------
---
-- -- --------- --
----- -------- - --- ------------------ ------ ---
-- -----------
----- ------- - --- ------
------------------------- -------- -- -
-----------------------
--------------------
-- --------
-------------------- --------- -- -
--------------------------------------
-- -----------
--- ------ ------ -- -------- -
-- ------- --- ------ -- ----------------- --- --------------- -
---------------------
-
-
---
-- -------
------------------ -- -- -
-----------------------
-----------------------
---
---
----- ---------------
-----------------------------------------
--
-------在上面的代码中，我们创建一个名为 clients 的 Set 集合来保存连接到 WebSocket 服务器的所有客户端。我们通过在客户端连接时调用 clients.add() 方法将新连接的客户端添加到 Set 中，并使用 clients.delete() 方法来删除已断开连接的客户端。
当有客户端发送消息时，我们遍历 clients 集合，将消息广播给所有连接到 WebSocket 服务器且不在当前客户端的客户端。我们使用 client.readyState === WebSocket.OPEN 来检查对方是否处于开放状态。
客户端代码
在客户端，我们将创建一个 WebSocket 对象以连接到服务器并发送和接收消息。当我们在输入框中输入消息并按下“发送”按钮时，消息将发送到服务器并广播给所有连接到服务器的客户端。下面是一个示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- -----------
-------
---- -
------- --
-------- --
------------ ------ -----------
-
--------- -
------- -----
-------- -----
------- ------
------- --- ----- -----
--------- -----
-
-------------- -
-------- ------
------- -----
-------- -----
------ ------
------- --- ----- -----
-
--------- -
-------- ------
------- -----
-------- -----
------ ------
----------------- --------
------- -----
------ ------
------- --------
-
--------
-------
------
---- --------------------
------ ----------- ------------------ -------------------
------- -------------------------
--------
----- ------ - --- ---------------------------------
----- ------------ - -----------------------------------------
----- ----------- - ------------------------------------
----- ---------- - ------------------------------------
------------------ - ---------- -
-- -------------------- -
--------------------------------
------------------ - ---
-
--
-- ----------
---------------- - --------------- -
----- ----------- - ------------------------------
--------------------- - -----------
-------------------------------------
--
---------
-------
-------在上面的代码中，我们使用 HTML、CSS 和 JavaScript 构建了一个简单的聊天室 UI。我们创建了一个包含消息的 DIV 元素和一个文本输入框。当用户输入消息并单击“发送”按钮时，我们使用 WebSocket 对象的 send() 方法将消息发送到服务器。
我们还使用 socket.onmessage 事件监听器来接收从服务器广播的消息。当我们接收到消息时，我们创建一个包含消息的 DIV 元素，并将其添加到消息列表中。
结论
Hapi.js 是一个功能强大的 Node.js 框架，可以帮助我们轻松地构建现代 Web 应用程序。在本文中，我们已经探讨了如何使用 Hapi.js 框架创建 WebSocket 应用程序。我们了解了如何安装和配置 Hapi.js，以及如何使用 WebSocket 服务器和客户端对象进行通信。我们还创建了一个简单的聊天室应用程序，以演示如何在 Hapi.js 框架中使用 WebSocket 技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677655266d66e0f9aa1ec485