Deno 中使用 WebSocket 实现聊天室的完整教程

简介

WebSocket是一种在Web应用程序中可用的技术，它允许建立双向通信的信道，从而实现实时服务。Deno是一个用于开发JavaScript和TypeScript应用程序的运行时环境，它提供更好的模块解析机制、浏览器API中的部分实现以及提供安全的默认设置。本文将介绍如何使用Deno中的WebSocket来构建一个简单的聊天室。

WebSocket简介

WebSocket是一种在Web应用程序中可用的实时通讯技术，它能够在单个TCP连接上提供双向通讯信道。其与HTTP协议的区别在于它是全双工的，能够在客户端和服务器之间进行数据交换。WebSocket是为Web应用程序设计的，能够在实现长连接的同时保持低延迟和高吞吐量。

项目目录

我们的项目目录如下：

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

其中，server.ts为服务器端代码， client.ts为客户端代码， index.html是页面文件。

服务器端

首先我们需要创建一个WebSocket服务，这可以通过Deno的std/ws模块来实现。新建server.ts文件并输入以下代码：

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

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

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

该代码首先使用serve函数来监听服务端口，并且导入acceptWebSocket函数和WebSocket等标准函数用来处理WebSocket请求。接着当我们从浏览器中收到WebSocket请求时，服务器会向客户端发送连接成功的信息并监听来自客户端的消息，然后原封不动的返回给客户端。我们在控制台中打印WebSocket请求和响应，以便在调试过程中更轻松地查找错误。

客户端

现在我们编写一个简单的客户端，使其能够连接到WebSocket服务器并实现基本的聊天室交互功能。我们将文件命名为client.ts，并输入以下代码：

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

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

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

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

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

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

该代码首先创建了一个WebSocket实例并连接到服务器，然后分别监听open、message、close事件以便进行一些相关的操作，例如控制台输出、消息显示以及输入框清空等。同时，我们编写sendButton监听事件，使其能够向服务端发送文本信息。

这里需要注意的是，WebSocket需要使用ws://或wss://前缀来建立与服务器的连接。在此例中，我们使用ws://来连接到服务端，此外，与服务器的端口号允许不同，但需要在两个文件中保持端口号一致。

UI设计

最后，我们用HTML和CSS来设计聊天室的UI，以便在我们之前编写的代码上进行部署和集成。新建index.html文件并输入以下代码：

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

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

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

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

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

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

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

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

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

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

该代码设计了两个主要的区域：一个是message-container用于显示聊天记录，另一个是input-container用于输入文本信息并发送。CSS使用Flexbox模型实现元素的布局和排列，并使用阴影和圆角等实现了基础UI设计。同时，我们引入了client.ts文件使得聊天室的交互可以完成。

运行聊天室

现在，我们只需要在项目根目录下打开终端，输入命令deno run --allow-net server.ts以启动WebSocket服务器，然后在浏览器中打开index.html文件，就可以在聊天室中实现交互。

总结

本文详细介绍了如何在Deno中使用WebSocket构建一个简单的聊天室，并提供了完整的代码实现。此实现方法可以充分说明使用Deno开发WebSocket应用程序的步骤和注意事项。同时，该方法也给前端开发人员提供了增加实时交互效果的一个可供选择的途径。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/651d57a495b1f8cacd4e6ef0

阅读全文

