引言
前端技术的发展不仅推动了 web 应用的飞速发展，也让 web 应用的前后端交互逐渐变得更加复杂和多样化。在前端通信中，我们经常会使用 Server-Sent Events 和 WebSockets 这两种常见的技术，来实现高效、实时、双向的数据交互能力。但这两种技术本质不同，各有优缺点，且分别适用于不同的场景。那么，如何在不同的场景下选择合适的通信方式，也是我们前端工程师需要认真思考的问题。
Server-Sent Events
Server-Sent Events (简称 SSE) 是一种基于 HTTP 协议的单向通信技术，通过浏览器向服务器发送请求，建立一次持久的连接，然后服务器会周期性的向浏览器推送数据，如下图所示：
相较于传统的轮询和长轮询(refresh)技术，SSE 可以更低延迟和更高性能的传输数据。它的实现方式也很简单，只需要在服务器上通过 EventSource 对象实现即可。具体示例代码如下：
----- ------ - --- ----------------------- ---------------- - -------- ------- - -------------------------- ----------- - -------------- - -------- ------- - --------------------- ------ -
需要注意的是，SSE 除了一些现代浏览器之外，还需要另外实现一些 polyfill 机制，以便使更多的浏览器支持 SSE 的技术。
WebSockets
相较于 SSE，WebSockets 是一种建立双向连接的通信技术，可以支持服务器和浏览器之间的实时通信。通过 WebSocket 对象，在建立连接后，双方可以随时发送和接收数据，如下图所示：
WebSockets 可以实现完全实时和低延迟的数据传输，适用于需要快速响应的应用场景，如游戏、在线聊天室等。例如下面示例代码，示范如何在前端使用 WebSockets：
----- ------ - --- -------------------------------- ------------- - -------- ------- - ------------------ --------- - ---------------- - -------- ------- - -------------------------- ----------- - -------------- - -------- ------- - --------------------- ------ - -------------- - -------- ------- - ---------------------- ------ -
这是一种全新的实时数据交互技术，但需要注意到的是，相较于 SSE 和传统的 HTTP 请求，WebSocket 技术的实现和运维也更加复杂和精细，具体实现和考虑的问题比较多。
总结
综合以上所述，我们可以得到如下的总结：
- Server-Sent Events 适用于轻量级的数据推送业务场景，如新闻、交易等。
- WebSockets 适用于需要高实时性、低延迟和即时响应的应用场景，例如游戏、在线聊天室等。
- 选择通信技术的时候，我们需要考虑到业务场景、技术成本、通信效率等因素，尽可能选择最适合自己的技术实现。
- 在实际开发中，我们可以根据实际的业务场景和需求，选择代码库或者封装自己的实现代码，以提高开发效率和代码质量。
到这里，我们对于 Server-Sent Events 和 WebSockets 这两种前端通信方式有了更深入的认识和理解。在开发应用的时候，我们应该好好考虑这两种方式在不同场景下的优点和限制，明确选型确定合适的技术实现。希望这篇文章给前端工程师带来了一些思考和借鉴的价值。
示例代码
示例代码可以在我的 Github 仓库中查看: Server-Sent-Events-VS-Websockets。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6528cc8d7d4982a6ebb5aa34