【AI落地工程技术】-SSE协议

目录

SSE协议内容

SSE事件格式

使用示例

示例一

客户端（JavaScript）

服务器端（Node.js 示例）

示例二

前端（JavaScript）

后端（Java，使用Spring Boot和Servlet API）

SSE（Server-Sent Events）协议是一种用于服务器主动向客户端推送数据的技术，也称为“事件流”（Event Stream）。它基于HTTP协议，利用长连接特性，在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送。ChatGPT即采用的是SSE协议。

SSE协议内容

1. 协议头：
   • SSE协议返回的是事件流，需要指定内容类型。因此，在HTTP header里需要加上以下信息：
     • Content-Type: text/event-stream
     • Connection: keep-alive
     • Cache-Control: no-cache
2. 协议内容：
   • 协议内容放在HTTP返回的body里，每次返回一个Event信息。
   • 每个Event里可以包含以下5个属性（但并非所有属性都是必需的）：
     • id：用于表示Event的序号，客户端通过序号实现断线重连功能。
     • event：表示自定义事件类型，客户端通过该字段区分不同消息。
     • data：表示返回的业务数据，如果数据很长可以分成多行返回。
     • retry：（可选）注释消息，表示重新连接的时间间隔（单位：毫秒）。
   • 每个属性值占用一行，每行的内容都是由属性名称+属性值组成+换行符，之间用冒号隔开（:）。
   • 两个消息之间用额外的换行符（\n\n）区分。

SSE事件格式

每个SSE事件都以文本形式发送，遵循以下格式：

• 单行注释：以: 开头（例如 : 这是一条注释\n）
• 字段：由字段名、冒号、字段值以及一个换行符组成（例如 data: This is a message\n）
• 事件：通过event字段指定（例如 event: myevent\n）
• ID：通过id字段指定，用于在重新连接时帮助客户端确定错过的消息（例如 id: 123\n）
• 重试：通过retry字段指定在重新连接之前的延迟时间（单位：毫秒）（例如 retry: 2000\n）
• 消息结束：两个换行符（\n\n）表示一个事件的结束和下一个事件的开始

  使用示例

  示例一

  客户端（JavaScript）

  // 创建EventSource对象  
  const eventSource = new EventSource('http://example.com/sse');  
    
  // 监听服务器发送的事件  
  eventSource.onmessage = function(event) {  
      console.log('收到消息:', event.data);  
  };  
    
  // 监听服务器关闭连接的事件  
  eventSource.onclose = function() {  
      console.log('连接已关闭');  
  };  
    
  // 监听服务器错误事件  
  eventSource.onerror = function() {  
      console.log('连接出错');  
  };

  
  服务器端（Node.js 示例）

  const http = require('http');  
    
  const server = http.createServer((req, res) => {  
      if (req.url === '/sse' && req.method === 'GET') {  
          // 设置响应头  
          res.writeHead(200, {  
              'Content-Type': 'text/event-stream',  
              'Connection': 'keep-alive',  
              'Cache-Control': 'no-cache'  
          });  
    
          // 模拟发送数据  
          let count = 0;  
          const interval = setInterval(() => {  
              const eventData = `data: 这是第 ${count++} 条消息\n\n`;  
              res.write(eventData);  
    
              // 假设在发送10条消息后关闭连接  
              if (count > 10) {  
                  clearInterval(interval);  
                  res.end();  
              }  
          }, 1000); // 每秒发送一次  
      }  
  });  
    
  server.listen(8080, () => {  
      console.log('SSE 服务器已启动，监听 8080 端口');  
  });

  在上面的示例中，客户端使用EventSource对象创建一个与服务器端的SSE连接，并监听不同的事件。服务器端则创建一个HTTP服务器，并在接收到特定的GET请求时，通过长连接向客户端发送数据。这个示例模拟了一个简单的SSE服务器，每秒钟向客户端发送一条消息，并在发送了10条消息后关闭连接。
  

  示例二

  前端（JavaScript）

  // 创建EventSource实例并连接到SSE服务  
  var source = new EventSource('/server-sent-events-endpoint');  
    
  // 监听message事件（默认事件类型）  
  source.onmessage = function(event) {  
      console.log('Received data:', event.data);  
  };  
    
  // 监听自定义事件类型  
  source.onmyevent = function(event) {  
      console.log('Received myevent:', event.data);  
  };  
    
  // 监听连接打开事件  
  source.onopen = function(event) {  
      console.log('Connection to server opened.');  
  };  
    
  // 监听连接错误事件  
  source.onerror = function(event) {  
      if (source.readyState === EventSource.CLOSED) {  
          // 连接已关闭，可以尝试重新连接  
          console.log('Connection to server was closed.');  
      }  
  };

  后端（Java，使用Spring Boot和Servlet API）

  在Spring Boot应用中，你可以使用@RestController和@GetMapping来创建一个SSE端点，但更常见的是使用ServletResponse直接发送SSE消息。

  import javax.servlet.ServletException;  
  import javax.servlet.annotation.WebServlet;  
  import javax.servlet.http.HttpServlet;  
  import javax.servlet.http.HttpServletRequest;  
  import javax.servlet.http.HttpServletResponse;  
  import java.io.IOException;  
  import java.io.PrintWriter;  
    
  @WebServlet("/server-sent-events-endpoint")  
  public class SseServlet extends HttpServlet {  
    
      @Override  
      protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {  
          resp.setContentType("text/event-stream");  
          resp.setCharacterEncoding("UTF-8");  
    
          PrintWriter out = resp.getWriter();  
    
          int count = 0;  
          while (true) { // 模拟持续发送事件  
              out.println("data: Event " + (count++) + " at " + System.currentTimeMillis());  
              out.println("event: server-time"); // 可选的事件类型  
              out.println("retry: 1000\n"); // 推荐客户端在断开连接后等待1秒再重连  
    
              // 刷新输出流  
              out.flush();  
    
              // 暂停一段时间再发送下一条消息  
              try {  
                  Thread.sleep(1000);  
              } catch (InterruptedException e) {  
                  e.printStackTrace();  
                  break;  
              }  
          }  
    
          // 注意：在实际应用中，你可能需要一种机制来优雅地关闭连接，而不是使用无限循环  
      }  
  }

  在这个示例中，我们创建了一个Servlet来模拟SSE服务。Servlet响应设置了正确的内容类型和字符编码，并使用PrintWriter发送SSE事件。在实际应用中，你可能会使用一个更复杂的逻辑来控制何时发送消息以及如何优雅