在 Deno 中使用 WebSocket 进行实时位置共享的完整教程

面试官：小伙子，你的数组去重方式惊艳到我了

在 Deno 中使用 WebSocket 进行实时位置共享的完整教程

引言

WebSocket 是一种协议，用于在客户端和服务器之间建立实时的双向通信。在此教程中，我们将学习如何使用 Deno 和 WebSocket 协议来构建一个实时位置共享应用程序。

先决条件

为了完成本教程，您需要：

  1. Deno 运行时环境的安装

  2. 一些基本的 TypeScript 知识

  3. 一些基本的 JavaScript 和 HTML 知识

步骤 1：建立基础

我们从熟悉 Deno 和 WebSocket 开始。首先，我们要安装 Deno。

在您的终端中输入以下命令，以在本地安装 Deno：

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

如果您使用 Windows，请安装 Deno 的二进制文件。

安装完 Deno 后，在项目文件夹中创建文件 index.ts 和 index.html。在 index.ts 文件中，输入以下代码：

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

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

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

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

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

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

上面的代码通过 Deno 来创建一个 HTTP 服务器，并等待 WebSocket 连接。当 WebSocket 连接建立时，会在控制台上打印出一条消息。

但是，现在我们还没法使用 WebSocket，因为还没有创建一个能够与 WebSocket 交互的前端。

步骤 2：创建交互前端

在 index.html 文件中，输入以下代码：

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

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

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

-------

上面的代码包含了一个包含文本输入和发送按钮的 HTML 页面。当用户单击发送按钮时，页面会向 WebSocket 服务器发送文本消息。

步骤 3：构建实时位置共享

现在，我们可以开始构建实时位置共享应用程序了。

首先，我们需要为位置创建一个类：

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

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

接下来，我们需要为每个 WebSocket 连接创建一个位置对象。我们只为每个连接保留一个位置，因为我们只跟踪每个用户的位置。

我们将部分代码移到一个新文件 user.ts 中以方便管理。

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

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

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

接下来，我们需要更新 index.ts 中的 handleWs 函数，以保持跟踪每个连接的位置。为此，我们需要在用户对象中存储 WebSocket 对象，并更新 handleWs 函数以记录新的用户连接：

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

-- ---

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

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

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

  -- ---
-

现在，我们需要为每个用户创建一个位置更新函数。我们将这个函数移动到 user.ts 文件中：

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

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

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

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

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

在上面的代码中，updateLocation 函数通过将位置更新发送给所有连接的 WebSocket 来保持用户位置更新。sendLocation 函数通过调用的 User 对象的 WebSocket 对象来发送位置。

现在，我们需要实现一个位置更新 API。我们将此移动到路由文件中：

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

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

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

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

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

注意我们使用了 Deno 标准库的 HTTP 请求解析器，请在使用前安装依赖 import { parse } from "https://deno.land/std/encoding/https://deno.land/std/http/server.ts";

然后我们可以在 handleWs 中将 API 绑定到 HTTP 服务器上：

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

-- ---

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

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

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

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

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

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

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

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

最后，我们需要在前端发送位置数据和接收位置数据：

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

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

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

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

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

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

-------

上面的代码使用浏览器 API 获取位置数据并将其发送到后端进行处理。通过设置 setInterval()，它还将每 5 秒发送一次位置数据。

结论

在本教程中，我们学习了如何使用 Deno 和 WebSocket 将实时位置共享集成到自己的应用程序中。我们建立了一个具有跟踪用户位置的 WebSocket 服务器，并为客户端提供了一个基础界面。此外，我们还通过向服务器添加简单的 API 来生成位置数据。我希望本教程可以帮助你开始构建自己的实时应用程序。

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

阅读全文

