当我们开发 web 应用程序的时候，常常需要实时从服务器获取数据。传统的解决方案一般是使用轮询（polling）或长轮询（long polling）实现。但是这些方式的缺点在于它们需要不停地向服务器发送请求，这样会浪费带宽以及服务器资源。因此，HTML5 提供了 Server-sent Events（SSE）技术，它是一种轻量级的实时通信技术，可以让服务器向客户端推送数据，这样可以更有效地节省带宽和资源。
HTML5 Server-sent Events 概述
Server-sent Events 是一种浏览器与服务器之间的单向通信协议。它允许服务器推送数据到客户端，而客户端可以在接收到数据后执行相应的操作。
实现 SSE 通信的关键是服务器端需要有一个 HTTP 连接，如果有数据发送，服务器可以通过这个连接实时地将数据发送给客户端。SSE 的优点在于它比 WebSocket 更简单，不需要进行额外的协议协商，也不需要使用 socket。
在一个 SSE 连接中，浏览器向服务器发送一个普通的 HTTP 请求，并在请求头中包含了一个特殊的 MIME 类型："text/event-stream"。当服务器收到这个请求后，它会发送一条消息，并使用特殊的格式将这个消息发送到浏览器。浏览器解析这条消息，然后将其展示给用户。
HTML5 Server-sent Events 实践
接下来让我们通过一个简单的示例来了解使用 HTML5 Server-sent Events 的实现过程。
环境搭建
首先，我们需要一个 HTTP 服务器。可以使用 Python 等语言的内置 HTTP 服务器，也可以使用 Apache 等第三方服务器。
这里以使用 Python 3 内置的 HTTP 服务器为例，打开终端，进入项目目录，输入以下命令：
python -m http.server 8000
这会启动一个 HTTP 服务器，监听本机的 8000 端口。现在，如果在浏览器中访问 http://localhost:8000，应该可以看到一个空白页面。
服务器端
创建一个名为 sse-demo.py 的 Python 脚本，代码如下：
-- -------------------- ---- -------
------ ----
---- ----------- ------ ----------- ----------------------
----- ----------------------------------
--- -------------
- ----
-----------------------
-------------------------------- --------------------
--------------------------------- -----------
------------------------------ -------------
------------------
- -----------
--- - -- ----------
------------- - ----
---- - ------ -----------------
-------------------------------
-- -------- -- -----------
-------------- - ---- -----
----- - -------------------------- ----------
------------- ------- -- -------------------
---------------------这个脚本会创建一个 HTTP 服务器，监听本机的 8001 端口。
在请求头中，我们设置了 "Content-Type" 为 "text/event-stream"，这是 SSE 通信协议的标志。
服务器将实时向客户端发送数字，每秒钟发送一个数字。这个实时数据可以通过在客户端创建 SSE 的 EventSource 对象来接收。
客户端
接着，在浏览器中创建一个 HTML 文件，代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
------- ---------
-- ----------------
--------
--- --- - --- --------------------------------------
------------- - --------------- -
------------------------------------------- -- ---------- - --------
--
---------
-------
-------我们在这个页面中创建了一个 EventSource 对象，并将服务器的地址作为参数传入。这个对象会监听服务器发送的事件，并在 "onmessage" 回调函数中接收数据。
我们将数据显示在页面上的 p 标签中。
运行
保存 HTML 文件和 Python 脚本，分别在两个终端运行这两个脚本：
python -m http.server 8000 # 启动 HTTP 服务器 python sse-demo.py # 启动 SSE 服务器
在浏览器中访问 http://localhost:8000，即可看到实时数据实时展示在页面上。
总结
HTML5 Server-sent Events 是一种轻量级的实时通信技术，可以让服务器向客户端推送数据，这样可以更有效地节省带宽和资源。本文介绍了如何使用 HTML5 Server-sent Events 来实现实时通信的一些概念和基本原理，并通过一个简单的 demo 来展示具体实现流程，希望能够对你了解和应用 SSE 技术有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65031cc595b1f8cacd03138b