使用SSE發送圖像數據

Question

我看到的所有實現服務器發送事件（https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events）的例子都將響應的內容類型設置爲text/event-stream。

我希望能夠使用SSE機制發送圖像數據。但我不確定這是否適用於文本內容類型。

我可以使用SSE嗎？或者我需要一個「全面的」連接呢？

Answer 1

您可能，通過對圖像進行base64編碼（SSE不支持發送二進制文件）。但是（看看你對其他答案的評論，這些都是大圖），不要這樣做。假設當前圖像生成時間，因爲它是緩慢的產生，而不是巨大的，這裏是我會怎麼做：

1. 呼叫/ make_my_image/
2. 這是一個SSE過程中，開始使得圖像。它發送通常的標題。
3. 當圖像準備就緒時，將其保存到本地磁盤（或內存數據庫等）
4. 使用SSE發送可下載圖像的URL。然後關閉SSE進程（服務器端）。
5. 客戶端通過Apache（或其他）請求圖像。
6. 客戶端可以發送消息說明它何時已經獲得圖像，並且可以將其刪除。和/或使用cron作業在很多小時後清除舊圖像。

I.e.這起到了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問題，而你正在編輯。實際的數據總是通過額外的請求來檢索。

網絡套接字適用於任何全雙工TCP套接字是好的（即幾乎所有的東西）。但它的水平相當低 - 即使對於特定的應用程序，也有一些開源輔助工具。如果大型圖像渲染是您的應用程序的焦點和賣點，那麼投資它可能是有意義的。

雖然快速生產，穩健和相對低成本的解決方案來解決您的問題（顯示巨大的圖像）將形象拼貼。