使用 Deno 中的 WebSocket 实现简单聊天室

WebSocket 是一种在客户端和服务器之间建立实时双向通信的技术。在前端开发中,我们经常使用 WebSocket 来实现聊天室、实时通知等功能。而 Deno 是一个安全的 JavaScript 和 TypeScript 运行时环境,它提供了 WebSocket API,可以方便地实现 WebSocket 通信。

在本文中,我们将介绍如何使用 Deno 中的 WebSocket API 实现一个简单的聊天室。

准备工作

在开始之前,我们需要先安装 Deno。可以在 Deno 官网 下载安装包进行安装。

安装完成后,我们可以创建一个新的文件夹,在其中创建两个文件:server.tsclient.html。其中,server.ts 用于实现服务器端代码,client.html 用于实现客户端代码。

实现服务器端代码

server.ts 中,我们需要先创建一个服务器并监听指定端口:

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

接下来,我们需要创建 WebSocket 服务器,并在收到客户端连接时创建 WebSocket 连接:

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

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

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

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

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

在上面的代码中,我们使用 acceptWebSocket 函数创建 WebSocket 连接,并在 handleWebSocket 函数中处理收到的消息。当收到客户端发送的消息时,我们将消息原封不动地发送回去。

实现客户端代码

client.html 中,我们需要创建 WebSocket 连接并发送消息:

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

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

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

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

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

在上面的代码中,我们首先创建了一个 WebSocket 连接,然后监听 openmessage 事件。当连接成功时,我们在控制台输出一条消息。当收到服务器发送的消息时,我们创建一个新的 li 元素,并将消息添加到 ul 元素中。最后,我们定义了一个 sendMessage 函数,用于向服务器发送消息。

运行程序

在准备工作完成后,我们可以在终端中执行以下命令启动服务器:

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

然后,在浏览器中打开 client.html 文件,即可看到一个简单的聊天室界面。在输入框中输入消息并点击发送按钮,即可将消息发送给服务器,并在聊天室中显示出来。

总结

在本文中,我们介绍了如何使用 Deno 中的 WebSocket API 实现一个简单的聊天室。通过这个例子,我们可以学习到如何创建 WebSocket 服务器和客户端,以及如何处理 WebSocket 连接和消息。希望本文能对大家有所帮助。

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


