Deno 实现 Websocket 通信的步骤及注意事项

阅读时长 6 分钟读完

介绍

Deno 是一款新型的 JavaScript 和 TypeScript 运行环境,它具有安全性高、性能优秀、标准库封装完善等特点,因此备受前端开发者的关注。而 Websocket 是一种在 Web 应用中进行实时双向通信的技术,前端开发中使用频繁。本文将介绍如何在 Deno 中实现 Websocket 通信,重点探讨如何使用 Deno 内置的 Websocket 模块,以及在使用过程中需要注意的问题。

步骤

1. 安装 Deno

在开始使用 Deno 实现 Websocket 通信前,需要先安装 Deno 运行环境。可以从 Deno 的官方网站 下载对应系统的安装包,也可以使用 shell 脚本一键安装。安装完成后,可以在命令行中输入 deno --version 来验证一下是否安装成功。

2. 编写服务端代码

我们先来编写一个简单的服务端代码,实现一个简单的 Websocket 通信服务:

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

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

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

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

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

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

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

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

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

-------
展开代码

上述代码中,我们导入了 std/http/serverstd/ws/mod 模块。std/http/server 模块用于创建 HTTP 服务器,std/ws/mod 模块用于创建 Websocket 服务器。在 handleWs 函数中,我们可以处理所有的 Websocket 通信。当建立连接时,打印一行日志,然后使用一个 for await 循环不断从 Websocket 中接收消息并打印,然后再将消息发送回客户端。

3. 编写客户端代码

然后我们再来编写一个简单的客户端代码,用来测试我们的 Websocket 服务是否正常运行:

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

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

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

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

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

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

        ---------------------
      -
    ---------
  -------
-------
展开代码

在客户端代码中,我们创建了一个 WebSocket 对象,并指定它连接到服务器的地址。在页面加载时,浏览器会自动建立 Websocket 连接。当连接建立后,打印一行日志到控制台。当从服务器接收到消息时,根据消息创建一个列表项并添加到页面中。在输入框中输入文本,点击发送按钮后,将文本通过 Websocket 发送到服务器。

4. 运行程序

我们先使用命令行进入到服务端代码所在目录, 然后运行 deno run --allow-net server.ts 命令,启动服务端程序,将监听 8080 端口。然后我们再打开一个命令行进入到客户端代码所在目录,使用命令行启动一个 HTTP 服务器(可以使用 Python 的 SimpleHTTPServer),打开客户端页面,即可完成一个简单的 Websocket 通信应用。

注意事项

在使用 Deno 实现 Websocket 通信时,需要注意以下几点:

  1. 在服务端代码中,需要导入 std/ws/mod 模块来创建 Websocket 服务器。
  2. 在客户端代码中,需要创建一个 WebSocket 对象来连接 Websocket 服务器。
  3. 在服务端代码中,Websocket 监听 close 事件、需要关闭对应的连接。
  4. 在服务端代码中,Websocket 监听 message 事件,需要处理接收到的消息并回复给客户端。
  5. 在客户端代码中,Websocket 监听 openmessage 事件,需要分别在连接建立成功和接收到消息时处理逻辑。

结语

本文简单介绍了如何在 Deno 中实现 Websocket 通信,旨在帮助开发者快速入手该技术。同时,我们也在编码过程中发现了一些需要注意的问题,希望能够帮助开发者发现并解决类似问题。随着 Deno 的不断发展壮大,我们相信它将在未来的 Web 应用开发中发挥越来越重要的作用。

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

纠错
反馈

纠错反馈