SSE：在浏览器中实现服务器端事件推送-JavaScript中文网-JavaScript教程资源分享门户

SSE：在浏览器中实现服务器端事件推送

在现代的 Web 应用程序中，服务器端事件推送已成为一种常见的实时通信方式。SSE（Server-Sent Events，服务器端事件）是一种轻量级的通信协议，它允许服务器向浏览器客户端发送实时事件，并且不需要客户端发起请求。SSE 基于 HTTP 协议，可以在现代浏览器中轻松实现实时通信。

SSE 原理

SSE 的原理非常简单。浏览器通过向服务器发送 HTTP 请求，请求的资源以 MIME 类型 text/event-stream 返回，这个文本流中包含了服务器端发送的事件信息。服务器可以随时向浏览器发送事件，浏览器收到事件后可以根据事件类型进行相应的处理。

SSE 与 WebSocket 的区别

SSE 与 WebSocket 有一些相似之处，但也有很大的区别。WebSocket 是一种全双工通信协议，可以双向通信，而 SSE 只能从服务器向客户端单向发送事件。另外，WebSocket 连接需要经过握手过程，而 SSE 连接不需要握手。

SSE 的优点

SSE 有很多优点，其中最重要的是它的轻量级和易于使用。SSE 可以轻松地与现有的 Web 应用程序集成，不需要任何额外的软件或硬件。此外，SSE 与 HTTP 协议兼容，可以通过标准的 Web 服务器进行部署。

SSE 的示例代码

下面是一个简单的 SSE 示例代码，演示了如何在浏览器中实现服务器端事件推送：

HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SSE Demo</title>
</head>
<body>
  <h1>SSE Demo</h1>
  <div id="messages"></div>
  <script src="sse.js"></script>
</body>
</html>

JavaScript 代码：

// 创建 SSE 连接
var source = new EventSource('/sse');

// 处理服务器发送的事件
source.onmessage = function(event) {
  var message = JSON.parse(event.data);
  var messagesDiv = document.getElementById('messages');
  messagesDiv.innerHTML += '<p>' + message.text + '</p>';
};

Node.js 代码：

var http = require('http');

// 创建 HTTP 服务器
var server = http.createServer(function(req, res) {
  // 设置响应头
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  // 发送事件
  setInterval(function() {
    var message = {
      text: 'Hello, world!'
    };
    res.write('data: ' + JSON.stringify(message) + '\n\n');
  }, 1000);
});

// 启动服务器
server.listen(3000);

在上面的示例中，我们创建了一个 SSE 连接，并监听服务器发送的事件。每当服务器发送一个事件时，我们将事件的文本内容添加到页面中的消息列表中。在服务器端，我们创建了一个 HTTP 服务器，并使用 setInterval 函数定期发送事件。

总结

SSE 是一种轻量级的通信协议，可以在现代浏览器中实现服务器端事件推送。SSE 与 WebSocket 相似，但也有很大的区别。SSE 的优点是轻量级和易于使用，可以与现有的 Web 应用程序集成。在实现 SSE 时，我们需要创建 SSE 连接，并在服务器端发送事件。

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