随着互联网的普及，预约服务已经成为像餐厅预订、医院挂号等日常生活中不可或缺的服务。然而，预约服务并不是一件容易实现的事情。在传统的前后端架构中，需要通过定时发送请求来检查预约情况，这样的实现方案既繁琐又浪费服务器资源。而 Server-sent Events 技术的出现，为解决这一难题提供了一种简单而高效的解决方案。
什么是 Server-sent Events？
Server-sent Events 是一种支持浏览器与服务器之间持续通信的技术。它利用了 HTTP 协议的长链接特性，使得服务器可以随时将更新信息发送给客户端，从而实现实时更新的效果。
在 Server-sent Events 的流程中，客户端会向服务器发送一个 HTTP 请求，并将请求头设置为 text/event-stream 。服务器接收到请求后，会以流的形式不断向客户端发送消息。在客户端中，通过 JavaScript 监听服务器发送来的消息，即可实现实时更新的功能。
Server-sent Events 的优缺点
优点
- 简单易用：在浏览器中，使用 SSE 只需要在 JavaScript 中添加一个简单的 EventSource 对象即可。
- 高效节省开销：由于 SSE 使用长链接，相比长轮询这种频繁请求的方式，能够极大减少无用的请求和服务器资源开销。
- 可靠性高：由于 SSE 基于 HTTP/2 协议，且遵循零错误响应原则，因此具有相对较高的可靠性。
缺点
- 兼容性问题：虽然 SSE 是一种现代浏览器都支持的技术，但在一些浏览器（如 IE）上仍存在一定的兼容性问题。
- 容易被攻击：由于 SSE 是长链接，一旦连接被建立，攻击者便有可能通过占用连接等方式攻击服务器。
如何使用 Server-sent Events？
下面是一个使用 Node.js 和 SSE 技术实现的简单的预约系统实例。
服务器端代码
-- -------------------- ---- -------
----- ---- - ---------------
----- -- - -------------
----- ---- - ----
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- ------------
------------------------------ ---
--
------------------------- ----- ----- -- -
-- ----- -
---------------------------
- ---- -
--------------
-
--
--
------------------- -- -- -
------------------- ------- -- ---- ---------
--
-- -- --- --
-------------------- ----- ---- -- -
-- -------- --- ----------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
------------------------------ ---
--
----------------- --------------
---------------- -----------
-- ---------- -- ---- ------- ------
-------------- -- -
--- ------- - ------------------------ - -----
--- ---- - ---- -----------------------------
--- ---- - ------ --------------------- -----------------------
----------------
-- -----
-
--客户端代码
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------------
-------
------
-------------
---- ------------------
--------
--- ------ - --- ---------------------------------------------
------------------------------------ - -- -
--------------------
---
---------------- - - -- -
--- ---- - -------------------
--- ------- - ----------------------------------
----------------- - --------------------------------------------- - ------------------
--
---------
-------
-------运行代码后，在浏览器中打开 http://localhost:3000 ，即可看到每 5 秒钟会生成随机数并在页面中显示。
总结
Server-sent Events 技术可以帮助我们更高效地解决一些实时通信的问题。它与 WebSocket 相比，具有更加简单、易用和高效节省开销的特点。但同时，也需要注意 SSE 的兼容性、不安全因素等问题，保证 SSE 在实际使用中的可靠性和安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645866ba968c7c53b0ac8853