猜你喜欢

  • GraphQL 中的数据模型设计解析及最佳实践

    在现代 Web 开发中，前后端分离的开发模式已经得到了广泛的应用。GraphQL 作为一种新的 API 开发和查询语言，提供了一种更加灵活、高效的数据交互方式，被越来越多的开发者所关注和使用。

    5 天前
  • 如何在 Deno 中测试代码

    Deno 是一个安全可靠的 JavaScript 和 TypeScript 运行时环境，它内置了很多有用的工具和特性，例如内置的模块系统、异步 I/O、安全沙箱等等，让我们可以更加方便地构建与运行 W...

    5 天前
  • ECMAScript 2021（ES12）中的Reflect新特性：详解与实例

    Reflect是JavaScript中一个非常有用的内置对象，它提供了许多常见操作的底层方法，如创建对象和修改属性等。在ECMAScript 2021（ES12）中，Reflect引入了一些新特性，本...

    5 天前
  • CSS Reset 的重要性和优点

    CSS Reset 是一种用于重置浏览器默认样式的技术，它能够清除大量不必要的样式，并使不同浏览器在显示页面时保持一致。此外，CSS Reset 还能够使开发人员更加方便地编写样式，避免因不同浏览器的...

    5 天前
  • 如何使用 Chai.js 编写 JavaScript 的可维护性单元测试

    什么是 Chai.js Chai.js 是一个流行的 JavaScript 断言库，它可以与许多测试框架配合使用，如 Mocha，Jasmine 等。Chai.js 提供了自然语言的断言语法，可以方便...

    5 天前
  • 提供图形化无障碍信息的网站设计技巧

    我们设计网站时，要考虑到残障人士也能够方便地访问和使用网站。其中一个重要的方面就是提供图形化无障碍信息。本篇文章将介绍一些网站设计的技巧，旨在让你能够设计出易于残障人士使用的网站。

    5 天前
  • 解决 Cypress 访问站点 403 错误的问题

    最近在使用 Cypress 进行前端自动化测试时，遇到了访问站点发生 403 错误的问题。这个问题很常见且容易解决，但是对新手来说可能会遇到很多困难。在这篇文章中，我将为大家提供解决这个问题的方法和技...

    5 天前
  • 如何优化 Serverless 应用的 API 速度

    随着云服务的普及，越来越多的应用被部署到 Serverless 平台上，其中最为常见的是基于 AWS Lambda 的应用。然而，虽然 Serverless 的许多优点已经被广泛认可，但在处理高并发流...

    5 天前
  • JavaScript 中响应式设计的 18 个技巧和技术！

    前言 随着 Web 应用程序越来越复杂，开发者们面临着越来越多的挑战，其中之一就是实现响应式设计。响应式设计意味着能够在不同的屏幕尺寸和设备上自适应地呈现内容。这种设计方法不仅可以提高用户体验，还可以...

    5 天前
  • Next.js 的持续集成和部署流程

    随着前端项目越来越复杂，我们需要一种更加高效、可靠的方式来持续部署和交付我们的应用。Next.js 是一种流行的 React 框架，它提供了一些有用的工具来简化持续集成和部署流程。

    5 天前
  • Promise.allSettled 的实现原理

    前言 Promise.all 和 Promise.race 是我们常用的两个 Promise 方法，但是自从 ECMAScript2019 引入了 Promise.allSettled，它也变得越来越...

    5 天前
  • Angular 中如何使用 OpenLayers 地图库进行地图应用开发

    简介 Angular 是一款流行的前端框架，其能更好地组织代码、管理依赖、提供丰富的扩展等优势，越来越多的工程师开始抛弃传统地图开发方式，将地图应用与 Angular 框架结合。

    5 天前
  • ES11 新特性：BigInt 精确数字类型

    在过去的 JavaScript 中，数字类型只能表示从 -2^53 到 2^53 范围内的整数，而对于更大的数字需使用第三方库进行处理。为了解决这个问题，ECMAScript 2020（也称为 ES1...

    5 天前
  • 利用 Enzyme 测试 React 组件的正确方式

    React 是一种流行的 JavaScript 库，可以帮助开发者构建复杂的 Web 应用程序。以 React 为例，它是一种基于组件的开发方式，组件是应用程序的构建快照，组件可以重复使用。

    5 天前
  • 如何使用 Headless CMS 构建在线教育平台的内容管理系统

    前言 在线教育平台是近年来蓬勃发展的行业之一，很多企业和机构都在开发和使用自己的在线教育平台。为了让教学内容能够更加有效地被传达，内容管理系统是必不可少的一部分。 传统的 CMS 存在一些问题，比如界...

    5 天前
  • 利用 GraphQL 开发即时通讯系统的指南

    随着互联网和移动设备的普及，即时通讯系统成为了人们日常生活中必不可少的一部分。对于前端开发者来说，如何利用好现有的技术来开发高效稳定的即时通讯系统成为了一个重要的问题。

    5 天前
  • React SPA 中如何优雅的进行异步数据加载

    React SPA 中如何优雅的进行异步数据加载 React 是一个流行的 JavaScript 库，它可以帮助您构建交互式、动态的用户界面。在 React SPA（单页应用）中，异步数据加载是非常重...

    5 天前
  • Vue.js 应用如何进行单元测试？

    Vue.js 是一个流行的前端框架，它允许我们快速构建 SPA（Single-Page Application），优秀的组件化和可测试性是 Vue.js 尤为吸引开发者的特性之一。

    5 天前
  • 使用 SASS 优化 CSS 代码的常用技巧

    SASS 是一种 CSS 预处理器，它可以让前端开发者更加方便地编写 CSS 代码。相比原生 CSS 语法，SASS 支持变量、嵌套、继承、混入等特性，让 CSS 代码更加模块化、可读性更强、可维护性...

    5 天前
  • Serverless 应用中如何应对密集请求的挑战？

    对于 Serverless 应用来说，面对密集的请求可能会导致高并发和运行时错误，特别是当这些请求需要在短时间内完成非常复杂的任务时。本文将介绍一些应对 Serverless 应用中密集请求的挑战的最...

    5 天前

相关推荐

    暂无文章