Deno 中使用 WebSocket 完成一个简单的聊天应用

WebSocket 是一种用于在 Web 应用程序中进行双向通信的协议。它允许服务器向客户端推送数据,而不需要客户端发起请求。在前端开发中,我们经常使用 WebSocket 来构建实时应用程序,例如聊天应用程序等。在本文中,我们将介绍如何在 Deno 中使用 WebSocket 完成一个简单的聊天应用程序。

准备工作

在开始之前,我们需要安装 Deno 运行时环境。可以通过以下命令在命令行中安装 Deno:

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

安装完成后,我们可以在命令行中输入 deno 命令来验证安装是否成功:

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

接下来,我们需要创建一个新的 Deno 项目。可以通过以下命令在命令行中创建一个新的 Deno 项目:

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

实现 WebSocket 服务器

server.ts 文件中,我们需要实现一个 WebSocket 服务器来接收和处理客户端的连接请求。可以使用 Deno 的标准库中的 serve() 函数来创建一个 HTTP 服务器,并使用 WebSocket 模块来处理 WebSocket 连接请求。以下是一个简单的 WebSocket 服务器实现:

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

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

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

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

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

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

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

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

在上面的代码中,我们首先创建了一个 HTTP 服务器,并将其绑定到本地的 8000 端口。然后,我们使用 acceptWebSocket() 函数来处理客户端的 WebSocket 连接请求。在连接建立后,我们可以通过 for await (const message of ws) 循环来接收客户端发送的消息,并使用 await ws.send() 函数将消息发送回客户端。

实现聊天应用

现在我们已经有了一个 WebSocket 服务器,接下来我们需要实现一个简单的聊天应用程序。首先,我们需要在客户端中创建一个 WebSocket 连接,并在连接建立后发送一个欢迎消息。以下是一个简单的客户端实现:

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

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

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

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

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

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

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

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

在上面的代码中,我们首先创建了一个 WebSocket 连接,并在连接建立后发送一个欢迎消息。然后,我们通过 socket.onmessage() 函数来接收来自服务器的消息,并将其显示在页面上。最后,我们创建了一个文本输入框和一个发送按钮,并在按钮被点击时将输入框中的文本发送到服务器。

运行聊天应用

现在我们已经完成了聊天应用程序的实现,接下来我们可以通过以下命令在命令行中启动 WebSocket 服务器:

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

然后,我们可以在浏览器中打开 index.html 文件,并在页面上输入一些文本并点击发送按钮。我们应该能够在控制台中看到来自服务器的消息,并在页面上看到发送的消息被显示出来。

总结

在本文中,我们介绍了如何在 Deno 中使用 WebSocket 完成一个简单的聊天应用程序。我们首先实现了一个 WebSocket 服务器来接收和处理客户端的连接请求,然后在客户端中创建了一个 WebSocket 连接来发送和接收消息。通过本文的学习,我们可以更深入地了解 WebSocket 的工作原理,并掌握如何在 Deno 中使用 WebSocket 构建实时应用程序。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/653cb1c77d4982a6eb6bb769


