在现代网页应用中，实时通讯已经成为了一项重要的功能，它能够让多个用户同时在线，立即看到彼此的行为。而 WebSocket 技术是实现实时通讯的有效方案之一。Deno 是一个全新的 JavaScript/TypeScript 运行时，针对现代的 web 发布而设计。本文将要介绍如何在 Deno 中使用 WebSocket 实现两个人的实时私聊。
WebSocket 简介
WebSocket 是协议，它建立在 TCP/IP 协议之上，是一种在单个 TCP 连接上进行全双工通讯的技术，允许在客户端和服务器之间的跨域通讯。此协议通过发送和接收来自 Websocket 的帧（frame）来实现事件驱动消息交换。
WebSocket 的实现基于两个关键 API: WebSocket 和 WebSocketServer。
WebSocketAPI 允许在客户端创建 WebSocket，以便建立与服务器之间的连接。WebSocketServer允许在服务器创建一个 WebSocket 服务器。客户端可以连接到此服务器以建立连接。
Deno 中使用 WebSocket 实现私人聊天
接下来将展示一个使用 Deno 和 WebSocket 的简单聊天室示例，同时演示如何实现两个人的实时私聊功能。
服务器端
我们首先需要创建一个 WebSocket 服务器，可以使用 deno_ws 模块创建 WebSocket。该模块提供了一个 WebSocketServer 类，可以处理客户端和服务器之间的 WebSocket 连接。
-- -- ------- --
------ - --------------- - ---- -------------------------------------
-- -- --------- ---
----- --- - --- ----------------------
---------------------- ------ ------- -- ------------------------
-- ------- ---------
----- ------- - --- ------
-- --------
-------------------- -------- ---- -
-- ---- --------- --
----------------
------------------- ---------- -------- ------------------
-- -- --------- ----
---------------- -------- --------- -
--------------------- -------- -------------
-- ----------- ---------
--- ------ ------ -- -------- -
---------------------
-
---
-- ----------
-------------- -------- -- -
-------------------
------------------- ------------- -------- ------------------
---
---在上面的代码中，我们首先导入 deno_ws 模块，创建一个 WebSocketServer 对象，然后通过监听 connection 事件处理客户端和服务器之间的 WebSocket 连接。我们使用了一个 Set 对象来储存所有连接的 WebSocket。当有客户端连接到 WebSocket 服务器时，我们将其添加到 sockets 中，并输出日志。
当 WebSocket 接收到消息时，它会将消息转发给所有客户端。当一个客户端断开连接时，我们需要从 sockets 集合中删除它。
客户端
在客户端中，我们需要创建一个 WebSocket 对象，以便连接到服务器。通常，我们会创建一个表单用于用户输入用户名，当前聊天室和聊天消息。
---- ---------- --- ----- ------------------- ------ ------------ ----------- ---------------- -- ------ ----- ------------------- ------ ------------- ----------- --------------------- -- ------ ----- --------- ------------ ------------------------------ ------- --------------------- ------ --- ------------------- ---- -------------- --- ------- ----------------------------
在 JavaScript 中，我们可以使用 WebSocket 客户端 API 创建 WebSocket 对象，连接到服务器。
-- -------- ----- ---- - ------------------------------- ----- ----- - ----------------------------------- ----- -------- - ------------------------------------ -- ---------- ----- ------- - ----------------------------------------- ----- -------- - ------------------------------------------ -- -- --------- -- ----- -- - --- ------------------------------------------------------------- -- ---- -------- ------------------ - ----------------------- -- -------- ----- ------- - ------------ --------------------- ------------- -- -------- ----------- - --- -- ----- - -- -- --------- ---- ------------------------------ -------- ------- - ----- -- - ----------------------------- -------------- - ----------- ------------------------- --- -- -------- ------------------------------- -------------
在上面的代码中，我们首先获取聊天窗口的元素，并获取当前频道和用户名。然后创建 WebSocket 对象，连接到服务器。我们可以看到，在创建 WebSocket 对象时，我们可以在 URL 中添加查询参数，将频道和用户名发送到服务器。消息的发送和接收通过调用 send 和 addEventListener 方法完成。
这段代码还监听了 <form> 表单的 submit 事件，以便将消息发送到服务器。
测试
现在，我们应该已经可以使用 Deno 中实时私聊了！打开两个浏览器标签并输入 http://localhost:3000，即可进入聊天室。在首个窗口中，我们输入用户名 Alice，在聊天室输入 testroom，并发送消息。将会看到消息正常发送和接收。
在另一个标签页中，我们可以按照相同的方式输入用户名和聊天室名称。接着，我们可以在这两个标签页之间发送消息，并且我们可以看到消息正常传递。
结论
本文介绍了如何使用 Deno 和 WebSocket 实现两个人的实时私聊功能。我们首先创建了 WebSocket 服务器，负责处理客户端和服务器之间的 WebSocket 连接。然后，在客户端中，我们通过 WebSocket 客户端 API 创建 WebSocket 对象，并使用表格发送和接收消息。
WebSocket 技术在实时通讯方面的应用非常广泛，可以帮助我们实现各种在线应用，例如聊天室、网页游戏等等。如果您想深入了解 WebSocket，我建议您继续深入学习相关文档，并探索其他所有可用的功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673563cb0bc820c5824e29d0