Server-Sent Events VS WebSockets: 前端通信选择问题探讨-JavaScript中文网-JavaScript教程资源分享门户

引言

前端技术的发展不仅推动了 web 应用的飞速发展，也让 web 应用的前后端交互逐渐变得更加复杂和多样化。在前端通信中，我们经常会使用 Server-Sent Events 和 WebSockets 这两种常见的技术，来实现高效、实时、双向的数据交互能力。但这两种技术本质不同，各有优缺点，且分别适用于不同的场景。那么，如何在不同的场景下选择合适的通信方式，也是我们前端工程师需要认真思考的问题。

Server-Sent Events

Server-Sent Events (简称 SSE) 是一种基于 HTTP 协议的单向通信技术，通过浏览器向服务器发送请求，建立一次持久的连接，然后服务器会周期性的向浏览器推送数据，如下图所示：

相较于传统的轮询和长轮询(refresh)技术，SSE 可以更低延迟和更高性能的传输数据。它的实现方式也很简单，只需要在服务器上通过 EventSource 对象实现即可。具体示例代码如下：

// javascriptcn.com 代码示例
const source = new EventSource('/api/sse')

source.onmessage = function (event) {
  console.log('event.data:', event.data)
}

source.onerror = function (event) {
  console.log('error:', event)
}

需要注意的是，SSE 除了一些现代浏览器之外，还需要另外实现一些 polyfill 机制，以便使更多的浏览器支持 SSE 的技术。

WebSockets

相较于 SSE，WebSockets 是一种建立双向连接的通信技术，可以支持服务器和浏览器之间的实时通信。通过 WebSocket 对象，在建立连接后，双方可以随时发送和接收数据，如下图所示：

WebSockets 可以实现完全实时和低延迟的数据传输，适用于需要快速响应的应用场景，如游戏、在线聊天室等。例如下面示例代码，示范如何在前端使用 WebSockets：

// javascriptcn.com 代码示例
const socket = new Websocket('ws://127.0.0.1:8080')

socket.onopen = function (event) {
  socket.send('hello server.')
}

socket.onmessage = function (event) {
  console.log('event.data:', event.data)
}

socket.onerror = function (event) {
  console.log('error:', event)
}

socket.onclose = function (event) {
  console.log('closed:', event)
}

这是一种全新的实时数据交互技术，但需要注意到的是，相较于 SSE 和传统的 HTTP 请求，WebSocket 技术的实现和运维也更加复杂和精细，具体实现和考虑的问题比较多。

总结

综合以上所述，我们可以得到如下的总结：

Server-Sent Events 适用于轻量级的数据推送业务场景，如新闻、交易等。
WebSockets 适用于需要高实时性、低延迟和即时响应的应用场景，例如游戏、在线聊天室等。
选择通信技术的时候，我们需要考虑到业务场景、技术成本、通信效率等因素，尽可能选择最适合自己的技术实现。
在实际开发中，我们可以根据实际的业务场景和需求，选择代码库或者封装自己的实现代码，以提高开发效率和代码质量。

到这里，我们对于 Server-Sent Events 和 WebSockets 这两种前端通信方式有了更深入的认识和理解。在开发应用的时候，我们应该好好考虑这两种方式在不同场景下的优点和限制，明确选型确定合适的技术实现。希望这篇文章给前端工程师带来了一些思考和借鉴的价值。

示例代码

示例代码可以在我的 Github 仓库中查看: Server-Sent-Events-VS-Websockets。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6528cc8d7d4982a6ebb5aa34