什么是 SSE?
SSE 全称 Server-Sent Events，服务器向客户端发送事件，它是 HTML5 中非常重要的 API 之一。SSE 通过使用普通的 HTTP 连接，在服务端发送数据到客户端。SSE 和 WebSocket 类似，也可以实现实时通信，但是与 WebSocket 不同的是，SSE 建立在 HTTP 请求上，可以利用 HTTP 服务器的各种特性，比如端口转发、用户身份验证、HTTPS 等等的。
如何使用 SSE？
前端使用 SSE 需要在客户端创建一个新的 EventSource 对象，指定 SSE 服务器的 URL。SSE 服务端使用 PHP、Node.js、Java 等编程语言实现，客户端便于开发和理解，一般使用 JavaScript。
浏览器兼容性：IE 不支持 SSE，支持 SSE 的浏览器包括 Chrome, Firefox, Opera 和 Safari。
以下是一个简单的示例：
服务端代码：
-- -------------------- ---- -------
-----
--------------------- --------------------
---------------------- -----------
------------------- -------------
----- - ------
------------ -- ----- ----- -- ----
------------ -- ----- ----- -- ----
------------ -- ----- ----- -- ---
--
------ - -------------
--- --- - -- -- - ------- ----- -
---- ------- ----------
---- ------ - - ---------------------- - -------
--------
---------
-
--客户端代码：
var source = new EventSource("server.php");
source.onmessage = function(event) {
var data = JSON.parse(event.data);
console.log(data);
};数据双向通信
在服务端更新数据，客户端能够及时收到事件推送。但是如何实现客户端向服务端传递数据呢？这里就需要用到 SSE 的评论机制。在客户端通过 SSE 打开连接，服务端返回一个事件监听器。客户端可以发送账号、密码等数据通过这个监听器，经过服务端验证。客户端可以从服务端获得此连接的 ID，然后维护在一个变量中，之后可以向连接 ID 发送数据。
以下是一个简单的双向通信示例：
服务端代码：
-- -------------------- ---- -------
-----
--------------------- --------------------
---------------------- -----------
-- --------------------------- -- ------ -- -------------------- -
--- - -------------
----- - -----------------
--- - -------------------- -----
----- ------ - ----------- -
---------- ----- - ------------ -------
-- ----- -- ---- -
------------ ------ ------------
-------------
------
-
-
------------
- ---- -
------------------- -------------
--- - ---------
---- - --------------------- -----
---- - -------
--- - -------------------- -----
----------- -------------------
------------
-----------
--------
----- ------ -
------------ ------- ---------
------------ ------ -----------
-------------
-- -------- - ----- -- --- -
------------ ------- ----------
------------ ------ ------------
-------------
------
-
---------
-
--- - -------------------- -----
----- - ---
----- ------ - ----------- -
---------- ------ - ------------ -------
-- ----- -- ---- -
----- - -----
------
-
-
------------
--- - -------------------- -----
----------- --------------------
------------
-
--客户端代码：
-- -------------------- ---- -------
--- ------ - --- --------------------------
--- -- - -----
------------------------------- --------------- -
-- - ------------------
---
------------------------------- --------------- -
--------------------
---
-------------------------------- --------------- -
---------------------
---
-------- ---------- -
-- --- -- ----- -
--- --- - --- -----------------
---------------- ------------- ------
------------------------------------ -------------------------------------
---------------------- - ---------- -
-- --------------- -- - -- ---------- -- ---- -
------------------------------
-
-
-------------- - -- - ----------- -------
-
-总结
以上是使用 SSE 实现 web 端和客户端之间实现数据双向通信的文档及示例代码。通过 SSE 可以非常方便地实现实时性需求的功能，并且 SSE 本身就是基于 HTTP 协议的，比较适合于现有的部署方式。但是 SSE 存在连接数受限、缺少二进制支持等问题，这也是使用 WebSocket 进行双向通信的主要原因。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647060fc968c7c53b0e8101a