什么是 SSE
SSE（Server-Sent Events）是一种基于 HTTP 的服务器推送技术，可以实现服务器向客户端主动推送数据。相对于传统的轮询技术，SSE 可以大幅减少网络流量和服务器压力，同时也能够实时推送数据，提高了用户体验。
多人在线问答系统的需求
在多人在线问答系统中，需要实现以下功能：
- 实时展示其他用户的问题和回答；
- 用户可以提交问题和回答；
- 问题和回答需要实时推送给其他用户。
服务器端实现
服务器端需要实现以下功能：
- 接收用户提交的问题和回答；
- 把问题和回答推送给其他用户。
以下是服务器端的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ---- -
----- ---- - ----------------------------- ---------
------------------ ---------------- --------------
--------------
- ---- -- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- ----
-------------- -- -
----- ---- - ------ ----- ----------------------------------
----------------
-- ------
-
---
------------------- -- -- -
------------------- -- ------- -- ------------------------
---上面的代码中，当用户访问根路径时，服务器会返回一个 HTML 文件。当用户访问 /sse 路径时，服务器会返回一个 SSE 流，并且每隔一秒钟发送一条数据。
客户端实现
客户端需要实现以下功能：
- 连接服务器的 SSE 流；
- 接收服务器推送的数据；
- 把数据展示在页面上；
- 提交问题和回答给服务器。
以下是客户端的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------------
-------
------
-----------------
---- ---------------------
------
------ ----------- --------------- --------------------
------- ---------------------------
-------
---- -------------------
------
------ ----------- ------------- --------------------
------- ---------------------------
-------
--------
----- --------- - -------------------------------------
----- ------- - -----------------------------------
-- -- --- -
----- --- - --- --------------------
------------------------------- ------- -- -
----- ---- - -----------
----- --- - ------------------------------
------------- - -----
---------------------------
---
-- ----
----- ------------ - ------------------
--------------------------------------- ------- -- -
-----------------------
----- -------- - -------------------------------------
----- --- - --- -----------------
---------------- -------------
------------------------------------ --------------------
-------------------------------------
---------------------
---
-- ----
----- ---------- - ------------------
------------------------------------- ------- -- -
-----------------------
----- ------ - ---------------------------------
----- --- - --- -----------------
---------------- -----------
------------------------------------ --------------------
-----------------------------------
-------------------
---
---------
-------
-------上面的代码中，客户端会连接服务器的 /sse 路径，并且监听 message 事件，把接收到的数据展示在页面上。客户端还提供了两个表单，用于提交问题和回答。当用户提交问题和回答时，客户端会向服务器发送 POST 请求。
总结
在本文中，我们介绍了 SSE 技术，并利用 SSE 实现了一个多人在线问答系统。通过阅读本文，读者可以学习到 SSE 的原理和应用，并且可以根据示例代码实现一个实时推送数据的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655cbf43d2f5e1655d7002f5