Server-sent Events 与 HTTP 长连接的差异与优劣势分析-JavaScript中文网-JavaScript教程资源分享门户

Web应用程序越来越依赖于实时数据交换。传统的实时应用程序的方式是使用定时器轮询服务器的状态，这种方式开销很大，因为它要求服务器的每一次响应需要有一个 HTTP 请求。这就是 HTTP 长连接的诞生背景。然而，近来很多开发者选用 Server-sent Events 来实现实时数据传输，那么 Server-sent Events 与 HTTP 长连接具体的差异和优劣势是什么呢？

HTTP 长连接

工作方式

HTTP 长连接是早期的实时协议。它在建立增量扫描（incremental scan）的基础上，持续不断地保持客户端与服务器之间的连接。与常规的 HTTP 请求不同，HTTP 长连接不会在响应结束后就关闭连接。而是保持连接打开状态，可以进行多次 HTTP 请求-响应通信。下一次请求可以通过该连接在不需要重新建立TCP连接的情况下在同一个socket连接上进行。

长连接的服务器需要客户端连接处于keep-alive状态并设置超时时间。通常，一个持续连接的完成只会由客户端或服务器端发起其中任意一方发起中断tcp连接，则当前连接将被关闭。

优势

减少网络流量和TCP连接配置的数量
可以实现服务器和客户端之间格外频繁的传输数据，不会引起额外的延迟。

劣势

没有私有协议标准。
无法设置超时时间。

Server-Sent Events

工作方式

Server-Sent Events是HTML5提供的一种新型技术，用于服务器与客户端之间的实时信息传递。 SSE通过一个单独的长时间的HTTP连接实现大量的服务器到客户端的消息传递。客户端通过浏览器内置的EventSource对象收到从服务器端发送的事件信息。

优势

允许客户端监听服务器的事件而无需进行轮询。
SSE支持跨域发送信息。
SSE支持事件化数据流传输，通过event属性定义事件类型，信息交互更加方便。

劣势

SSE只支持文本数据的传输。如果需要传输二进制数据，需要进行base64编码或分片传输并重新组合。

总结

HTTP 长连接和 Server-Sent Events 在实时数据传输方面都有自己的优势和劣势。HTTP 长连接更适合于需要频繁传输大量数据的场景，而Server-Sent Events则更适合于低数据传输量的实时数据传输。我们可以根据具体的应用场景选择合适的技术方案。

例如，下面是一个简单的使用 Server-Sent Events 实现的服务器向客户端实时推送消息的示例代码：

// javascriptcn.com 代码示例
// 服务端代码
const http = require('http')
http.createServer((req, res) => {
  res.writeHeader(200, {
    'Content-Type': 'text/event-stream',  // 设置响应头
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  })
  setInterval(() => {
    res.write(`data: ${new Date()}\n\n`)  // 发送消息
  }, 1000)
}).listen(8888)

// 客户端代码
const source = new EventSource('http://localhost:8888')
source.onmessage = function(event) {
  console.log(event.data)  // 接收并输出消息
}

在这个示例中，服务器每隔1秒钟向客户端发送一条消息。客户端接收到消息后，将其输出到控制台。这个示例中使用了 EventSource API，它是用于向浏览器中注册事件源（source）的 JavaScript 接口对象，可以轻松地实现与服务器的实时通信。当你需要实时数据传输时，Server-Sent Events 可能会是一个不错的选择。

结语

通过本文，我们深入分析了 HTTP 长连接和 Server-Sent Events 的差异以及优劣势。合理应用这些技术可以帮助我们更高效地完成实时数据传输，给予我们更多的技术实战经验和指导意义。希望这篇文章对你有所帮助。

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