SORCERERXW

服务端实时"动画"渲染

如果我们想要在网页实时更新一部分数据, 我们一般要怎么做? 显然是服务端推送,具体实现技术可以是 Websocket、Polling、SSE...

不过曾经在 HackerNews 上看到这样一篇文章:

Stupid solutions: Live server push without JS

So in my post Is this evil? I covered a way of tracking users with CSS. While thinking about those weird ways of using the web I also started thinking about pushing live data to clients without JS. Or at least maintaining a connection. So WebSockets requires JS. WebRTC requires JS.

icon

作者在网页上插入了一张图片,不需要刷新网页,这张图片就能实时展示当前网页在线人数,咋一看真的感觉非常神奇!

这种图片叫做 MJPEG ,某种意义上是 JPEG 动图。浏览器本身也对其有相应的支持,原理就是在一个请求当中,服务端将 Response Content-Type 标记为 multipart/X-Mixed-Replace 并不断下发一张完整的 JPEG,浏览器一旦接收到新的图片,就刷新图片,这样就形成了一个视频流。

这么看起来,原理其实和我之前分享过的 Server Side Event 如出一辙,只不过 SSE 是不断下发文本,multipart/X-Mixed-Replace 是下发二进制而已。

参考这个思路,我实现了一个服务端渲染 Game of Life 的服务,无论启动多少的浏览器页面,所有页面看到的图片永远都是同一帧画面!