在前端开发中，实现服务器与客户端之间的实时通信是一项重要的任务。传统的轮询机制虽然能够实现实时通信，但是会造成服务器的压力，同时也会延迟消息的传递。而 Server-sent Events 则提供了一种优秀的解决方案，能够实现实时通信，同时也能够减少服务器的压力。
轮询机制
轮询机制是一种比较常见的实现实时通信的方式，其原理是客户端不断地向服务器发送请求，服务器则返回最新的数据。这种方式虽然能够实现实时通信，但是也存在一些问题：
- 延迟：由于客户端需要不断地发送请求，服务器需要不断地返回数据，因此消息的传递会存在一定的延迟。
- 资源浪费：由于客户端需要不断地发送请求，会造成服务器的压力，同时也会占用带宽和资源。
- 可扩展性差：由于客户端需要不断地发送请求，因此在高并发的情况下，服务器的扩展性会受到限制。
Server-sent Events
Server-sent Events 是一种 HTML5 新增的 API，可以通过该 API 实现服务器向客户端实时地发送数据。其原理是客户端通过 EventSource 对象与服务器建立长连接，服务器会不断地向客户端推送最新的数据。这种方式相比轮询机制有以下优点：
- 实时性：由于服务器主动向客户端推送数据，因此消息的传递速度更快，实时性更强。
- 资源节约：由于客户端只需要建立一次连接，服务器只需要维护一个长连接，因此资源的消耗更少。
- 可扩展性强：由于客户端只需要建立一次连接，因此在高并发的情况下，服务器的扩展性更强。
示例代码
以下是一个简单的 Server-sent Events 示例代码：
-- -------------------- ---- -------
-- ----------
----- ----------- - --- --------------------
-- ----------
--------------------------------------- ------- -- -
------------------------
---
-- --------
------------------------------------- ------- -- -
-- ----------------- --- ------------------- -
--------------------
-
---服务器端代码：
-- -------------------- ---- ------- -- -- ------------ - ----------------- ----------------------------- --------------------- -- ----- -------- ------------------------------ ------------ -- ----------- -------------- -- - ---------------- - - --- ------ - -------- -- ------
结论
Server-sent Events 相比轮询机制具有更好的实时性、资源节约和可扩展性，因此在实现实时通信时，应该优先考虑使用 Server-sent Events。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6758ff0d62956301acd42939