使用 SSE 发送图像数据
using SSE to send image data
我看到的所有实施服务器发送事件 (https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) 的示例都将响应的内容类型设置为 text/event-stream。
我希望使用 SSE 机制发送图像数据。但我不确定这是否适用于文本内容类型。
我可以为此使用 SSE 吗？或者我需要一个 "full scale" 连接吗？
您可以，对图像进行 base64 编码（SSE 不支持发送二进制文件）。但是（看看你对其他答案的评论，这些是大图像），不要那样做。假设当前图像生成超时，因为它生成速度慢，不是很大，我会这样做：
- 通话/make_my_image/
- 这是一个 SSE 进程，开始制作图像。它发送通常的 header.
- 图像准备好后，将其保存到本地磁盘（或 in-memory 数据库等）
- 使用SSE发回可以下载图片的URL。然后关闭SSE进程([=34=]).
- 客户端通过 Apache（或其他）请求图像。
- 客户端收到图片后可以发消息说可以删除了。 And/or 使用 cron 作业清除这么多小时后的旧图像。
即这发挥了 SSE 对 low-latency 文本消息有益的优势：一旦图像制作完成，客户端就可以下载它。比后台进程制作图像好得多，然后客户端必须轮询以了解它何时准备好。
如果隐私很重要 - no-one 否则应该能够下载图像 - 然后第 5 步可以是 PHP（或您选择的语言）脚本，用于检查客户端 cookie 是否与您的匹配session，如果是，则仅流式传输文件。
对于非常大的图像，我至少会通过 web sockets 流式传输。但是，获取服务器端（和后端）可能很棘手。
或者，您可以平铺图像并使用简单的 HTTP 请求。有很多方法和库，其中之一就是使用 Leaflet。
这是一个体面的解释：http://omarriott.com/aux/leaflet-js-non-geographical-imagery/
你只需要将你的大图分割成小块，然后你甚至可以把它放在静态服务器上。 Tiles 必须遵循约定 [zoom_level]/map_[0..NX]_[0..NY].png
然后您将坐标参考系统 (CRS) 设置为 L.CRS.Simple 并使图块图层与您的图像服务器一起工作：
L.tileLayer('/image1234/tiles/{z}/map_{x}_{y}.png').addTo(map);
如果服务器上发生了一些重要的事情并且浏览器客户端需要知道它，那么服务器发送的事件真的应该用作主动通知机制。例如。在您编辑时，另一个答案已发布到 SO 问题。实际数据始终通过额外请求检索。
Web 套接字适用于全双工 TCP 套接字适用的任何东西（即几乎所有东西）。但它的水平相当低——尽管对于特定的应用程序有一些开源辅助工具。如果大图像渲染是您应用程序的重点和卖点，那么投资它可能是有意义的。
不过，图像平铺可以快速投入生产、稳健且成本相对较低的解决方案来解决您的问题（显示巨大的图像）。
我看到的所有实施服务器发送事件 (https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) 的示例都将响应的内容类型设置为 text/event-stream。
我希望使用 SSE 机制发送图像数据。但我不确定这是否适用于文本内容类型。
我可以为此使用 SSE 吗？或者我需要一个 "full scale" 连接吗？
您可以，对图像进行 base64 编码（SSE 不支持发送二进制文件）。但是（看看你对其他答案的评论，这些是大图像），不要那样做。假设当前图像生成超时，因为它生成速度慢，不是很大，我会这样做：
- 通话/make_my_image/
- 这是一个 SSE 进程，开始制作图像。它发送通常的 header.
- 图像准备好后，将其保存到本地磁盘（或 in-memory 数据库等）
- 使用SSE发回可以下载图片的URL。然后关闭SSE进程([=34=]).
- 客户端通过 Apache（或其他）请求图像。
- 客户端收到图片后可以发消息说可以删除了。 And/or 使用 cron 作业清除这么多小时后的旧图像。
即这发挥了 SSE 对 low-latency 文本消息有益的优势：一旦图像制作完成，客户端就可以下载它。比后台进程制作图像好得多，然后客户端必须轮询以了解它何时准备好。
如果隐私很重要 - no-one 否则应该能够下载图像 - 然后第 5 步可以是 PHP（或您选择的语言）脚本，用于检查客户端 cookie 是否与您的匹配session，如果是，则仅流式传输文件。
对于非常大的图像，我至少会通过 web sockets 流式传输。但是，获取服务器端（和后端）可能很棘手。
或者，您可以平铺图像并使用简单的 HTTP 请求。有很多方法和库，其中之一就是使用 Leaflet。 这是一个体面的解释：http://omarriott.com/aux/leaflet-js-non-geographical-imagery/
你只需要将你的大图分割成小块，然后你甚至可以把它放在静态服务器上。 Tiles 必须遵循约定 [zoom_level]/map_[0..NX]_[0..NY].png
然后您将坐标参考系统 (CRS) 设置为 L.CRS.Simple 并使图块图层与您的图像服务器一起工作：
L.tileLayer('/image1234/tiles/{z}/map_{x}_{y}.png').addTo(map);
如果服务器上发生了一些重要的事情并且浏览器客户端需要知道它，那么服务器发送的事件真的应该用作主动通知机制。例如。在您编辑时，另一个答案已发布到 SO 问题。实际数据始终通过额外请求检索。
Web 套接字适用于全双工 TCP 套接字适用的任何东西（即几乎所有东西）。但它的水平相当低——尽管对于特定的应用程序有一些开源辅助工具。如果大图像渲染是您应用程序的重点和卖点，那么投资它可能是有意义的。
不过，图像平铺可以快速投入生产、稳健且成本相对较低的解决方案来解决您的问题（显示巨大的图像）。