在 Deno 中使用 WebSocket 进行实时位置共享的完整教程
引言
WebSocket 是一种协议，用于在客户端和服务器之间建立实时的双向通信。在此教程中，我们将学习如何使用 Deno 和 WebSocket 协议来构建一个实时位置共享应用程序。
先决条件
为了完成本教程，您需要：
Deno 运行时环境的安装
一些基本的 TypeScript 知识
一些基本的 JavaScript 和 HTML 知识
步骤 1：建立基础
我们从熟悉 Deno 和 WebSocket 开始。首先，我们要安装 Deno。
在您的终端中输入以下命令，以在本地安装 Deno：
curl -fsSL https://deno.land/x/install/install.sh | sh
如果您使用 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