猜你喜欢

  • Vue-cli3 如何关闭或修改 Eslint 检查规则

    前言 在使用 Vue-cli3 构建项目时,我们通常会使用 Eslint 进行代码规范检查,以便保证代码风格的一致性和可读性。但是,有时候我们可能需要关闭或修改某些 Eslint 规则,以满足项目的特...

    8 个月前
  • 在 ES2017 中使用字符串填充函数填充不同长度的字符串

    在 ES2017 中使用字符串填充函数填充不同长度的字符串 在前端开发中,我们经常会遇到需要对字符串进行填充的情况。比如,我们需要把一个字符串填充为一定长度,或者我们需要在字符串的前面或后面填充一些特...

    8 个月前
  • 深入理解 ES11 中的 String.prototype.matchAll 方法及使用场景

    在 ES11 中,新增了一个方法 String.prototype.matchAll,该方法可以用于在字符串中查找所有匹配正则表达式的子串,并返回一个迭代器。 语法 -----------------...

    8 个月前
  • ES7 新特性之二进制数值的表示和运算方式

    在 ES7 中,新增了二进制数值的表示和运算方式,允许开发者使用二进制数值进行计算和操作。这一特性为开发者提供了更多的选择,也有助于提高代码的可读性和可维护性。 二进制数值的表示 在 ES7 中,可以...

    8 个月前
  • PWA 开发中的实践 —— 构建一个 SPA 应用

    前言 在移动互联网时代,用户对于网页的体验要求越来越高,特别是对于移动设备上的网页,用户的体验要求更是严格。PWA(Progressive Web App)应运而生,它不仅可以提供可靠、快速、无需安装...

    8 个月前
  • RxJS 中使用 race 和 timeout 操作符解决 AJAX 请求超时

    在前端开发中,我们经常需要发起 AJAX 请求来获取数据。但是,由于网络等原因,请求可能会超时,导致页面无法正常显示。在这种情况下,我们可以使用 RxJS 中的 race 和 timeout 操作符来...

    8 个月前
  • 使用 Koa-router 在前端展示 MySQL 数据

    在 Web 开发中,前端展示数据是非常常见的需求。而 MySQL 是一个广泛被使用的关系型数据库,因此在前端展示 MySQL 数据也是一项很重要的技能。在本文中,我们将介绍如何使用 Koa-route...

    8 个月前
  • 使用 Deno 中的 JSON 模块操作 JSON 数据

    在前端开发中,JSON 是一种常见的数据格式。而 Deno 是一种新兴的 JavaScript 运行时,它提供了许多强大的模块,其中包括一个 JSON 模块,可以帮助我们更轻松地操作 JSON 数据。

    8 个月前
  • ECMAScript 2021 中的异步迭代器

    在 ECMAScript 2021 中,异步迭代器是一个新的特性,它使得在异步数据流中进行迭代变得更加容易和方便。异步迭代器是一种可以异步生成数据的迭代器,并且可以通过 for-await-of 循环...

    8 个月前
  • 掌握 ES10 Promise 的正确使用姿势!

    随着前端技术的不断发展,异步编程已经成为了我们日常开发中必不可少的一部分。而 Promise 就是一种用于解决异步编程的技术手段,它可以让我们更加方便地处理异步操作,提高代码的可维护性和可读性。

    8 个月前
  • Fastify 框架如何处理 HTTPS 请求

    前言 在现代 Web 应用程序中,安全性是至关重要的。HTTPS 是一种安全的传输协议,可以确保客户端和服务器之间的通信不会被黑客窃取或篡改。Fastify 是一种现代的 Node.js Web 框架...

    8 个月前
  • Vue.js 单页面应用中切换路由滚动条位置问题解决方法

    在使用 Vue.js 构建单页面应用时,经常会遇到一个问题:页面路由切换后,滚动条位置不会自动重置,导致新页面显示时,滚动条位置还停留在旧页面的位置。这不仅会影响用户体验,还可能产生一些不必要的问题。

    8 个月前
  • 解决 RESTful API 中 DELETE 请求无法删除数据的问题

    RESTful API 是一种常用的 Web API 设计风格,它使用 HTTP 协议中的各种方法来实现对资源的访问和操作,其中 DELETE 方法用于删除指定的资源。

    8 个月前
  • Serverless 应用部署指南

    什么是 Serverless? Serverless 是一种新兴的云计算架构,它是基于事件驱动的计算模型,可以让开发者专注于业务逻辑的实现,而不需要关注底层的服务器管理和维护。

    8 个月前
  • 困扰你的是 ES6 数组拼接问题么?使用 ES9 解决这一问题!

    在前端开发中,数组拼接是一个常见的需求。在以前,我们可能会使用 ES6 中的 concat() 方法来实现数组拼接。但是,这种方法在处理大量数据时效率较低,因为它会创建一个新的数组并将两个数组合并在一...

    8 个月前
  • Promise.all() 中如何处理大量 Promise 时的性能问题?

    在前端开发中,我们经常需要处理大量的异步请求,而 Promise.all() 是一个非常常用的工具,它可以同时处理多个 Promise 对象,等待它们全部完成后再执行下一步操作。

    8 个月前
  • SPA 单页应用中如何实现图片懒加载

    什么是图片懒加载 图片懒加载是一种优化网页性能的技术,它可以在用户滚动到页面上的图片时再加载图片。这种技术可以减少页面的加载时间和带宽消耗,提高用户体验。在 SPA 单页应用中,图片懒加载也是一种常见...

    8 个月前
  • Angular CLI 环境配置全解

    Angular CLI 是一个命令行工具,它可以帮助我们快速创建 Angular 应用程序、组件、服务等等。在开始 Angular 开发之前,我们需要先配置好 Angular CLI 环境。

    8 个月前
  • 在 TypeScript 中使用 ES7 的 async/await 语法的技巧与注意点

    随着 TypeScript 和 ES7 的不断发展,越来越多的开发者开始使用 async/await 来处理异步操作。在 TypeScript 中使用 async/await 语法可以使代码更加简洁、...

    8 个月前
  • Docker 容器中安装 Nginx 并配置 HTTPS 证书

    前言 在现代 Web 开发中,Nginx 是一个非常流行的 Web 服务器,它可以快速地处理大量的并发请求,并且具有高度的可靠性和安全性。而 Docker 容器则是一种轻量级的虚拟化技术,它可以让我们...

    8 个月前

相关推荐

    暂无文章