使用SSE发送图像数据

Question

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

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

我可以使用SSE吗？或者我需要一个＆＃34;满量程＆＃34;这个连接？

Answer 1

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

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

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

如果隐私很重要 - 没有其他人应该能够下载图像 - 那么第5步可能是PHP（或您选择的语言）脚本，它检查客户端cookie是否与您的会话匹配，并且只通过如果是的话。

Answer 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问题。始终通过额外请求检索实际数据。

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

快速生产，强大且成本相对较低的解决方案可以解决您的问题（显示巨大的图像）。