將任何圖像流式傳輸到HTML客戶端？

用例是在瀏覽器或電子郵件客戶端查看HTML文檔中引用圖像URL（例如< img src = ... >），並讓圖像反映當前狀態服務器。該圖像將由後端動態計算和創建，例如，一個小服務程序，定期例如，每一分鐘。它有點像視頻源，但幀速率很差（每分鐘一幀）。 ;）將任何圖像流式傳輸到HTML客戶端？

我想至少有兩個關鍵的假設必須滿足在這裏：

後端產生的圖像必須能夠發送圖像的初始版本，則後續版本的圖像，例如在計算髮送睡眠循環中，客戶端沒有關閉連接。後端將保持打開客戶端的HTTP連接並保持發送新版本，直到客戶端關閉連接，例如因爲它不再顯示文檔。
提取圖像的客戶端會檢測到後端不斷髮送新版本的圖像並重繪它。我不確定服務器是否可以明確地向客戶端發送信號，例如設置一個保持活動的響應頭文件或類似的東西 - 或者甚至不需要讓服務器保持連接打開狀態。

這些假設是否合理？對於後端，我將使用servlet作爲概念驗證，而前端將是Firefox等瀏覽器和Thunderbird等電子郵件客戶端。

我不太確定服務器如何向客戶端表明以前的映像已過時並可以丟棄，並且應該接收並重新繪製新映像，但這可能僅僅是刷新和重新發送新數據的問題？任何指針都將不勝感激。

使用類似GIF動畫的東西將無法正常工作，因爲我無法提前知道圖像會是什麼。換句話說，我無法預先計算圖像序列併發送一次。

來源

2013-07-03 kaared

所以，你想編輯收件人的電子郵件，他們收到後，通過改變一個熱鏈接的圖像的內容？我從來沒有聽說過這種技術被使用。我建議只給他們一個鏈接，他們可以看到那裏的統計數據，這些數據應該以HTML格式呈現。 – Ermir

@Ermir，HTML文檔本身（例如電子郵件，網頁）並未被編輯/更改，但HTML中引用的圖像可能會不斷變化（如動畫GIF，除非它不是靜態數據，而是動態）。 HTML文檔和引用的圖像將是兩個不同的URL。但是，是的，用戶會看到的將以某種方式「編輯」，即當圖像改變時會改變。我試圖解決的問題是避免刷新文檔（例如頁面/電子郵件）以獲取當前圖像。 -Kaare – kaared

如果您希望內容在不刷新的情況下更改，您需要使用Javascript，並且由於HTML電子郵件中沒有Javascript，因此您嘗試執行的操作不起作用。 – Ermir

最簡單的選擇做一些挖我穿過混合替代內容類型跌跌撞撞後，看到https://en.wikipedia.org/wiki/MIME#Mixed-Replace。請注意，根據維基百科條目，對此的支持似乎不是100％ - 我沒有Internet Explorer或Outlook，因此我無法測試，但它適用於當前版本的Chrome，Firefox和雷鳥。

步驟：

發送「內容類型：多部分/ X - 混合替換;邊界= <SOME_BOUNDARY_STRING>」到客戶端。
對於每個圖像被髮送做：

一個）發送「內容類型：<MIME_TYPE>」例如「圖像/ PNG」。

b）以原始字節發送圖像。

c）發送類似「 - <SOME_BOUNDARY_STRING>」的邊界 - 請注意雙連字符。 d）沖洗。
等待任何間隔和重複。連接將被客戶端關閉，或者服務器可以關閉它。

是的，這是相當沉重的服務器。如果您需要爲網頁獲取多個網址的圖片，最好輪詢而不是流式。然而，就我而言，主要好處是避免電子郵件中的陳舊圖像和用例調用單個圖像，這在服務器上遠不那麼沉重。您可以將參數添加到URL以控制此行爲。

來源

2013-07-03 16:58:09 kaared

服務器將圖像發送到瀏覽器而不是瀏覽器輪詢圖像至關重要嗎？

一般情況下，客戶端會通過輪詢服務器的更新來降低服務器的負載。也許你可以像那樣設計它。

我從來沒有嘗試過自己，但與node.js你應該能夠創建一個套接字，然後服務器可以發送圖像。不知道這將是多麼容易。

輪詢服務器會雖然

來源

2013-07-03 03:18:24

@「Osama Javed」，我可以繞過瀏覽器部分，因爲我可以輪詢服務器。不過，我不確定這是否會爲電子郵件客戶端做到這一點。我會看看是否有辦法讓電子郵件客戶端使用重定向循環或甚至JavaScript來刷新頁面，但我強烈希望以服務器爲中心的解決方案，因爲它會保持服務器上的邏輯，並且我會避免潛在的老式舊電子郵件中的邏輯。 – kaared

@在這種情況下，node.js是我所知道的唯一允許服務器到客戶端通信的東西。但即使這也可能不適用於電子郵件客戶端。祝你的項目好運 –

將任何圖像流式傳輸到HTML客戶端？

回答

相關問題