如何在 Deno 中使用 WebSocket 实现实时消息传递

阅读时长 7 分钟读完

WebSocket 是一种具有双向通信功能的异步通信协议,在前端开发中广泛应用。Deno 是一个基于 JavaScript 和 TypeScript 的运行时环境,它基于 V8 引擎和 Rust 语言构建,旨在提供更安全、更简洁、更高效的开发体验。在本文中,我们将探讨如何在 Deno 中使用 WebSocket 实现实时消息传递。

创建 WebSocket 服务器

首先,我们需要在 Deno 中创建 WebSocket 服务器。Deno 提供了 WebSocket 类用于创建 WebSocket 服务器。代码如下:

-- -------------------- ---- -------
------ - ----- - ---- ---------------------------------------
------ - ---------------- --------- - ---- ----------------------------------

----- ------ - ------- ----- ---- ---

---------------------- ------ ------- -- ---- --------

--- ----- ------ --- -- ------- -
  ----- - ----- -- ---------- -- ---------- ------- - - ----
  --- -
    ----- -- - ----- -----------------
      -----
      ----------
      ----------
      --------
    ---
    ---------------------- ------ -------------

    --- ----- ------ --- -- --- -
      --------------------- ---------- -----
      ----- ------------ ----- ---------
    -
  - ----- ----- -
    --------------------- -- ------ ---------- ---------
  -
-

在这段代码中,我们首先导入了 serveWebSocket 类。然后,我们通过 serve 函数创建 HTTP 服务器,并监听 3000 端口。接着,我们在 for await 循环中等待客户端连接请求,并通过 acceptWebSocket 函数将客户端连接转换为 WebSocket 连接。最后,我们通过 for await 循环等待客户端发送消息,并通过 send 函数将响应消息返回给客户端。

创建 WebSocket 客户端

接下来,我们需要在客户端中创建 WebSocket 连接。在浏览器中,我们可以使用 JavaScript 的 WebSocket 类创建 WebSocket 连接。在 Deno 中,我们可以使用 WebSocket 类模拟 WebSocket 客户端。代码如下:

-- -------------------- ---- -------
------ - --------- - ---- ----------------------------------

----- -- - --- ---------------------------------
---------------------- ------ -----------

------------- -------- -- -
  ---------------------- ---------- ---------------

  --------------- ----------

  ---------------- -------- ----- -
    --------------------- ---------- ----------
  ---
---

-------------- -------- -- -
  ---------------------- ---------- ----------
---

在这段代码中,我们首先导入了 WebSocket 类,并通过 new 操作符创建了 WebSocket 实例,并指定要连接的服务器 URL。接着,我们注册 onopenonmessageonclose 事件处理器。当 WebSocket 连接成功打开时,onopen 事件将被触发,并通过 send 函数向服务器发送一条消息。当服务器返回消息时,onmessage 事件将被触发,并将该消息打印到控制台。当 WebSocket 连接关闭时,onclose 事件将被触发,并将该事件打印到控制台。

使用 WebSocket 实现实时消息传递

现在,我们已经完成了 WebSocket 服务器和客户端的创建,可以用它们来实现实时消息传递。我们可以通过修改服务器代码,将接收到的消息广播到所有客户端。代码如下:

-- -------------------- ---- -------
------ - ----- - ---- ---------------------------------------
------ - ---------------- --------- - ---- ----------------------------------

----- ------ - ------- ----- ---- ---
----- ------------ -------------- - --- ------

---------------------- ------ ------- -- ---- --------

--- ----- ------ --- -- ------- -
  ----- - ----- -- ---------- -- ---------- ------- - - ----
  --- -
    ----- -- - ----- -----------------
      -----
      ----------
      ----------
      --------
    ---
    ---------------------- ------ -------------

    --------------------

    --- ----- ------ --- -- --- -
      --------------------- ---------- -----
      ---------------
    -

    -----------------------
  - ----- ----- -
    --------------------- -- ------ ---------- ---------
  -
-

-------- -------------- ------- -
  --- ------ -- -- ------------ -
    -------------
  -
-

在这段代码中,我们首先定义了一个 Set 类型的 connections 变量,用于存储所有连接到服务器的客户端 WebSocket 实例。接着,在 for await 循环中等待客户端连接请求,并将连接转换为 WebSocket 连接。在客户端连接成功后,我们通过 add 函数将客户端 WebSocket 实例添加到 connections 集合中。然后,我们等待客户端发送消息,并通过 broadcast 函数将接收到的消息广播到所有客户端。最后,我们通过 delete 函数从 connections 集合中删除已断开连接的客户端 WebSocket 实例。

示例代码

上述代码已经可以实现在 Deno 中使用 WebSocket 实现实时消息传递的功能。完整的示例代码可以在以下 GitHub 仓库中找到:

总结

在本文中,我们介绍了如何在 Deno 中使用 WebSocket 实现实时消息传递。我们通过创建 WebSocket 服务器和客户端的示例代码,演示了如何使用 Deno 的 WebSocket API 实现实时消息传递,并将接收到的消息广播到所有客户端。WebSocket 在前端开发中已经得到广泛应用,并且在 Deno 中也提供了方便的 API,使得实现实时消息传递变得更加简单。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6487c9c048841e9894656bb2

纠错
反馈