在现代的 Web 应用中，实时通信变得越来越重要，而 WebSocket 作为一种持久化连接的技术，成为了实现实时通信的最佳选择之一。在 Hapi 框架中，我们可以很方便地使用 WebSocket 实现在线聊天功能。本文将介绍如何使用 Hapi 和 WebSocket 实现在线聊天功能。
准备工作
在开始实现前，请确保您的机器上已经安装了 Node.js 和 npm，以及 Hapi 和 ws 模块。
我们可以使用以下命令安装 Hapi 和 ws 模块：
$ npm install hapi $ npm install ws
创建 Hapi 服务器
在使用 WebSocket 前，我们需要先创建一个 Hapi 服务器，并使用该服务器监听 WebSocket 连接。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - --- --------------
------------------- ----- ---- ---
------------------ -- -
-- ----- -
-----------------
-------
-
------------------- ------- ----- -----------------
---创建 WebSocket 服务器
接下来，我们需要创建一个 WebSocket 服务器，并将其绑定到 Hapi 服务器上。在这里，我们可以使用 ws 模块来创建 WebSocket 服务器。
-- -------------------- ---- -------
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- ---- -- -
---------------------- ------ ------------
---------------- --------- -- -
--------------------- ---------- ---------
-- ------
---
-------------- -- -- -
---------------------- ------ ---------------
---
---在以上代码中，我们首先通过引入 ws 模块创建了一个 WebSocket 服务器。然后，使用 wss.on() 方法监听 WebSocket 连接，并在连接建立时打印连接成功的信息。在后面两个回调函数中，我们分别处理接收到的消息和 WebSocket 连接关闭的情况。这里将接收到的消息通过 console.log() 方法打印到控制台。
客户端连接
在客户端代码中，我们需要通过 WebSocket 连接到服务器，并在连接建立成功后发送一条消息。
-- -------------------- ---- -------
----- -- - --- ----------------------------------
--------- - -- -- -
---------------------- ------ ------------
-------------- --------- ----------
--
------------ - --------- -- -
--------------------- ---------- --------------
--
---------- - -- -- -
---------------------- ------ ---------------
--在以上代码中，我们通过创建一个新的 WebSocket 对象，并传入服务器的 URL 来连接服务器。在连接建立成功后，我们使用 ws.send() 方法发送一条消息给服务器。在收到服务器的消息后，我们打印收到的信息。在关闭连接时，我们也通过 console.log() 方法打印信息。
在线聊天功能
基于以上代码，我们可以将其改进以实现在线聊天功能。首先，我们可以在客户端中添加一个输入框以输入聊天内容，并在输入之后发送消息。
<input type="text" id="message" placeholder="Type message here"> <button id="send">Send</button>
const messageInput = document.getElementById('message');
const sendButton = document.getElementById('send');
sendButton.onclick = () => {
const message = messageInput.value;
ws.send(message);
messageInput.value = '';
};在上面的代码中，我们首先通过 DOM 操作获取了一个输入框和一个发送按钮。然后，使用 sendButton.onclick() 方法将发送按钮的点击事件绑定到一个回调函数上。在这个回调函数中，我们首先通过 messageInput.value 获取了输入框中用户输入的内容，并使用 ws.send() 方法将其发送给服务器。最后，我们将输入框的值设置为一个空字符以清空输入框。
接着，我们可以在服务器和客户端之间传输 JSON 格式的消息，以实现更丰富的在线聊天功能。
在服务器中，我们可以通过 JSON.parse() 方法解析客户端发送的消息，并根据消息的类型做出不同的操作。
-- -------------------- ---- -------
---------------- --------- -- -
--------------------- ---------- ---------
----- ---- - --------------------
------ ----------- -
---- ----------
---------------------------- -- -
-- ------- --- -- -- ----------------- --- --------------- -
----------------------------
----- ----------
----- ----------
-------- ------------
----
-
---
------
---- -------
------- - ----------
------
-
---在以上代码中，我们首先将客户端发送的 JSON 格式的消息解析为一个对象。通过该对象的 type 属性可以判断消息的类型。如果是聊天消息，则将消息转发给除自己以外的所有客户端。如果是设置用户名的消息，则将当前 WebSocket 连接的名字设置为消息中的 name 属性。
在客户端代码中，我们可以使用 JSON.stringify() 方法将消息转换为 JSON 格式，并使用该格式发送到服务器。
-- -------------------- ---- -------
------------------ - -- -- -
----- ------- - -------------------
------------------------
----- ----------
----- --------------------
-------- -------
----
------------------ - ---
--总结
使用 Hapi 和 WebSocket 实现在线聊天功能非常简单。在本文中，我们从创建 Hapi 服务器开始，逐步引入了 WebSocket，并最终实现了在线聊天功能。相信本文对你学习 Hapi 和 WebSocket 有很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f545eff6b2d6eab3df923f