×

HTTP 协议中的服务器发送事件(SSE)

Falcon 2024-09-06 views:
摘要

正在生成中……

HTTP协议中的SSE(Server-Sent Events)是一种允许服务器主动向客户端发送消息的技术。与传统的HTTP请求-响应模式不同,SSE允许服务器在客户端请求之后,继续向客户端推送消息,而无需客户端再次发起请求。

SSE的主要特点包括:

单向通信:SSE主要用于服务器向客户端推送消息,而不是客户端向服务器发送消息。

持久连接:一旦客户端与服务器建立了SSE连接,这个连接就会保持打开状态,直到客户端或服务器决定关闭它。

基于标准HTTP协议:SSE使用标准的HTTP协议,因此它可以很容易地集成到现有的Web应用中。

事件驱动:SSE允许服务器发送事件消息,客户端可以监听这些事件并相应地做出反应。

易于实现:大多数现代浏览器都支持SSE,因此开发者可以很容易地在Web应用中实现这一功能。

SSE的使用场景包括:

实时通知:例如,股票价格更新、新闻订阅等。 聊天应用:实时消息传递。 进度条更新:例如,文件上传进度。 SSE的基本用法是,客户端通过HTTP请求订阅服务器上的某个事件源,服务器响应这个请求并保持连接打开,然后可以在任何时候发送消息到客户端。客户端接收到消息后,可以解析这些消息并更新页面内容。

这里是一个简单的SSE示例:

服务器端(Node.js):

const http = require('http');

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

  const intervalId = setInterval(() => {
    res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
  }, 1000);

  req.on('close', () => {
    clearInterval(intervalId);
  });
}).listen(8080);

客户端(HTML):

<!DOCTYPE html>
<html>
<head>
  <title>SSE Example</title>
</head>
<body>
  <h1>Server-Sent Events</h1>
  <div id="events"></div>

  <script>
    const eventSource = new EventSource('/sse');
    eventSource.onmessage = function(event) {
      const newElement = document.createElement('div');
      newElement.textContent = 'Message: ' + event.data;
      document.getElementById('events').appendChild(newElement);
    };
  </script>
</body>
</html>

在这个例子中,服务器每隔一秒向客户端发送当前的时间,客户端接收到消息后将其显示在页面上。

本文收录于