Server-sent Events 基础完全指南教程-JavaScript中文网-JavaScript教程资源分享门户

Server-sent Events (SSE) 是一种用于在 Web 浏览器中实现服务器推送事件的技术。与传统的轮询和长轮询技术相比，SSE 具有更高的效率和更低的延迟。本文将深入介绍 SSE 的基础知识，包括 SSE 的工作原理、如何在前端中使用 SSE，以及一些常见的应用场景。

SSE 的工作原理

SSE 是基于 HTTP 协议的一种技术，它使用了 HTTP 的长连接机制，也就是说，服务器和客户端之间的连接会一直保持着，直到服务器发送一个关闭连接的信号。在这个过程中，服务器可以不断地向客户端发送数据，而客户端也可以不断地接收数据，从而实现了服务器推送事件的功能。

SSE 的数据格式是纯文本，它使用了一种类似于 JSON 的格式来传递数据。每一条数据都包含了一个事件类型、一个数据字段和一个可选的 ID 字段，例如：

event: message
data: Hello, world!
id: 123

其中，event 表示事件类型，data 表示数据字段，id 表示 ID 字段。在客户端接收到这条数据后，可以根据事件类型来判断这条数据的用途，并根据数据字段来进行相应的处理。ID 字段则用于保证数据的顺序性和唯一性。

在前端中使用 SSE

在前端中使用 SSE 非常简单，只需要使用 JavaScript 中的 EventSource 对象即可。EventSource 对象的用法与 WebSocket 对象类似，它可以接收一个 URL 参数，用于指定服务器端的 SSE 接口地址。例如：

const source = new EventSource('/sse');

在这个例子中，我们创建了一个 EventSource 对象，并将其连接到了 /sse 接口。此时，客户端就会向服务器发送一个 HTTP 请求，请求的方法为 GET，请求头中包含了一个 Accept 参数，用于指定客户端可以接受的数据格式为 text/event-stream。服务器在接收到这个请求后，会将连接保持住，并不断地向客户端发送数据，直到客户端关闭连接或服务器发送一个关闭连接的信号。

在客户端接收到数据后，可以使用 onmessage 事件来进行相应的处理。例如：

source.onmessage = function(event) {
  console.log(event.data);
};

在这个例子中，我们使用了 onmessage 事件来监听 EventSource 对象接收到数据的事件，并将接收到的数据输出到控制台中。

常见的应用场景

SSE 可以应用于很多场景，例如实时更新、聊天室、通知系统等。下面是一个简单的实时更新的例子，通过它可以更好地理解 SSE 的应用。

假设我们有一个在线的投票系统，用户可以在上面参与投票。当有新的投票结果时，我们希望客户端能够实时更新显示出来。这个功能可以通过 SSE 来实现，具体的代码如下：

// javascriptcn.com 代码示例
// 服务器端代码
const http = require('http');

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

  setInterval(function() {
    const data = {
      vote1: Math.floor(Math.random() * 100),
      vote2: Math.floor(Math.random() * 100),
      vote3: Math.floor(Math.random() * 100)
    };

    res.write(`event: update\ndata: ${JSON.stringify(data)}\n\n`);
  }, 1000);
});

server.listen(3000);

// 客户端代码
const source = new EventSource('/sse');

source.addEventListener('update', function(event) {
  const data = JSON.parse(event.data);
  document.getElementById('vote1').innerText = data.vote1;
  document.getElementById('vote2').innerText = data.vote2;
  document.getElementById('vote3').innerText = data.vote3;
});

在这个例子中，我们创建了一个 HTTP 服务器，并将其监听在 3000 端口上。当客户端连接到 /sse 接口时，服务器会不断地向客户端发送数据，每秒钟发送一次。这个数据包含了三个投票结果，分别是 vote1、vote2 和 vote3。在客户端接收到数据后，我们使用 update 事件来进行相应的处理，并将投票结果更新到页面上。

总结

SSE 是一种非常有用的技术，它可以用于实现服务器推送事件的功能，从而提高 Web 应用的效率和用户体验。本文介绍了 SSE 的工作原理、在前端中使用 SSE 的方法以及一些常见的应用场景。希望本文能够对大家学习和使用 SSE 有所帮助。

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