使用 SSE 发送图像数据

Posted 2023-02-26

【中文标题】使用 SSE 发送图像数据

【英文标题】：using SSE to send image data

【发布时间】：2016-02-05 09:50:01

【问题描述】：

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

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

我可以为此使用 SSE 吗？或者我需要一个“全尺寸”连接吗？

【参考方案1】：

你可以，通过base64编码图像（SSE不支持发送二进制）。但是（查看您对其他答案的评论，即这些是大图像），不要那样做。假设当前图像生成超时，因为它生成速度很慢，不是很大，我会这样做：

调用 /make_my_image/ 这是一个 SSE 过程，它开始制作图像。它发送通常的标头。 图像准备好后，将其保存到本地磁盘（或内存数据库等） 使用 SSE 发回可以下载图像的 URL。然后关闭 SSE 进程（服务器端）。 客户端通过 Apache（或其他）请求图像。 客户端可以发送一条消息说它什么时候得到图像并且可以删除它。和/或使用 cron 作业在这么多小时后清除旧图像。

即这发挥了 SSE 对低延迟文本消息的优势：一旦图像生成，客户端就可以下载它。比制作​​图像的后台进程要好得多，然后客户端必须轮询以找出它何时准备好。

如果隐私很重要——其他人应该无法下载图像——那么第 5 步可能是一个 php（或您选择的语言）脚本，用于检查客户端 cookie 是否与您的会话匹配，并且仅通过流式传输文件如果是这样。

【参考方案2】：

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

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

你需要做的就是把你的大图分割成图块，然后你甚至可以把它放到静态服务器上。瓷砖必须遵守约定[zoom_level]/map_[0..NX]_[0..NY].png

然后您将坐标参考系统 (CRS) 设置为 L.CRS.Simple 并使切片图层与您的图像服务器一起使用：

L.tileLayer('/image1234/tiles/z/map_x_y.png').addTo(map);

如果服务器上发生了一些重要的事情并且浏览器客户端需要知道它，那么服务器发送的事件真的应该用作主动通知机制。例如。在您编辑时，另一个答案已发布到 SO question。实际数据始终通过额外请求检索。

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

不过，解决您的问题（显示巨大图像）的快速生产、稳健且成本相对较低的解决方案将是图像平铺。