在现代 Web 应用中，实时通讯的需求越来越频繁。传统的 HTTP 协议无法满足这一需求，于是 WebSocket 应运而生。Hapi.js 是一个优秀的 Node.js 框架，它提供了丰富的插件和工具，用于构建高效、可靠且可维护的 Web 应用程序。本文将介绍如何使用 Hapi.js 搭建 WebSocket 服务，实现一个简单的在线聊天系统的功能。
WebSocket 简介
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它建立在 HTTP 协议之上，使用了与 HTTP 相同的 TCP 端口（默认是 80）以及类似 HTTP 的握手通信方式，因此可以通过各种防火墙代理服务器。
WebSocket 的使用场景主要是实时通讯。与传统的 HTTP 请求/响应协议不同，WebSocket 连接建立之后，客户端和服务器之间可以随时发送消息，而不需要重新建立连接。这种实时通讯的方式，可以为用户提供更快更自然的交互体验。
Hapi.js 简介
Hapi.js 是一个专注于构建应用程序的框架，它具有以下特点：
- 面向插件的设计。Hapi.js 提供了丰富的插件和工具，用于构建高效、可靠且可维护的 Web 应用程序。
- 路由配置灵活。Hapi.js 提供了支持各种路由配置的语法，包括基于对象、类、函数和配置对象等多种方式。
- 请求和响应处理方式多样。Hapi.js 提供了多种方式来处理请求和响应，包括处理静态文件、模板引擎、API 接口等。
Hapi.js 搭建 WebSocket 服务的步骤
步骤一：安装 Hapi.js 和 WebSocket 插件
打开终端，输入以下命令：
npm init -y npm install hapi@20.0.3 @hapi/websocket@9.0.1
步骤二：配置 WebSocket 服务
在项目的根目录下创建文件 server.js，输入以下代码：
-- -------------------- ---- -------
---- --------
----- ---- - ----------------------
----- --------- - ---------------------------
----- ---- - ----- -- -- -
----- ------ - -------------
----- -----
----- -----------
---
--------------
------- ------
----- ----
-------- --------- -- -- -
------ ------- ----------
-
---
----- -- - --- ------------------
------
---
------------------- -------- -- -
-------------- ------ -------------
-------------------- --------- -- -
--------------------- -------- -------------
--------------------------- -- -
-- ------------------ --- --------------- -
---------------------
-
---
---
---
----- ---------------
------------------- ------- -- ---- -----------------
--
-------上述代码分为两部分：
- 创建 Hapi.js 服务器，并配置一个路由规则。
- 创建一个 WebSocket 服务器，并在连接建立之后，广播消息。
在代码中，我们使用 WebSocket.Server 对象创建了一个 WebSocket 服务器，并使用 ws.on('connection', (socket) => { ... }); 事件监听器来处理新客户端连接。当连接建立成功之后，我们就可以监听 socket 对象的 message 事件，接受客户端发送过来的消息，并通过 ws.clients.forEach((client) => { ... }); 循环给所有的客户端广播这条消息。
步骤三：启动 WebSocket 服务
在终端中输入以下命令：
node server.js
即可启动 WebSocket 服务器。在浏览器中访问 http://localhost:3000，如果页面显示 "Hello, Hapi.js!"，则说明 WebSocket 服务器已经启动成功了。
步骤四：测试 WebSocket 服务
打开浏览器的开发者工具，输入以下代码：
-- -------------------- ---- ------- ----- -- - --- --------------------------------- --------- - -- -- - ----------------------- ---------- --------------- ---------- -- ------------ - --------- -- - --------------------- -------- ------------------ --
打开另一个浏览器窗口，复制代码到控制台中，可以看到第一个浏览器窗口的控制台输出了 "Connection opened." 和 "Received message: Hello, server!"。这表明 WebSocket 连接建立成功了，并且可以互相通信了。
步骤五：使用 WebSocket 实现在线聊天系统
为了在 WebSocket 的基础上实现在线聊天系统，我们需要增加以下功能：
- 输入昵称。
- 发送消息。
- 接受消息。
在根目录下创建文件 index.html，输入以下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------------- ------ ---------------- ------- ------ ------ -------- -------------------------- -------- ----------- ------------- ------------------- ------- ------ -------- ------------------------- -------- ----------- ------------ ------------------- ------- ------ --------- --------------------- ------- ---- ------------------- --------- ------- ------ - --- ---------------------------------- ------- ------------- - ------------------------------------ ------- ------------ - ----------------------------------- ------- ------------ - ------------------------------------ -- --------------- - -- -- - -- ----------------------- ---------- ---- -- ------------------ - -- ---- -- -- - -- --------------------- -------- ---------- -- ----- ------- - ----------------- -- ----- - --------- -------- ---- - - -------- -- -------------------- ------ ---- -- ----------------------------------------------------------- -- -- - -- ----- -------- - -------------------- -- ----- ------- - ------------------- -- ----- ---- - - ------------ ---------- -- -- -- -- ---------------------------------- -- -------------------- --------- -- ------------------ - --- ----- -- ---------- -------------------- -------- - -- ----- -- - ----------------------------- -- ---------------------------------------------------- -------------- -- ----------------------------- --- ---------- ------- -------
此时，打开浏览器，访问 http://localhost:3000，即可看到一个简单的在线聊天页面。在页面上可以输入昵称和消息，并通过 WebSocket 发送给服务器。另外，当服务器接收到新的消息后，会广播给所有的客户端，并在页面上显示出来。
总结
本文介绍了如何使用 Hapi.js 建立 WebSocket 服务，以及如何在上面实现一个简单的在线聊天系统。虽然这只是一个简单的示例，但已经包含了 WebSocket 的几个关键概念，希望对读者了解 WebSocket 有所帮助。同时，Hapi.js 的丰富插件库和易于使用的 API，也使得构建实时通讯的应用程序变得更加容易。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e816e4f6b2d6eab3382cc3