猜你喜欢

  • 如何使用 Babel-plugin-lodash 进行 Lodash 库的按需加载

    在前端开发中，我们经常会使用到 Lodash 工具库来简化代码编写。然而，Lodash 库的体积较大，如果直接引入整个库，会导致页面加载速度变慢，影响用户体验。因此，我们需要对 Lodash 库进行按...

    1 年前
  • 解决 Fastify 框架中遇到的 JSON 文档方案问题

    Fastify 是一个基于 Node.js 的高效 Web 框架，它具有出色的性能和可扩展性，因此受到了众多开发者的欢迎。然而，在使用 Fastify 进行开发时，我们可能会遇到处理 JSON 文档的...

    1 年前
  • Enzyme+Jest：React 组件测试中如何模拟事件触发

    Enzyme+Jest：React 组件测试中如何模拟事件触发 在 React 应用中，组件是应用的基础。测试 React 组件的正确性是开发高质量应用的重要步骤。

    1 年前
  • 使用 ES11 中的 Future 语法，优化异步编程代码的可读性和性能

    异步编程是现代 Web 开发中不可避免的一部分。在 JavaScript 中，Promise 是一种常见的异步编程方式，它可以帮助我们更好地处理异步操作的结果。但是，Promise 也有一些缺点，比如...

    1 年前
  • ES6 中的 Proxy 实现数据统计及解决追踪数据变化问题

    ES6 中的 Proxy 实现数据统计及解决追踪数据变化问题 Proxy 是 ES6 中一个非常有用的特性，它能够对对象进行拦截和修改。在前端开发中，我们常常需要对数据进行统计分析和追踪变化，而 Pr...

    1 年前
  • SASS 和 LESS 编译器的优缺点比较

    前端开发中，CSS 的编写是必不可少的一部分。然而，随着项目的复杂度增加，原生 CSS 的编写方式已经不能满足需求。为了方便 CSS 的编写和维护，出现了一些 CSS 预处理器，如 SASS 和 LE...

    1 年前
  • ESLint 插件推荐：优化 JS 代码书写模式

    前言 在前端开发中，我们经常需要面对大量的 JavaScript 代码。为了保证代码的可读性和可维护性，我们需要遵循一定的编码规范和最佳实践。但是，手动检查代码是否符合规范是一件非常繁琐的工作。

    1 年前
  • React SPA 项目中使用 Redux 的实现方式简介

    前言 在使用 React 编写单页面应用（SPA）时，数据状态管理是一个十分重要的问题。Redux 是一个非常流行的状态管理库，它可以帮助我们在 React 应用中更好地管理数据流，并且在应用复杂度增...

    1 年前
  • 解决 Express.js 服务器端口冲突问题

    在开发前端应用过程中，我们经常会运行多个 Express.js 服务器来模拟前端页面的各种场景。但是，当我们同时运行多个服务器时，可能会发生端口冲突的问题，导致服务器无法正常启动，可能会严重影响开发进...

    1 年前
  • RxJS 的 exhaustMap 操作符使用及常见问题解决方法

    RxJS 是一款流行的 JavaScript 响应式编程库，它提供了许多操作符来处理异步数据流。其中 exhaustMap 操作符是一个非常有用的操作符，它可以帮助我们控制异步流的并发度。

    1 年前
  • 深入分析 Kubernetes 网络中的 Iptables 机制

    Kubernetes 是一个开源的容器编排平台，它的网络机制非常重要，因为它需要确保容器之间的网络通信是可靠和安全的。在 Kubernetes 中，Iptables 是一个非常重要的组件，它被用来控制...

    1 年前
  • Docker 运行 Java 程序报错解决方法

    Docker 是一种流行的虚拟化技术，它能够在一个统一的环境中运行不同的应用程序。Java 是一种在企业级应用程序开发中广泛使用的编程语言。但是，在 Docker 中运行 Java 程序时，经常会遇到...

    1 年前
  • MongoDB 聚合管道的实践及优化

    MongoDB 是一种流行的 NoSQL 数据库，具有高可扩展性和灵活性。聚合管道是 MongoDB 提供的一种强大且有效的数据分析工具，它可以让开发者通过定制一系列操作实现复杂的数据处理、转换和分析...

    1 年前
  • 解决在使用 Deno 运行 TypeScript 文件时出现的错误

    Deno 是一个新兴的 JavaScript/TypeScript 运行时环境，它的设计初衷是为了解决 Node.js 中的一些问题，比如包管理、安全性等等。Deno 支持 TypeScript，但是...

    1 年前
  • 使用 ECMAScript 2019 的字符串.padStart() 和字符串.padEnd() 填充字符串

    在前端开发中，我们经常需要对字符串进行格式化操作。ECMAScript 2019 引入了两个新方法：字符串.padStart() 和字符串.padEnd()，用于填充字符串。

    1 年前
  • 如何在 React Native 项目中使用 CSS Reset

    在 React Native 项目中使用 CSS Reset 可以帮助我们快速构建出一致的界面风格，提高开发效率。CSS Reset 是一种通用的 CSS 文件，它会将所有 HTML 元素的默认样式都...

    1 年前
  • Hapi 框架中使用 vision 模板引擎

    在前端开发中，模板引擎是一个非常重要的工具。它可以帮助我们将数据和 HTML 模板结合起来，生成最终的 HTML 页面。在 Node.js 的世界里，有很多优秀的模板引擎，比如 EJS、Handleb...

    1 年前
  • 如何利用 Server-sent Events(SSE) 实现实时通信功能

    随着互联网的发展，实时通信已经成为了很多应用的必备功能，而在前端开发中，利用 Server-sent Events(SSE) 实现实时通信功能是一种非常便捷且高效的方式。

    1 年前
  • 阿里前端框架推荐之 ES2016 全新特性 Array.prototype.includes() 及字符串模板

    ES2016 是 ECMAScript 的第七个版本，也是 JavaScript 的最新标准。在 ES2016 中，新增了一些非常有用的特性，其中包括 Array.prototype.includes...

    1 年前
  • Serverless 应用中的事件源管理最佳实践

    Serverless 架构是近年来非常流行的一种云计算架构，它将服务器管理和运维工作交给云服务提供商，让开发者可以更专注于应用程序的开发。在 Serverless 应用中，事件源是一个非常重要的概念，...

    1 年前

相关推荐

    暂无文章