什么是 Server-Sent Events
Server-Sent Events（简称 SSE）是一种浏览器和服务器之间实时通信的技术。它允许服务器发送事件流（event stream）到客户端，客户端通过 EventSource API 接收这些事件流并处理它们。SSE 的优点在于它使用 HTTP 协议，因此不需要像 WebSocket 一样建立一个全双工的连接，而且 SSE 可以使用服务端推送技术，即服务器可以在没有客户端请求的情况下发送事件流。
SSE 与 WebSocket 类似，但是相比 WebSocket，SSE 更加轻量级，且不需要额外的协议握手过程，因此更容易实现。
如何使用 SSE 实现格子聚合应用
在本文中，我们将使用 SSE 实现一个格子聚合应用。这个应用会将一些格子的状态显示在网页上，并且当有格子状态发生变化时，网页会实时更新。
1. 服务端代码
首先，我们需要编写一个服务端代码来发送事件流。在这个例子中，我们使用 Node.js + Express 来实现。我们先创建一个 Express 应用，并启用 SSE：
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/events', (req, res) => {
res.set({
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
res.flushHeaders();
// TODO: send events
});在上面的代码中，我们创建了一个 /events 路由，并设置了响应头，使其成为 SSE 响应。然后我们要在这个路由中发送事件流，下面我们将详细介绍如何发送事件流。
在实际情况中，我们需要从数据库或者其他数据源中获取格子的状态，并将这些状态转换为事件流发送给客户端。以下是一个简单的示例代码，它每隔 1 秒发送一个事件，事件的数据是一个随机的数字：
app.get('/events', (req, res) => {
res.set({
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
res.flushHeaders();
setInterval(() => {
const data = Math.floor(Math.random() * 100);
res.write(`data: ${data}\n\n`);
}, 1000);
});在上面的代码中，我们使用了 setInterval 函数每隔 1 秒发送一个事件。事件的数据是一个随机的数字，我们使用 res.write 函数将事件发送给客户端。
2. 客户端代码
接下来，我们需要编写客户端代码来接收事件流，并将事件流中的数据显示在网页上。我们可以使用 EventSource API 来接收事件流，以下是一个简单的示例代码：
const eventSource = new EventSource('/events');
eventSource.onmessage = (event) => {
const data = event.data;
// TODO: update UI with data
};在上面的代码中，我们使用 new EventSource 函数创建了一个 EventSource 对象，并指定了事件流的 URL。然后我们可以使用 eventSource.onmessage 函数来处理收到的事件。在这个例子中，我们简单地将事件的数据保存到变量 data 中，然后我们可以使用这个数据更新网页上的 UI。
3. 完整示例代码
下面是一个完整的示例代码，它会将一个 10x10 的格子矩阵显示在网页上，并且每隔 1 秒更新一次格子的状态：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grid Aggregator</title>
<style>
.grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr);
gap: 1px;
}
.grid-item {
background-color: gray;
}
</style>
</head>
<body>
<div class="grid"></div>
<script>
const eventSource = new EventSource('/events');
eventSource.onmessage = (event) => {
const data = parseInt(event.data);
const gridItems = document.querySelectorAll('.grid-item');
gridItems.forEach((item, index) => {
if (data & (1 << index)) {
item.style.backgroundColor = 'green';
} else {
item.style.backgroundColor = 'gray';
}
});
};
const grid = document.querySelector('.grid');
for (let i = 0; i < 100; i++) {
const item = document.createElement('div');
item.className = 'grid-item';
grid.appendChild(item);
}
</script>
</body>
</html>在上面的代码中，我们使用了 CSS Grid 来创建了一个 10x10 的格子矩阵，并使用 document.createElement 函数动态创建了这些格子元素。然后我们使用 EventSource API 接收事件流，并在收到事件后更新格子的状态。
总结
本文介绍了如何使用 SSE 实现格子聚合应用。我们首先介绍了 SSE 的基本原理和优点，然后详细介绍了如何使用 Node.js + Express 实现 SSE 服务端，以及如何使用 EventSource API 接收事件流并更新网页上的 UI。最后，我们给出了一个完整的示例代码，帮助读者更好地理解 SSE 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658b9bebeb4cecbf2d0d8eb9