在前端开发中,实时通讯是一个重要的话题。而 Websocket 技术的出现,为我们提供了一种全双工的通讯方式。Hapi.js 是一个基于 Node.js 的 Web 应用框架,在其生态系统中,我们可以方便地使用 nes 插件来实现 WebSocket 通信。本文将介绍如何使用 Hapi 和 nes,基于实战演示使用 WebSocket 实现实时通讯。
安装依赖
首先,我们需要创建一个 Hapi.js 项目。使用以下命令创建一个新的项目,并安装 Hapi 和 nes:
mkdir hapi-websocket-demo cd hapi-websocket-demo npm init npm install hapi@17 hapi-nes@7 --save
初始化服务器
在项目根目录下,创建一个 server.js
文件。我们需要创建一个 Hapi 服务器,然后在其基础上添加 nes 插件:
-- -------------------- ---- ------- ---- -------- ----- ---- - ---------------- ----- --- - --------------- ----- ------ - ------------- ----- ---- --- ----- ---- - ----- -- -- - ----- --------------------- - ------- -------------- - -------
建立 WebSocket 连接
我们将创建一个 WebSocket 路由来处理所有的 WebSocket 连接请求。在 server.js
文件中添加以下代码:
-- -------------------- ---- ------- ----- ------------------------- - -------- -------- -- - --------------- --------- --------------- ----------------------- -- -- - --------------- ------------ --------------- --- - -------------- ------- ------ ----- ------------- -------- ----- --------- -- -- - ----- ------ - ----- -------------------- --------------------------------- --------- ------ ------- - ---
这段代码将建立一个 WebSocket 连接并为其设置一个 handleWebsocketConnection
函数。该函数将在建立连接时调用。我们还为连接的关闭事件添加了监听器,以便知道连接何时断开。
发送消息
为了测试连接是否正常,我们将使用下面的代码从服务器发送一条消息到客户端。
-- -------------------- ---- ------- ----- ------------------------- - -------- -------- -- - --------------- --------- --------------- ------------------ ---- ---------- ----------------------- -- -- - --------------- ------------ --------------- --- -
现在,每当我们成功建立一个 WebSocket 连接时,服务器将会向连接发送一条消息。
接收消息
让我们向客户端发送消息并处理从客户端接收到的消息。我们需要修改 handleWebsocketConnection
函数:
-- -------------------- ---- ------- ----- ------------------------- - -------- -------- -- - --------------- --------- --------------- ------------------ ---- ---------- -------------------- ----- --------- --------- -- - --------------------- ------- ---- --------------- -------------------- --- ----------------------- -- -- - --------------- ------------ --------------- --- -
首先,我们通过监听 'message'
事件来处理从客户端发送过来的消息。注意,我们使用 toString()
方法将消息从 Buffer 转换为字符串。接下来,我们还需要为 'message'
事件相应的处理函数添加一个 isBinary
参数。该参数允许我们指定收到的消息是否为二进制数据。
发送广播
在 WebSocket 中,广播是指将消息发送到所有连接的客户端。让我们添加一个广播功能。我们将广播函数作为 WebsocketHandler 的一个参数传入 onConnection
函数并注册 WebSocket 路由。
-- -------------------- ---- ------- ----- ---------------- - -------- -------- ------------ -- - --------------- --------- --------------- -------------------- ----- --------- --------- -- - --------------------- ------- ---- --------------- -------------------- --- ----------------------- -- -- - --------------- ------------ --------------- --- ------------------ -- - ------------------ --- - ----- ------------ - -------- -------- -- - ---------------------- ------ ---------- --------------- -------------------- ----- --------- --------- -- - --------------------- ------- ---- ------------- ------------------------ --- ----------------------- -- -- - ---------------------- ------ ------------- --------------- --- - -------------- ------- ------ ----- ------------- -------- -------------- -- -- - ------ ----------------------------- ------------- ----- ----------- -- - ---------------- ---- ---------- --- - ---
在 WebSocketHandler 函数中,我们添加了一个 onBroadcast
回调函数,用来更新所有客户端。在该函数中,我们将文本消息作为参数传递给回调函数,然后在 moveHandler
函数中调用 broadcast
回调函数。
最后,我们通过在 WebSocket 路由中调用 h.websocket
函数来注册 WebSocket 连接。我们将 WebsocketHandler
函数,onConnection
函数,以及在第三个参数中调用 broadcast
函数都作为参数传递给 h.websocket
函数。
总结
现在,我们已经成功地创建了一个 Hapi.js 项目,并实现了 WebSocket 实时通讯功能。我们已经学习了如何建立 WebSocket 连接,如何发送和接收消息,以及如何向所有连接的客户端广播消息。使用 Hapi 和 nes,我们可以为我们的应用添加实时通讯功能,提高用户体验,从而满足用户的需求。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/649c918e48841e9894951c17