简介
在开发前端应用时，我们经常需要实现实时交互的功能，比如聊天室、在线游戏等。这些功能需要实时地从服务器获取数据并将其展示在页面上，因此需要使用一些实时通信的技术。本文将介绍一种基于 Server-sent Events 的实时翻译应用，帮助读者了解 Server-sent Events 的基本原理和使用方法，并提供示例代码供读者参考。
什么是 Server-sent Events？
Server-sent Events（SSE）是一种服务器向客户端推送事件的技术。与 WebSocket 不同，SSE 使用 HTTP 协议进行通信，因此可以利用现有的基础设施（如 HTTP 服务器和反向代理），并且不需要双方进行握手。SSE 通过一个只读的 EventSource 对象实现，可以在客户端实现实时更新数据的功能。
实时翻译应用
在本文的实时翻译应用中，我们将使用 SSE 技术实现一个简单的翻译应用。该应用可以实时翻译用户输入的文本，并将结果展示在页面上。具体的实现过程如下：
服务器端
首先，我们需要编写一个服务器端程序，用于接收客户端发送的请求，并将翻译结果发送给客户端。在本例中，我们将使用 Node.js 和 Express 框架来实现服务器端程序。具体的代码如下：
----- ------- - -------------------
----- ---- - ----------------
----- --------- - ------------------------------------------
----- --- - ----------
----------------
--------------------- ----- ---- -- -
----- - ----- -- - - ----------
--------------- - -- --
------------ -- -
---------------- ---------------------
----------
--
---------- -- -
-------------------
----------------------
---
---
---------------- -- -- -
------------------- -- ------- -- ---- -------
---在上述代码中，我们使用了 @vitalets/google-translate-api 来实现翻译的功能。该库是一个基于 Google Translate 的 JavaScript API，可以轻松地实现翻译功能。在实际开发中，你也可以选择其他翻译库或者使用自己的翻译服务。
在服务器端程序中，我们使用了 Express 框架来创建 HTTP 服务器，并使用 cors 中间件来允许跨域访问。在 /translate 路由中，我们接收客户端发送的 text 和 to 参数，使用 @vitalets/google-translate-api 进行翻译，并将结果写入 HTTP 响应中。需要注意的是，我们在响应中添加了 data: 前缀，这是 SSE 规范要求的格式。
客户端
在客户端中，我们需要创建一个 EventSource 对象，用于接收服务器端发送的事件。在接收到事件后，我们将事件数据解析为翻译结果，并将其展示在页面上。具体的代码如下：
--------- -----
------
------
----- ----------------
---------------------
-------
------
------ -----------------------------
------ ----------- --------- ------------
------ -------------------------
------- ------- ----------
------- ----------------------
------- ----------------------
------- ----------------------
------- ----------------------
------- ----------------------
------- ------------------------
------- -----------------------------
------- -----------------------------
---------
------- ------------------------------
---- ------------------
--------
----- --------- - --------------------------------
----- ------- - ------------------------------
----- ------------ - -----------------------------------------
----- --------- - ----------------------------------
----- ------ - --- --------------------------
-------------------------------------- -- -- -
----- ---- - ----------------
----- -- - --------------
-----------------------------------------
--------- -- -
-- --------- -
----- --- --------------
-
--
---------- -- -
-------------------
---
---
---------------------------------- ----- -- -
----- ------ - -----------
------------------- - -------
---
---------
-------
-------在上述代码中，我们使用了原生的 JavaScript 和 Fetch API 来实现客户端的功能。在页面加载完成后，我们创建了一个 EventSource 对象，用于接收服务器端发送的事件。在用户点击“翻译”按钮后，我们使用 Fetch API 发送翻译请求，并在请求成功后将翻译结果展示在页面上。需要注意的是，我们在发送翻译请求时，没有使用 SSE 技术，而是使用了普通的 HTTP 请求。这是因为 SSE 技术只能实现服务器向客户端推送事件，而不能实现客户端向服务器发送请求。
总结
本文介绍了基于 Server-sent Events 的实时翻译应用，帮助读者了解 Server-sent Events 的基本原理和使用方法。同时，本文提供了服务器端和客户端的示例代码，供读者参考。需要注意的是，本文只是一个简单的示例，实际开发中可能需要考虑更多的安全性和性能问题。读者可以根据自己的需求进行扩展和优化。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f394b42b3ccec22fc092ec