简介
HTML5中的Server-sent Events提供了一种在服务端推送数据到客户端的实时通信方式。相较于传统的轮询或者WebSocket技术，SSE有诸多优势，比如易于实现、无需借助第三方库等。本文将详细说明在使用SSE时，服务器端需要做哪些准备工作。
准备工作
基础结构
为了使用SSE，服务器端首先得建立起基本的HTML结构，包括一个嵌入式script元素和一个用来展示推送内容的div元素。
-- -------------------- ---- -------
--------- -----
------
------
---------- ---------------
-------
------
------- ------------
---- ------------------
--------
----- ------ - --- -----------------------
---------------- - --------------- -
------------------------------------------- -- ---------- - -------
--
---------
-------
-------上述代码中，script元素中的代码通过创建EventSource对象，并监听其onmessage事件，以便于在接收到服务端发送过来的消息时，更新页面上用来展示推送内容的div元素。
PHP文件
在服务器端，我们以PHP文件为例。
-- -------------------- ---- -------
-----
--------------------- --------------------
---------------------- -----------
------------------- -------------
-- - --
----------- -
---- ------- --------
----- - -
---- -- -----
------ -- ----------
--------- -- ----- ------
--
---- ------ - - ------------------ - -------
--------
---------
-
--该PHP文件的不同部分分别设置了响应类型、缓存等相关头部信息，并在循环体中，使用echo命令将一个名为“ping”的事件（event）发送到客户端。然后，以字符串形式拼接出一段JSON格式的数据并添加到"message"字段中，再将整段消息以"data"段名直接附加到它原本的payload中。
此外，flush() API的作用是即时推送已准备好的内容，而无需等待整个输出完成。sleep()调用暂停脚本执行指定的秒数。
注意：上述代码中需要明确指定每条消息之间的空行，否则浏览器将无法识别消息结构。
总结
- Server-sent Events能够提供实时通信功能。
- 在使用SSE时，服务器端需要准备好HTML基础结构和PHP文件。
- PHP文件需要设置一系列头部信息，同时按照固定格式编写可传递到前端的消息流。
参考示例
- 项目示例: sse-example
- 文献参考: HTML5 标准之 Server-sent Events (SSE)
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6501dcc295b1f8cacdf7259f