Server-Sent Events (SSE) 是一种用于向客户端发送实时数据的技术，常常被用于 Web 应用程序中实现实时通信。SSE 与 WebSocket 相似，但是更加轻量级，而且不需要建立双向连接。SSE 通过 HTTP 协议的长连接向客户端发送数据，数据格式为简单的文本。
sse.js 是一个 Node.js 的 npm 包，它可以方便地帮助我们在前端应用程序中使用 SSE 技术来实现实时通信。本文将详细介绍 sse.js 的使用教程。
安装 sse.js
使用 npm 包管理器可以方便地安装 sse.js：
npm install sse.js
安装完成后，我们就可以在自己的 Node.js 应用程序中使用 sse.js 了。
示例代码
为了让读者更好地理解 sse.js 的使用，我们将介绍一个基于 sse.js 的简单聊天室应用程序。
服务器端代码
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - ------------------
----- ------ - --------------------------- --------- -- -
----------------------- -
--------------- ----------- ---------------
---
--------------
--------- -----
------
------
----- ----------------
------------------
-------
------
------------
---- --------------------
----- ------------------
------ ----------- ------------------ --
-------------------
-------
--------
----- ------ - --- --------------------
---------------- - --------------- -
----- ------- - -----------------------
----- ---- - ----------------------------
----- ---- - ------------------------------------ - -- - - --------------
-----------------------
----- ------------ - ------------------------------------
-------------------------------
--
----- ---- - ----------------------------------------
------------- - --------------- -
-----------------------
----- ----- - -----------------------------------------
----- ---- - -------------------
----------- - ---
----- --- - --- -----------------
---------------- ------------
------------------------- ----- ---- ----
--
---------
-------
-------
---
---
----- ------------- - ------
-------------------- --------- --------- -- -
-- ------------ --- ------- -
--------------------------- ----------
- ---- -- ------------ --- ----------- -
------------------ ------ -- -
----- ------- - -----------------
------------ - -----------------------------
----------------------------
---
---------------
- ---- -
------------------------
---------------
-
---
------------------- -- -- -
------------------- -- --------- -- ---- -------
---上面的代码创建了一个 HTTP 服务器，并监听 3000 端口。当客户端请求根路径时，服务器会返回一个包含聊天室界面的 HTML 页面；当客户端请求 /sse 路径时，服务器会创建一个 sse.js 流对象并将其初始化；当客户端向 /message 路径发起 POST 请求时，服务器会将消息发布给 sse.js 流对象对应的客户端。
客户端代码
客户端代码几乎都在 HTML 页面里，它使用 EventSource 对象订阅服务器端的 sse.js 流，并使用 XMLHttpRequest 对象向服务器端发送聊天消息。
使用 sse.js 的关键代码
-- -------------------- ---- -------
----- ------------- - ------
-------------------- --------- --------- -- -
-- ------------ --- ------- -
--------------------------- ----------
- ---- -- ------------ --- ----------- -
------------------ ------ -- -
----- ------- - -----------------
------------ - -----------------------------
----------------------------
---
---------------
- ---- -
------------------------
---------------
-
---上面的代码创建了一个 sse.js 流对象并将其绑定在 HTTP 服务器上。当客户端请求 /sse 路径时，服务器会将该请求初始化为一个 sse.js 流连接；当客户端向 /message 路径发起 POST 请求时，服务器会将消息发布给 sse.js 流对象对应的客户端。
使用 sse.js 时的注意事项
- 在使用 sse.js 进行实时通信时，服务器端应该开启长连接，以便能够实时地向客户端发送数据。
- sse.js 不支持像 WebSocket 一样双向通信，只能从服务器端向客户端发送数据。
- 与 WebSocket 不同，sse.js 使用的是 HTTP 协议，因此不能发送二进制数据。
结论
在本文中，我们介绍了 npm 包 sse.js 的使用教程，并通过一个简单的聊天室应用程序让读者更好地理解 sse.js 的使用。虽然 sse.js 的功能比较简单，但是它可以方便地帮助我们实现前端实时通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedab0cb5cbfe1ea061063c