cover

サーバーサイドリアルタイム「アニメーション」レンダリング

sorcererxw

ウェブページで一部のデータをリアルタイムに更新したい場合、どのようにすればいいでしょうか?明らかにサーバーサイドプッシュが必要ですが、具体的な実装技術にはWebsocket、Polling、SSEなどがあります...

しかし、以前HackerNewsでこんな記事を読んだことがあります:

Stupid solutions: Live server push without JS
https://underjord.io/live-server-push-without-js.html

著者はウェブページに画像を挿入し、ページをリフレッシュすることなく、その画像でリアルタイムに現在のウェブページのオンライン人数を表示できるようにしました。一見すると本当に不思議な感じがします!

この種類の画像はMJPEGと呼ばれ、ある意味でJPEGの動画です。ブラウザ自体もそれに対応しており、原理は一つのリクエストの中で、サーバーがレスポンスのContent-Typeをmultipart/X-Mixed-Replaceとしてマークし、継続的に完全なJPEG画像を送信することです。ブラウザが新しい画像を受け取ると、画像をリフレッシュし、これによってビデオストリームが形成されます。

このように見ると、原理は以前に共有した Server Side Event と同じで、ただし SSE はテキストを絶えず送信するのに対し、multipart/X-Mixed-Replace はバイナリを送信するだけです。

このアイデアを参考にして、私はサーバーサイドでレンダリングするライフゲームのサービスを実装しました。どれだけ多くのブラウザページを開始しても、すべてのページで表示される画像は常に同じフレームです!