前言
WebSocket 是一种基于 TCP 的协议，它可以提供双向通信的功能，因此可以被用来实现即时通信功能。在前端领域中，WebSocket 已经广泛应用在聊天、游戏等场景中。
在本文中，我们将介绍如何在 Deno 中使用 WebSocket 实现一个即时翻译工具。我们将通过这个项目来深入了解 WebSocket 的使用，以及如何在 Deno 中构建实时应用程序。
本文适合有一定前端基础的读者阅读。
WebSocket 简介
WebSocket 是一种基于 TCP 的协议，它与 HTTP 不同，可以支持双向通信。通过 WebSocket，浏览器可以向服务器发送信息，并且服务器也可以向浏览器发送消息，而不需要浏览器主动向服务器发起请求。
在 WebSocket 协议中，通信的双方先通过 HTTP 建立连接，然后进行一次握手。握手成功后，客户端和服务器就可以直接使用 WebSocket 协议进行通信。
Deno 简介
Deno 是一种由 Ryan Dahl 创建的 JavaScript 和 TypeScript 运行时，它建立在 V8、Rust 和 Tokio 等现代技术上。
Deno 没有包管理器（如 npm），它使用 URL 导入来管理模块。Deno 的安全模型可以让您更好地控制脚本的运行环境，同时避免了许多 Node.js 的设计缺陷。
实现原理
在本项目中，我们使用了 Google 的翻译 API 来实现翻译的功能。具体来说，我们将实现一个 WebSocket 服务器，它可以接收客户端的文本输入，并将其发送给 Google 翻译 API 进行翻译。然后，服务器在将翻译后的文本发送回客户端。
项目结构
本项目结构如下：
- server.ts - client.html
server.ts 是 WebSocket 服务器的主要逻辑。client.html 是客户端的代码。
实现步骤
1. 安装 Deno
在开始之前，您需要先安装 Deno。您可以通过以下命令来安装：
$ curl -fsSL https://deno.land/x/install/install.sh | sh
2. 创建项目
在项目根目录下创建 server.ts 和 client.html。
3. 导入依赖
在 server.ts 中导入 deno 的 WebSocket 库和转换 JSON 的库，代码如下：
import {
acceptable, acceptWebSocket, WebSocket,
} from "https://deno.land/std/ws/mod.ts";
import { serve } from "https://deno.land/std/http/server.ts";4. 创建 WebSocket 服务器
我们将使用 Deno 的 HTTP 服务器来创建 WebSocket 服务器。在 server.ts 中添加以下代码：
-- -------------------- ---- -------
----- ------ - ------- ----- ---- ---
--------------------------------------
--- ----- ------ --- -- ------- -
-- ----------- --- ----- -- ------- --- ------ -
----- -- - ----- ---------------------
--------------------
-
-在这里，我们定义了一个 HTTP 服务器，并将其侦听在端口 3000 上。当客户端发起 WebSocket 握手请求时，我们将通过 acceptWebSocket 方法创建一个 WebSocket 对象，并将其传递给 handleWebSocket 方法。
5. 在 WebSocket 中处理消息
在 handleWebSocket 方法中，我们将处理客户端发送的消息。具体来说，我们将读取客户端发送的文本输入，并使用 Google 翻译 API 进行翻译，最后将翻译后的文本发送回客户端。
在 handleWebSocket 方法中添加以下代码：
async function handleWebSocket(socket: WebSocket): Promise<void> {
for await (const event of socket) {
if (typeof event === "string") {
const translatedText = await translate(event);
socket.send(translatedText);
}
}
}在这里，我们在 handleWebSocket 方法中监听客户端发送的 message 事件，并使用 translate 函数将文本翻译为其他语言。最后，我们通过 socket.send 方法将翻译后的文本发送回客户端。
6. 使用 Google 翻译 API 进行翻译
接下来，我们将实现 translate 函数，它将使用 Google 翻译 API 将文本翻译为其他语言。在 server.ts 中添加以下代码：
async function translate(text: string): Promise<string> {
const response = await fetch(`https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=zh&dt=t&q=${text}`);
const data = await response.json();
return data[0][0][0];
}在这里，我们使用 fetch 方法向 https://translate.googleapis.com/translate_a/single 发送 GET 请求，并通过添加查询参数来设置翻译的源语言和目标语言。然后，我们通过解析响应的 JSON 数据来提取翻译后的文本。
7. 创建客户端
在 client.html 中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------------ ------------
-------
------
------------ -------------
--- --
------ ----------- ---------- --
--- --
------------- -------------
--- --
--------- ----------- --------------------
--- --
------- ------------------------------------
--------
----- -- - --- ------------------------------------
------------ - ------- -- -
----- ------ - ----------------------------------
---------------- - -----------
--
-------- --------- -
----- ----- - ---------------------------------------
---------------
-
---------
-------
-------在这里，我们定义了一个包含文本输入和输出的 HTML 页面。当用户单击“Connect”按钮时，我们将使用 WebSocket 服务器建立连接，并将用户输入发送给服务器。服务器将翻译文本，并将其发送回到客户端，客户端将翻译后的文本显示在输出框中。
8. 运行项目
在项目的根目录下执行以下命令，启动 WebSocket 服务器：
$ deno run --allow-net server.ts
接着，通过浏览器打开 client.html，开始使用我们的翻译工具。
总结
在本教程中，我们使用 Deno 和 WebSocket 实现了一个简单的即时翻译工具。我们介绍了 WebSocket 的基本原理，以及如何使用 Deno 的 WebSocket 库创建 WebSocket 服务器。我们还通过 Google 翻译 API 实现了文本翻译功能，并在浏览器中创建了一个基本的客户端。
通过本项目，我们可以深入了解 WebSocket，理解如何在实时应用程序中使用 WebSocket，以及如何在 Deno 中构建实时应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6520132595b1f8cacd79abfd