什么是 SSE？
SSE（Server-Sent Events）是一种基于 HTTP 协议的服务器推送技术，可以在服务器端向客户端发送实时数据流。与传统的轮询方式相比，SSE 可以节省网络带宽和服务器资源，同时也可以实时更新客户端的数据。
SSE 的应用场景
SSE 可以用于实现实时聊天、实时通知、实时数据监控等功能，本文将介绍如何使用 SSE 完成服务器端的文件传输和下载。
实现服务器端的文件传输和下载
服务器端代码
首先，我们需要在服务器端实现 SSE 的逻辑，以下是一个简单的 Express 应用程序示例：
// javascriptcn.com 代码示例
const express = require('express');
const fs = require('fs');
const app = express();
app.get('/download', (req, res) => {
const file = fs.createReadStream('path/to/file');
res.set({
'Content-Type': 'application/octet-stream',
'Content-Disposition': 'attachment; filename="file"'
});
file.pipe(res);
});
app.get('/stream', (req, res) => {
res.set({
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
const file = fs.createReadStream('path/to/file');
file.on('data', chunk => {
res.write(`data: ${chunk}\n\n`);
});
file.on('end', () => {
res.write('event: end\ndata: null\n\n');
res.end();
});
});
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});在上面的代码中，我们使用 Express 框架创建了一个简单的应用程序，其中包含了两个路由，分别是 /download 和 /stream。
/download 路由用于下载文件，我们使用 Node.js 的 fs 模块创建了一个可读流，并将其通过管道传输到响应对象中。我们还设置了响应头，指定了响应的 MIME 类型和文件名。
/stream 路由用于实现 SSE，我们同样设置了响应头，指定了响应的 MIME 类型和缓存控制。我们使用 Node.js 的 fs 模块创建了一个可读流，并监听其 data 事件，将数据流发送到客户端。当数据流结束时，我们还发送了一个事件，通知客户端数据传输已完成。
客户端代码
接下来，我们需要在客户端实现 SSE 的逻辑，以下是一个简单的 HTML 页面示例：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Server-Sent Events</title>
</head>
<body>
<h1>Server-Sent Events</h1>
<button id="download">Download</button>
<div id="stream"></div>
<script>
const stream = document.getElementById('stream');
const eventSource = new EventSource('/stream');
eventSource.onmessage = event => {
stream.innerHTML += event.data;
};
eventSource.addEventListener('end', () => {
stream.innerHTML += '<p>Download completed.</p>';
});
const download = document.getElementById('download');
download.addEventListener('click', () => {
window.location.href = '/download';
});
</script>
</body>
</html>在上面的代码中，我们首先创建了一个按钮，用于触发文件下载。当用户点击按钮时，我们使用 JavaScript 的 window.location.href 方法将请求发送到服务器端的 /download 路由。
我们还创建了一个 div 元素，用于显示文件传输的进度。当客户端请求服务器端的 /stream 路由时，我们使用 JavaScript 的 EventSource 对象创建了一个 SSE 连接，并监听其 message 事件。当服务器端发送数据时，我们将其添加到 div 元素中。
当服务器端发送 end 事件时，我们向 div 元素中添加一条消息，提示用户文件下载已完成。
总结
本文介绍了如何使用 SSE 完成服务器端的文件传输和下载。通过使用 SSE 技术，我们可以实现实时的文件传输和下载功能，提高用户体验和服务器性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657ff27ed2f5e1655daea3fc