什么是 Server-Sent Events？
Server-Sent Events (SSE) 是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送异步事件流，而不需要客户端发起请求。SSE 的核心是一个单向的、持久的 HTTP 连接，服务器通过这个连接向客户端发送事件流，客户端通过监听这个连接来接收事件。
SSE 的优点在于它不需要客户端轮询服务器，从而减少了网络流量和服务器负载，并且能够实时推送数据给客户端，从而提高了用户体验。
如何使用 SSE？
使用 SSE 需要以下几个步骤：
- 在客户端创建一个 EventSource 对象，指定要连接的服务器端点。
- 在服务器端点上发送事件流，事件流需要以 "text/event-stream" 格式发送，并且需要以 "data:" 开头，以 "\n\n" 结束。
- 在客户端监听 EventSource 对象的 "message" 事件，从事件中获取服务器发送的数据。
下面是一个简单的 SSE 示例代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SSE Demo</title>
</head>
<body>
<ul id="messages"></ul>
<script>
const eventSource = new EventSource('/sse');
eventSource.onmessage = (event) => {
const message = event.data;
const li = document.createElement('li');
li.textContent = message;
document.getElementById('messages').appendChild(li);
};
</script>
</body>
</html>在上面的代码中，我们创建了一个 EventSource 对象，并指定连接的服务器端点为 "/sse"。然后我们监听 "message" 事件，当服务器发送事件流时，我们将事件流中的数据添加到页面上的一个列表中。
在服务器端，我们需要发送事件流。下面是一个使用 Node.js 和 Express 框架的 SSE 示例代码：
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
app.get('/sse', (req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
const message = `Current time is ${new Date()}`;
res.write(`data: ${message}\n\n`);
}, 1000);
});
app.listen(3000, () => {
console.log('Server started on http://localhost:3000');
});在上面的代码中，我们创建了一个路由 "/sse"，当客户端连接到这个路由时，我们设置响应头，告诉浏览器返回的是一个 "text/event-stream" 类型的数据，并且禁止缓存和关闭连接。然后我们启动一个定时器，每隔一秒钟发送一个包含当前时间的事件流。
SSE 在移动 Web 应用程序中的应用
SSE 在移动 Web 应用程序中有很多应用，比如实时聊天、实时通知、实时数据更新等。下面我们以实时聊天为例，介绍如何在移动 Web 应用程序中使用 SSE。
首先，我们需要在客户端创建一个 SSE 连接，并监听 "message" 事件。当服务器发送聊天消息时，我们将消息添加到聊天窗口中。下面是一个简单的聊天客户端示例代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chat Demo</title>
</head>
<body>
<div id="chat"></div>
<form>
<input type="text" id="message">
<button type="submit">Send</button>
</form>
<script>
const chat = document.getElementById('chat');
const messageInput = document.getElementById('message');
const eventSource = new EventSource('/chat');
eventSource.onmessage = (event) => {
const message = event.data;
const div = document.createElement('div');
div.textContent = message;
chat.appendChild(div);
};
document.querySelector('form').addEventListener('submit', (event) => {
event.preventDefault();
const message = messageInput.value;
messageInput.value = '';
fetch('/chat', {
method: 'POST',
body: JSON.stringify({message}),
headers: {'Content-Type': 'application/json'}
});
});
</script>
</body>
</html>在上面的代码中，我们创建了一个 SSE 连接，并指定连接的服务器端点为 "/chat"。然后我们监听 "message" 事件，当服务器发送聊天消息时，我们将消息添加到一个聊天窗口中。我们还创建了一个表单，当用户提交表单时，我们使用 fetch API 向服务器发送聊天消息。
在服务器端，我们需要处理客户端发送的聊天消息，并将消息发送给所有连接的客户端。下面是一个使用 Node.js 和 Express 框架的聊天服务器示例代码：
// javascriptcn.com 代码示例
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.get('/chat', (req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
const send = (message) => {
res.write(`data: ${message}\n\n`);
};
clients.push(send);
req.on('close', () => {
clients.splice(clients.indexOf(send), 1);
});
});
app.post('/chat', (req, res) => {
const message = req.body.message;
clients.forEach((send) => send(message));
res.sendStatus(200);
});
const clients = [];
app.listen(3000, () => {
console.log('Server started on http://localhost:3000');
});在上面的代码中，我们创建了一个路由 "/chat"，当客户端连接到这个路由时，我们设置响应头，告诉浏览器返回的是一个 "text/event-stream" 类型的数据，并且禁止缓存和关闭连接。然后我们创建一个 send 函数，将该函数添加到客户端列表中，当有新的聊天消息时，我们遍历客户端列表，将消息发送给所有连接的客户端。当客户端关闭连接时，我们从客户端列表中删除该客户端。
总结
Server-Sent Events 是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送异步事件流，而不需要客户端发起请求。SSE 的优点在于它不需要客户端轮询服务器，从而减少了网络流量和服务器负载，并且能够实时推送数据给客户端，从而提高了用户体验。在移动 Web 应用程序中，SSE 可以用于实现实时聊天、实时通知、实时数据更新等功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653b45ba7d4982a6eb59d6ef