在现代的 web 开发中，实时应用变得越来越流行，因为它们为用户提供实时的反馈和互动。要构建这些应用程序，您需要一个有效的实时传输机制和服务器框架来支持它。在这篇文章中，我们将探讨如何使用 Deno 和 Socket.IO 框架来构建实时应用。
什么是 Deno？
Deno 是一个安全的 JavaScript 和 TypeScript 运行时环境，它使用 V8 引擎执行 JavaScript 代码。Deno 可以在浏览器之外运行 JavaScript，并提供了一些额外的功能，例如跨平台支持，使用本地程序执行 JavaScript，以及支持所有标准 web API。 它是由 TypeScript 的创始人 Ryan Dahl 创建的，具有绝对安全性和更好的速度。
要从 Deno 官方网站 获取更多信息。
什么是 Socket.IO？
Socket.IO 是一个强大的、实时通讯协议的封装库，支持多个客户端同时连接，具有跨平台和通过浏览器工作的能力。Socket.IO 可以与多种后端框架进行配合工作，包括 Node.js、Deno 等等。Socket.IO 具有良好的文档和社区支持，可以很方便地为开发者提供实时应用程序所需的全部特性。
Deno 和 Socket.IO 的组合
Deno 和 Socket.IO 的组合产生强大的实时应用程序开发框架。Deno 提供了安全的运行时环境，并允许我们使用不同平台的模块， 而 Socket.IO 提供了易用的跨平台实时传输机制和服务器框架。在接下来的步骤中，我们将使用 Deno 和 Socket.IO 框架构建一个简单的实时聊天应用程序。
步骤 1：安装 Deno
首先，我们需要安装 Deno 运行时环境。您可以在官方网站上下载和安装适合您操作系统的 Deno 版本，或使用常见的包管理器进行安装。在本教程中，我们将使用 deno 1.14.1 版本。
步骤 2：安装 WebSocket 和 Socket.IO
我们需要安装 WebSocket 和 Socket.IO 支持。Deno 使用 deps.ts 文件来存储应用程序所需的所有依赖项。
在本教程中，我们需要安装 std/http、std/http/server、tomscholz/complex.js 和 keroxp/deno-socketio 依赖项。安装完成后，您的 deps.ts 文件应如下所示：
-- -------------------- ---- ------- -- ------- ------ - ---------------- ----------- ---------- ---------------------- - ---- ---------------------------------- ------ - --------------- -------------- --------- ----------------- ------ - ---- --------------------------------------- ------ - ------- - ---- ------------------------------------- ------ - -- - ---- ---------------------------------------
步骤 3：创建服务器
接下来，我们将创建一个名为 server.ts 的新文件，并编写以下代码来创建基本服务器：
-- -------------------- ---- ------- -- --------- ------ - -------------- - ---- ------------ ---------------- ----- ---- -- ----- -- - ------------- ----- ------ ---- -------- --- --- ------------------- ------- -- ---- -------
通过运行 deno run --allow-net server.ts 命令来启动服务器，并访问 http://localhost:3000 来检查服务器是否能够正常工作。
步骤 4：创建 Socket.IO 服务器
接下来，我们将使用 Socket.IO 创建我们的服务器端应用程序。在 server.ts 文件中，我们将添加以下代码来启动 Socket.IO 服务器：
-- -------------------- ---- ------- -- --------- ------ - ------------- - ---- ------------ ------ - ------ - ---- --------------------------------------- ----- ------ - --- --------- ----------------------- -------- -- - ------------------- ------------- --- ----- --------------- ----- ---- --- ---------------------- ------ ------- -- ---- -------
在此代码中，我们创建了一个名为 server 的新实例，并在它上面监听 "connection" 事件。每当一个新的 Socket.IO 客户端连接到服务器时，我们都会记录一条消息。
启动服务器，使用浏览器访问 http://localhost:3000，而在服务器端，您会看到一条消息显示，新的 Socket 已连接。
步骤 5：创建 Socket.IO 客户端
现在让我们创建客户端应用程序，以便向 Socket.IO 服务器发送消息。我们将在 client.html 文件中编写 HTML 和 JavaScript 代码来创建客户端应用程序，该代码采用了 jQuery。
-- -------------------- ---- -------
---- ----------- ---
--------- -----
----- ----------
------
----- --------------- --
----- ---------------------------- ----------------- --
----- --------------- ---------------------------- ------------------ --
----------- ---- ---- ------------
-------
------
----------- -- ---- ---- ---- ---------
--- --
------ ----------- ------------ --
------- -----------------------
--- --
--- -------------------
-------
-------------------------------------------------
-----------------------------------------------------------------------------------
-----------------------
----------
--------
-------------------------- -- -
----- ------ - ----------------------------
---------------------- -------- -- -
----- ------- - --------------------
---------------------- ---------
----------------------
---
-------------------- -------- --------- -
-----------------------------------------------
---
---
---------
-------
-------在上面的代码中，我们创建了一个基本的 HTML 页面，其中包含一个文本框、一个按钮和一个列表来存储收到的消息。socket 对象用于创建和服务器的连接，并通过 emit() 和 on() 方法来发送和接收消息。
步骤 6：测试实时聊天应用程序
现在让我们启动我们的服务器和客户端，并测试应用程序的实时聊天功能。使用以下命令启动服务器：
deno run --allow-net --allow-read server.ts
使用浏览器打开 client.html 文件的地址（例如：http://localhost:8000/client.html），并开始在文本框中输入您的消息。当您单击“发送”按钮时，消息将会立即从客户端发送到服务器，并广播到所有连接的客户端。
结论
通过本教程，我们已经学习了如何使用 Deno 和 Socket.IO 框架来创建实时应用程序。我们了解了 Socket.IO 的基本概念和功能，以及如何使用 Deno 和 Socket.IO 框架来创建实时应用程序。现在，您可以尝试在此基础上建立更复杂和强大的应用程序。在实际应用中，您可以将此架构应用于多样的场景，例如实时博客评论、实时地图数据、实时票房等等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67049dbad91dce0dc84f8295