在 Web 开发中，我们常常需要与服务器进行实时交互，显示动态页面内容、接收事件通知、聊天等等。这时候，长连接和短连接就是两种不同的通信方式。本文将会介绍 SSE 长连接和短连接的区别，以及它们的有效应用和实例代码。
长连接和短连接
短连接
短连接是一种基于 HTTP 协议的通信方式，它的特点是请求一次就返回一次，之后连接就会关闭，这种方式也被称作“轮询”技术。它的优点是简单易懂、易于实现。缺点是每次请求会产生 HTTP 请求头，建立连接和断开连接的时间开销比较大，如果频繁请求，会带来服务器负担大、造成通信瓶颈等问题。
长连接
长连接是一种基于 HTTP 协议的通信方式，它的特点是建立一次连接后，服务器会保持连接，不会立即返回结果，而是等待后续事件的发生，此时客户端不会关闭请求。这种方式不是通过轮询实现的，而是使用特殊的协议和 API，例如，SSE(Server-Sent Events)和 WebSocket。它的优点是节省通信开销，减少了对服务器的压力和通信瓶颈，对于实时性较高的应用，长连接是一种更为适合的通信技术。
SSE 应用
SSE 简介
SSE(Server-Sent Events) 是一种基于 HTTP 的长连接技术，是 HTML5 规范的一部分，基于服务器发送 DOM 事件的机制，优点是前端实现简单，兼容性好，不需要安装插件等额外工具，性能也比较不错。
简单的说，SSE 技术就是让前端在打开页面的时候，建立一个长连接，而服务端可以随时推送消息到前端（相当于触发一次事件），这些消息会被封装为一个文本流，前端监听文本流，解析出消息进行处理。
SSE 示例
下面是一个简单的 SSE 示例代码：
服务器端代码：
--- ---- - --- -------
--- ---------------- - --------------
---------------- ---- -- ------- --------
----------------
---------------- ---- -- ------- --------
----------------
---------------- ---- -- ------- --------
----------------------
--------
--------
-
------------------------------------
-------------------
--------------- -------------------- ----------
---------------- -----------
------------- ------------
---
----------------------
--------------------
------------------ ---------
---客户端代码：
--- ------ - --- -------------------------------- ---------------- - ---------------- ------------------------ -
上面的示例中，服务端会每 2 秒向前端推送一条消息，前端通过 EventSource 对象对服务器端返回的数据进行监听，并在数据发生改变时做相应的处理，这相当于 SSE 的实现方式。
到此，我们已经成功的实现了 SSE 的通信，也让客户端和服务器端实现了 "实时" 同步。
总结
本文主要介绍了 SSE 长连接和轮询的区别，以及基于 SSE 技术的前后端实现。相对于轮询，SSE 在性能、易用性等方面做了很大的优化，能够更好的满足诸如即时新闻、股票行情、金融市场行情更新等实时性要求高的应用场景。作为前端开发工程师，应该熟练掌握 SSE 技术的实现，并且在项目开发过程中充分考虑其优点和适用范围，选择合适的通信技术进行开发和测试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/665534a2d3423812e49b4d0d