在现代的网站和应用程序中，实时反馈系统已经成为了一个必不可少的元素。实时反馈系统可以帮助用户更加直观地感受到自己的操作，从而对系统有更深入的理解和控制。而在前端开发中，使用 Server-sent Events 技术可以非常方便地实现实时反馈系统。
什么是 Server-sent Events
Server-sent Events（SSE）是一种 HTML5 的 Web API，用于在客户端和服务器之间建立一个单向持久连接，服务器可以通过该连接向客户端发送任意数量的事件。这个连接不同于传统的 AJAX 请求，它是由浏览器维护的，不会产生过多的网络流量和开销。客户端只需要注册一个处理程序，就可以监听服务器发送的事件。使用 SSE 技术可以实现即时通讯、实时更新、消息推送等一系列功能。
实现实时反馈系统
假设我们有一个在线投票系统，用户可以在网页上投票。当有新的投票时，我们希望能够实时将投票结果反馈给所有的用户，而不需要他们手动刷新页面。下面是实现这个功能的步骤：
- 在服务器端，我们需要为 SSE 连接建立一个新的路由，例如
/sse； - 当用户发起 SSE 连接请求时，服务器需要返回对应的响应，响应头
Content-Type设置为text/event-stream； - 为每个 SSE 连接创建一个独立的事件流，并将其发送给客户端；
- 当有新的投票时，服务器将数据推送给所有已经建立的 SSE 连接。
服务器端代码
-- -------------------- ---- -------
----- ---- - ----------------
--- --------- - --
--- ------- - --- ------
----- ------ - ----------------------- ---- -- -
-- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-----------------
--------------- -- -- -
--------------------
---
- ---- -- -------- --- -------- -
------------
---------------------- -- -
-------------------- ---------
------------------- -------------------
---
-------------------
------------------------------
- ---- -
-------------------
----------
-
---
------------------- -- -- -
------------------- -- ----------
---以上代码使用 Node.js 作为服务器，当客户端请求 /sse 路径时，服务器返回一个 text/event-stream 类型的响应，并建立一个 SSE 连接。同时，将响应对象存储到 clients 集合中，以便后续向所有客户端发送数据。当客户端请求 /vote 路径时，服务器增加投票数，然后向所有客户端广播一个 vote 事件，并将投票数发送给客户端。在客户端，我们需要使用 EventSource 对象来监听服务器发送的事件。
客户端代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- --------------
--------
----- ----------- - --- --------------------
--------------------- - --------------- -
----- ------ - ----------------------------------
------------------ - -----------
--
---------
-------
------
------------ -----------
---------- ------ ----- ------------------------
------- -----------------------
--------
----- ---------- - --------------------------------
------------------ - ----- ---------- -
----- -------- - ----- -------------- - ------- ------ ---
----- ------ - ----- ----------------
--------------------
--
---------
-------
-------以上代码创建一个 SSE 连接对象 eventSource，并在其 onmessage 处理函数中更新网页上的投票结果。同时，我们在网页上放置了一个投票按钮，当用户点击该按钮时，客户端向服务器发送一个 POST 请求，服务器收到请求后，增加投票数量并发送 SSE 事件。
进一步学习
本文中介绍了使用 Server-sent Events 实现实时反馈系统的基本流程，但是还有很多细节需要学习和掌握。如果想深入学习 SSE 技术，建议参考以下资源：
结语
Server-sent Events 技术是一种非常方便的实现实时反馈系统的方法，它在现代的前端开发中已经得到了广泛应用。本文介绍了使用 SSE 技术实现实时投票系统的全过程，并提供了完整的代码示例。希望本文能对你了解 SSE 技术和实现实时反馈系统有所帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67815bbc935627c900ba3756