随着互联网的发展，实时通信变得越来越重要，前端开发人员需要掌握各种方法来实现实时通信，其中 Server-sent Events 和 Ajax 是两种常用的技术。
Server-sent Events
Server-sent Events（简称 SSE）是一种浏览器与服务器之间的单向通信方式，它允许服务器向客户端推送数据，而不需要客户端不断地向服务器发起请求。SSE 使用了标准的 HTTP 协议，属于 HTML5 API 的一部分。SSE 可以被用来实现服务器向客户端的实时通信，对于在线游戏、聊天室等实时交互性高的应用非常有用。
SSE 的优点
- 实时性：能够在服务器端数据发生变化的同时，实时地将数据推送到浏览器端。
- 简单易用：与其他实时通信方式相比，SSE 的开发和实现相对简单，只需要使用浏览器中已经内置的 API 即可。
- 跨域支持：由于它使用了标准的 HTTP 协议，因此 SSE 可以跨域使用。
SSE 的实现方法
以下是一个 SSE 实现的示例代码：
-- -------------------- ---- -------
-- --------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- ----- -------------------------------
-- ------
----------------
-- -------
----- ------ - --- -------------------------------------
---------------------------------- ------- -- -
------------------------
---在服务器端，我们需要创建一个 HTTP 服务器，并在客户端请求时返回一个带有必要的头部信息的响应。在每次请求时，服务器会向浏览器推送一条包含时间戳的消息。
在客户端，我们可以使用 EventSource API 连接到服务器，并在服务器推送消息时触发 message 事件来接收数据。值得注意的是，SSE 接收的数据是文本格式，而不是 JSON 格式。在使用 SSE 时，需要设置响应类型为 text/event-stream。
Ajax 实时通信
除了 SSE，我们也可以使用 Ajax 技术进行实时通信。Ajax 可以使用长轮询（Long Polling）和短轮询（Short Polling）两种方式。
长轮询
长轮询指的是浏览器向服务器发出请求，服务器一旦有数据更新就立刻响应，如果没有数据更新，服务器将暂时不响应请求，直到有更新的数据才会回复。长轮询实际上是一种模拟 SSE 的实现方式，它的原理是通过不断地向服务器发送请求，将服务器当作消息队列来使用。
长轮询的优点在于实时性比较高，且兼容性良好，但是它也存在着一些缺点，比如占用服务器资源，需要很多的 HTTP 请求等。
以下是一个长轮询的实现示例代码：
-- -------------------- ---- -------
-- -------
-------- ------------- -
--------
---- ---------------
----- ------
------ -----
------ ------
-------- -------------- -
------------------
--
--------- ------------- --- -
-- --- --- ---------- -
--------------
- ---- -
----------------------- ---
-
--
-------- -----
---
-在这个例子中，我们使用 jQuery 的 ajax 方法来进行长轮询，timeout 属性用于设置超时时间，在超时时重新发起请求。
短轮询
短轮询指的是浏览器不断地向服务器发送请求，来获取服务器的更新数据。短轮询的实现较为简单，但是它存在一些明显的缺点，比如频繁的请求可能导致服务器压力增大，同时也会消耗用户的流量。
以下是一个短轮询的实现示例代码：
-- -------------------- ---- -------
-- -------
-------- -------------- -
--------
---- ---------------
----- ------
------ -----
------ ------
-------- -------------- -
------------------
--
--------- ------------- --- -
------------------------ ------
-
---
-总结
在实时通信中，Server-sent Events 和 Ajax 是两种常见且优秀的解决方案。SSE 相对于短轮询和长轮询而言，具有更好的兼容性、更低的服务器开销和更好的实时性。而 Ajax 可以通过长轮询和短轮询的方式实现实时通信，流量和服务器开销相对较大。开发人员应根据具体场景和需求，选择合适的实时通信方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b4800cadd4f0e0ffd6a7dd