Server-Sent Events 学习

发布时间：2024年01月24日

????????SSE（Server-Sent Events，服务器发送事件）是一种用于实现服务器端向客户端实时推送数据的技术。它允许服务器端发送任意数量的事件到客户端，而客户端可以通过EventSource API来订阅这些事件流。以下是关于SSE的相关概念：

1. 特点：

  • SSE是一种基于HTTP的技术，它利用HTTP协议的长连接特性，允许服务器端向客户端推送事件数据。
  • 服务器端通过发送带有特殊MIME类型的事件流（text/event-stream）的HTTP响应来实现SSE。
  • 客户端使用EventSource API来订阅服务器端的事件流，并在接收到事件时执行相应的操作。

2. 使用：

  • 服务器端：在服务器端，通过设置HTTP响应的Content-Type为text/event-stream，并在连接上发送格式良好的事件流来实现SSE。通常使用后端语言（如Node.js、Java、Python等）来实现。 
    //Node.js

const http = require('http');

http.createServer(function(req, res) {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  setInterval(function() {
    const randomNum = Math.floor(Math.random() * 100);
    res.write(`data: ${randomNum}\n\n`);
  }, 1000);
}).listen(3000);
  • 客户端：在客户端，使用JavaScript中的EventSource API来创建一个与服务器端的SSE连接，然后监听接收到的事件并进行相应的处理。 
    //HTML/javaScript

<!DOCTYPE html>
<html>
<head>
  <title>EventSource Example</title>
</head>
<body>
  <div id="randomNumber"></div>

  <script>
    const eventSource = new EventSource('http://localhost:3000');

    eventSource.onopen = function(event) {
      document.getElementById('randomNumber').innerText = 'Random Number: ' + event.data;
    };

    eventSource.onmessage = function(event) {
        
    };

    eventSource.onerror = function(event) {

    };

    eventSource.onclose();

  </script>
</body>
</html>

3. 注意事项：

  • SSE是单向通信，只能由服务器端向客户端发送事件，无法实现客户端向服务器端的双向通信。
  • 在使用SSE时，需要注意浏览器对并发连接数的限制。一般来说，浏览器对同一域名下的并发连接数有限制，需要合理使用连接。
  • SSE与WebSocket相比，SSE更适合用于服务器向客户端的单向通知和实时更新，而WebSocket更适合用于双向通信和实时交互。
  • 保证数据的完整性 ：客户端在每次接收到消息时，会把消息的id 字段作为内部属性 Last-Event-ID储存起来。SSE默认支持断线重连机制，在连接断开时会 触发EventSource的error事件，同时自动重连。再次连接成功时 EventSource会把Last-Event-ID属性作为请求头发送给服务器，这样服务器就可以根据这个Last-Event-ID作出相应的处理。这里需要注意??的是，id字段不是必须的，服务器有可能不会在消息中带上id字段，这样子客户端就不会存在Last-Event-ID这个属性。所以为了保证数据可靠，我们需要在每条消息上带上id字段。

4.参考与推荐：

?SSE 的get 和 post实现 - hello-*-world - 博客园 (cnblogs.com)

文章来源:https://blog.csdn.net/qq_44327851/article/details/135156680
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章