使用SSE发送图像数据

Question

我所看到的所有实现服务器推送事件（https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events）的示例都将响应的内容类型设置为text/event-stream。

我希望能够使用SSE机制发送图像数据。但我不确定这是否适用于文本内容类型。

我可以使用SSE吗？还是需要一个“全尺寸”连接？

- akonsu

Answer 1

您可以通过对图像进行base64编码（SSE不支持发送二进制数据）来实现，但是（根据您在其他答案评论中提到这些是大型图像），不要这样做。假设当前图像生成由于生成速度慢而超时，而不是过大，则我会按照以下方式处理：

1. 调用 /make_my_image/
2. 这是一个SSE进程，开始生成图像并发送常规标题。
3. 当图像准备就绪时，将其保存到本地磁盘（或内存数据库等）中。
4. 使用SSE向客户端发送图像的下载URL。然后关闭SSE进程（服务器端）。
5. 客户端通过Apache（或其他方式）请求图像。
6. 客户端可以发送消息以表示何时已获取图像并且可以删除它。和/或使用cron作业清除旧图像。

换句话说，这利用了SSE低延迟文本消息的优势：一旦生成图像，客户端就可以下载它。比后台进程生成图像，并且客户端必须轮询以查找其准备就绪要好得多。

如果隐私很重要-没有其他人能够下载图像-那么第5步可以是一个PHP（或您选择的语言）脚本，检查客户端cookie是否与您的会话匹配，并且仅在如此时才流式传输文件。

- Darren Cook

Answer 2

https://www.npmjs.com/package/pack-bytes-to-utf8

服务器

import { uint8ArrayToUtf8 } from 'pack-bytes-to-utf8'

const excludeCharacters = new Set([0xA, 0xB, 0xC, 0xD, 0xE])
const binary = new Uint8Array([0xff, 0xff, 0xff])

...

res.send(`data: ${uint8ArrayToUtf8(binary, excludeCharacters)}`)

客户端

import { utf8ToUint8Array } from 'pack-bytes-to-utf8'

...

eventSource.on('message', (event) => {
    console.log(utf8ToUint8Array(event.data))
})

- Вячеслав Рузанов

---

欢迎来到SO！请不要仅发布代码答案，而是添加一些文字说明有关您的方法如何运作以及它与其他给出答案的不同之处。您可以在我们的"如何撰写好答案"页面了解更多信息。 - ahuemmer

Answer 3

对于非常大的图像，我建议至少通过web sockets进行流式传输。然而，获取服务器端（和后端）可能会有些棘手。

或者，您可以将图像分成瓦片并使用简单的HTTP请求。有很多方法和库，其中之一是使用Leaflet。这里有一个不错的解释：http://omarriott.com/aux/leaflet-js-non-geographical-imagery/

您需要做的就是将巨大的图像分成瓦片，然后甚至可以将其放在静态服务器上。瓦片必须遵循约定[缩放级别]/map_[0..NX]_[0..NY].png

然后，您设置一个坐标参考系统（CRS）为L.CRS.Simple，并使瓦片图层与您的图像服务器配合工作：

L.tileLayer('/image1234/tiles/{z}/map_{x}_{y}.png').addTo(map);

如果服务器发生重要事件并且浏览器客户端需要知道，那么应该使用服务器发送的事件作为未经请求的通知机制。例如，在您编辑时，另一个答案已发布到 SO 问题中。实际数据始终通过额外的请求检索。

Web套接字适用于全双工TCP套接字适用于的任何内容（即几乎所有内容）。但它是相当低级别的 - 即使对于特定的应用程序，也有一些开源辅助工具。如果大型图像渲染是您的应用程序的重点和卖点，那么投资于此可能是有意义的。

快速投入生产，强大而相对低成本的解决方案来解决您的问题（显示巨大的图像）将是图像平铺。

- Alex Pakka