猜你喜欢

  • 如何将 CSS Reset 应用到您的代码中

    在前端开发中,我们经常会遇到各种不同的浏览器和设备,它们对样式的解析方式各不相同。这样就会出现我们在一个浏览器中看到的页面样式与另一个浏览器中看到的完全不同的情况。

    1 年前
  • Custom Elements 组件的结构和布局设计

    在现代 Web 开发中,可定制化组件的需求越来越高。Custom Elements API 是一项 Web 标准,允许我们自定义 HTML 元素,并使用 JavaScript 来控制其行为和样式。

    1 年前
  • 解决 Chai 中测试 async/await 代码时出现 UnhandledPromiseRejectionWarning 的问题

    在前端开发过程中,测试是不可或缺的一部分。而对于包含异步请求的代码,在使用 Chai 进行测试时,往往会遇到 UnhandledPromiseRejectionWarning 错误的问题。

    1 年前
  • ES12 中新增的可选链技术及其优势解析

    在前端开发中,我们经常需要访问对象中的属性或方法来完成一些操作。然而,有时候这些对象可能不存在或为空,这时候通过传统的访问方式就会出现错误。为了解决这个问题,ES12 中引入了可选链(Optional...

    1 年前
  • 进阶前端测试(Jest + Puppeteer + Docker + 社区 Shakeout)

    随着前端开发的发展,越来越多的前端项目需要保证其稳定性和可靠性,而单元测试已经成为前端项目开发中不可或缺的一部分。本文将讨论如何使用 Jest、Puppeteer、Docker 和社区 Shakeou...

    1 年前
  • 利用 PM2 守护 MongoDB 实例

    在前端开发中,MongoDB 是一款常用的数据库。为了保障 MongoDB 实例的稳定性和可靠性,我们需要利用 PM2 守护 MongoDB 实例。本文将介绍如何利用 PM2 守护 MongoDB 实...

    1 年前
  • 如何在 Headless CMS 中实现数据备份和恢复?

    在现代 web 应用程序开发中,Headless CMS(无头内容管理系统)变得越来越流行。Headless CMS 是一种与任何应用程序或解决方案集成的 CMS,它通过 API 向应用程序提供数据,...

    1 年前
  • ES11 的 Promise.any() 方法,解决 Promise.race() 的弊端

    在 Web 前端开发中,异步编程方式已经成为了日常开发中的必备技能。Promise 是实现异步编程最常用的一种方式。ES6 引入了 Promise,ES10 对其进行了增强,新添加了 Promise....

    1 年前
  • Mocha 测试用例中的异常处理

    Mocha 是JavaScript中最流行的测试框架之一,它能够帮助前端程序员轻松地编写和部署测试用例。在编写和运行测试用例的过程中,可能会遇到各种各样的异常。本文将介绍如何在 Mocha 测试用例中...

    1 年前
  • 如何提高 WordPress 站点的性能

    如何提高 WordPress 站点的性能 在当今互联网上,速度是一个关键的因素。慢速的网页加载速度会导致用户流失,而速度快的网站可以带来更好的用户体验和更高的转换率。

    1 年前
  • Hapi.js 中的上传进度管理

    在 Web 开发中,文件上传是一个非常常见的功能。Hapi.js 是一个 Node.js 的 web 框架,它提供了一个丰富的插件系统,可以用来处理文件上传的逻辑。

    1 年前
  • Node.js 面试必问的流程控制原理解析

    在 Node.js 面试中,流程控制是一个必问的问题,因为它是 Node.js 中非常重要的一个概念,尤其是在异步编程中更是必不可少的。 本文将详细解析 Node.js 中的流程控制原理,为想要了解 ...

    1 年前
  • Server-Sent Events 的一个真正用例:图表更新

    本文将介绍 Server-Sent Events 在前端领域中的应用,具体内容为使用 SSE 实现图表实时更新。在本文中,我们将探讨 SSE 的概念和基本用法,并使用示例代码说明如何使用 SSE 来实...

    1 年前
  • 如何使用 Socket.io 实现在线图片编辑

    如何使用 Socket.io 实现在线图片编辑 引言 随着移动互联网的发展,许多业务需要在线图片编辑,比如头像编辑、图片裁剪、图片合成等。实现这些功能可以让用户更方便地进行个性化的定制,也能够提高用户...

    1 年前
  • MongoDB MapReduce 如何优化?

    在 MongoDB 中,MapReduce 是一种用于处理大型数据集的强大工具。他是一种分布式算法,能让 MongoDB 在大规模数据处理时表现出色。同时这种方案也存在优化性能的问题,为了让我们合理的...

    1 年前
  • 如何在使用 Gulp 的项目中配置 LESS

    在前端开发中,我们经常需要用到样式表,而 LESS 是一种很流行的 CSS 预处理器。使用 LESS 可以让我们更便捷地编写样式代码,并且支持像变量、嵌套、混合、函数等高级特性。

    1 年前
  • Deno 开发的技巧与实践

    什么是 Deno? Deno 是一个现代化的 JavaScript 和 TypeScript 运行时环境,由 TypeScript 的创始人 Ryan Dahl 发起开发。

    1 年前
  • AngularJS SPA 应用中的动态化通告机制

    AngularJS 是一款非常流行的前端框架,它提供了强大的工具和组件,使得前端开发变得更加简便和高效。在 AngularJS 应用中,一个重要的功能就是动态化通告。

    1 年前
  • CSS Grid 神器:如何实现复杂的布局?

    随着 Web 技术的不断发展,前端开发中的布局已经变得日益复杂和多样化。以往要实现同样复杂的布局,需要使用多种技巧和工具进行组合,而 CSS Grid 则可以让我们轻松实现更复杂的布局。

    1 年前
  • ES8 中引入了 RegExp 的具名捕获组

    ES8 中引入了 RegExp 的具名捕获组 在ES8之前,JavaScript已经支持正则表达式的捕获组,但是由于缺少具名组匹配,经常导致代码难以维护和阅读,从而增加项目的难度和预算。

    1 年前

相关推荐

    暂无文章