将任何图像流式传输到 HTML 客户端？答案

【问题标题】：Streaming any image to HTML client?将任何图像流式传输到 HTML 客户端？
【发布时间】：2013-06-30 13:11:16
【问题描述】：

用例是在 HTML 文档中引用图像 URL（例如），该 URL 将由浏览器或电子邮件客户端查看，并让图像反映由以下内容确定的当前状态服务器。图像将由后端动态计算和创建，例如一个 servlet，定期，例如每一分钟。它有点像视频源，但帧速率很差（每分钟一帧）。 ;)

我想这里至少必须满足两个关键假设：

生成图像的后端必须能够发送图像的初始版本，然后是图像的后续版本，例如在计算发送睡眠循环中，没有客户端关闭连接。后端将保持与客户端的 HTTP 连接打开并继续发送新版本，直到客户端关闭连接，例如因为它不再显示文档。
获取图像的客户端将检测到后端不断发送图像的新版本并重新绘制它。我不确定服务器是否可以明确地向客户端发出信号，例如设置一个保持活动的响应标头或其他东西 - 或者甚至不需要服务器将保持连接打开。

这些假设合理吗？对于后端，我将使用 servlet 作为概念证明，而前端将是 Firefox 之类的浏览器和 Thunderbird 之类的电子邮件客户端。

我不太确定服务器将如何向客户端发出先前图像已过时并且可以丢弃并且应该接收并重新绘制新图像的信号，但也许这只是刷新和重新发送新数据的问题？对此的任何指示也将不胜感激。

使用动画 gif 之类的东西是行不通的，因为我无法提前知道图像是什么。换句话说，我无法预先计算图像序列并发送一次。

【问题讨论】：

所以您想在收件人收到电子邮件后通过更改热链接图像的内容来编辑他们的电子邮件？我从未听说过使用这种技术。我建议只给他们一个链接，他们可以在那里看到应该以 HTML 呈现的统计信息。
@Ermir，HTML 文档本身（例如电子邮件、网页）本身没有被编辑/更改，但 HTML 中引用的图像可能会不断变化（就像动画 GIF，除了它不是静态数据，而是动态数据）。 HTML 文档和引用的图像将是两个不同的 URL。但是，是的，用户将看到的内容将以某种方式“编辑”，即在图像更改时更改。我要解决的问题是避免刷新文档（例如页面/电子邮件）以获取当前图像。 -卡雷
如果您希望内容在不刷新的情况下更改，则需要使用 Javascript，并且由于 HTML 电子邮件中没有 Javascript，因此您尝试执行的操作将不起作用。

标签： java image servlets streaming gif

【解决方案1】：

服务器是否必须将图像发送到浏览器而不是浏览器轮询图像？

客户端通常轮询服务器以获取更新，因为它降低了服务器上的负载。也许你可以这样设计。

我自己从未尝试过，但使用node.js，您应该能够创建一个套接字，然后服务器可以将图像发送到该套接字。不知道这有多容易。

轮询服务器将是最简单的选择

【讨论】：

@"Osama Javed"，我可以在浏览器部分解决它，因为我可以让它轮询服务器。但是，我不确定这是否适用于电子邮件客户端。我会看看是否有办法让电子邮件客户端使用重定向循环甚至 JavaScript 刷新页面，但我更喜欢以服务器为中心的解决方案，因为它将逻辑保留在服务器上，我会避免潜在的旧的旧电子邮件中的逻辑。
@kaared 在这种情况下 node.js 是我所知道的唯一允许服务器到客户端通信的东西。但即使这样也可能不适用于电子邮件客户端。祝你的项目好运

【解决方案2】：

在进行了一些挖掘之后，我偶然发现了混合替换内容类型，请参阅https://en.wikipedia.org/wiki/MIME#Mixed-Replace。请注意，根据 Wikipedia 条目，对此的支持似乎不是 100%——我没有 Internet Explorer 或 Outlook，所以我无法测试，但它适用于当前版本的 Chrome、Firefox 和雷鸟。

步骤：

向客户端发送“Content-type: multipart/x-mixed-replace;boundary=”。
对于发送的每张图片，请执行以下操作：

a) 发送“内容类型：”，例如“图像/png”。

b) 将图像作为原始字节发送。

c) 发送边界，如“--”——注意双连字符。

d) 冲洗。
等待任何间隔并重复。连接将被客户端关闭或服务器可以关闭它。

是的，这对服务器来说很重。如果您需要为网页的多个 URL 获取图像，最好轮询而不是流。但是，就我而言，主要好处是避免电子邮件中的图像过时，并且用例需要单个图像，这在服务器上的负担要轻得多。您可以向 URL 添加参数来控制此行为。

【讨论】：