SSE：实现服务器和客户端的实时双向通信-JavaScript中文网-JavaScript教程资源分享门户

SSE（Server-Sent Events）是一种实现服务器和客户端之间实时双向通信的技术。它可以让服务器主动向客户端推送数据，而不需要客户端发起请求。这种技术在很多场景下都非常有用，比如实时聊天、实时数据更新等。

SSE 的原理

SSE 使用了 HTTP 协议中的长连接技术，也就是说，客户端向服务器发送一个请求后，服务器会一直保持连接，直到有数据可以推送给客户端。这种技术比传统的轮询方式更加高效，因为它避免了客户端不停地向服务器发送请求，从而减少了网络负载和服务器的压力。

SSE 的通信流程如下：

客户端向服务器发送一个 HTTP 请求，请求头中包含了 Accept: text/event-stream，表示客户端希望接收服务器发送的事件流。
服务器接收到请求后，会保持连接，并向客户端发送一个 Content-Type: text/event-stream 的响应头，表示服务器将会发送一个事件流。
服务器可以随时向客户端发送事件，事件的格式如下：
```
event: <event name>
data: <event data>
```
event 表示事件的名称，可以省略。data 表示事件的内容，可以是任意字符串，每个事件之间使用一个空行分隔。
客户端接收到事件后，会自动触发 message 事件，开发者可以通过 JavaScript 监听这个事件，从而处理服务器推送过来的数据。

SSE 的用法

SSE 的用法非常简单，在客户端使用 JavaScript，向服务器发送一个 SSE 请求即可。以下是一个示例代码：

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

source.addEventListener('message', (event) => {
  console.log(event.data);
});

在这个示例中，我们使用 EventSource 对象向 /sse 发送了一个 SSE 请求，然后监听了 message 事件，从而处理服务器推送过来的数据。

在服务器端，我们需要使用一种支持 SSE 的框架或库来实现 SSE 功能。以下是一个使用 Node.js 和 Express 实现 SSE 的示例代码：

// www.javascriptcn.com code example
const express = require('express');
const app = express();

app.get('/sse', (req, res) => {
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

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

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在这个示例中，我们使用 Express 框架创建了一个 HTTP 服务器，监听了 /sse 路径的 SSE 请求。每秒钟，服务器会向客户端发送一个当前时间的事件。

SSE 的优缺点

SSE 的优点主要有：

实时性好：SSE 可以实现服务器和客户端之间的实时通信，比传统的轮询方式更加高效。
简单易用：SSE 的用法非常简单，只需要向服务器发送一个 SSE 请求即可。
可靠性高：SSE 基于 HTTP 协议，具有很好的可靠性和兼容性。

SSE 的缺点主要有：

兼容性差：SSE 不是所有浏览器都支持，需要在服务器端进行一些兼容性处理。
单向通信：SSE 只能实现服务器向客户端的单向通信，如果需要双向通信，需要使用其他技术。

结语

SSE 是一种非常有用的技术，它可以实现服务器和客户端之间的实时双向通信。在实际开发中，我们可以将它应用于实时聊天、实时数据更新等场景。如果你想要了解更多关于 SSE 的知识，可以参考 MDN 文档。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d10395a941bf7134231770

SSE：实现服务器和客户端的实时双向通信

SSE 的原理

SSE 的用法

SSE 的优缺点

结语

接着读