前言
在 Web 应用程序的开发过程中，异步通信是无法避免的。而 Server-sent Events 是一种 HTML5 API，仅使用 HTTP 连接便可以实现服务器主动向客户端推送信息的机制。本文将介绍 Server-sent Events 的基本概念，以及如何使用 JS 实现前端异步通信。
Server-sent Events 的基本概念
Server-sent Events 是一种基于 HTTP 的单向发送数据流机制，它只提供了一个简单的 API，用于在客户端接收服务器发送的事件流。例如，一个服务器可以向客户端发送计数器或者新闻通知。
它具有以下特点：
- 基于 HTTP 连接，不需要 WebSocket 等其他协议
- 支持 JSON、XML、文本等各种数据格式
- 自动重连，可以保持长连接
- 安全，只能从同源服务器接收数据
在客户端，我们可以通过 JavaScript 监听事件流，并使用相应的处理函数在接收到信息时操作数据或者界面。
在 JS 中使用 Server-sent Events 实现异步通信
在 JavaScript 中，我们可以使用 EventSource 对象来处理服务器推送的事件流。接下来我们将演示如何使用 EventSource 对象来实现前端的异步通信。
以下是一个简单的服务端例子，使用 Node.js + Express 框架来向客户端推送消息：
-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------
------------------ ----- ---- -- -
----------------------------- --------------------
------------------------------ -----------
-------------- -- -
----- ---- - -
-------- ------ ---- ------ -- ----- -----------------------------
-
---------------- -----------------------------
-- -----
--
---------------- -- -- -
------------------- ------- -- ---- ------
--客户端 HTML 代码如下，我们先监听 message 事件，然后在接收到事件时打印出数据：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------ ------ ------------
-------
------
--------------- ------ ---------
---- ------------------
--------
----- ------ - --- ----------------------
---------------------------------- - -- -
----- ---- - ------------------
-------------------------
--------------------------------------------- - ------------
-- ------
---------
-------
-------客户端获取到数据后，我们通过 JSON.parse() 方法将字符串数据转换为 JS 对象，然后使用 textContent 属性将数据显示在 HTML 页面上。
总结
本文介绍了 Server-sent Events 的基本概念，以及如何在 JS 中使用 EventSource 对象实现前端的异步通信。同时为了方便理解，我们提供了一个简单的服务端例子和客户端 HTML 代码。掌握了这些概念与技术，你可以在前端项目中更加优雅地实现异步通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f9174980a9b385b8fd933