![cover](/_next/image?url=https%3A%2F%2Fstatic.tempura.fun%2F4cf7b353d5d0d40803c65850605040af.jpg&w=3840&q=75)
如果我们想要在网页实时更新一部分数据, 我们一般要怎么做? 显然是服务端推送,具体实现技术可以是 Websocket、Polling、SSE...
不过曾经在 HackerNews 上看到这样一篇文章:
![](/_next/image?url=https%3A%2F%2Fstatic.tempura.fun%2Ffceaf63cede45abe40b0d81dd20975f0.png&w=3840&q=75)
Stupid solutions: Live server push without JS
https://underjord.io/live-server-push-without-js.html
作者在网页上插入了一张图片,不需要刷新网页,这张图片就能实时展示当前网页在线人数,咋一看真的感觉非常神奇!
![](/_next/image?url=https%3A%2F%2Fstatic.tempura.fun%2F7908e413a4e3b6ffc3ae3ac56e605fcc.png&w=3840&q=75)
这种图片叫做 MJPEG ,某种意义上是 JPEG 动图。浏览器本身也对其有相应的支持,原理就是在一个请求当中,服务端将 Response Content-Type 标记为 multipart/X-Mixed-Replace 并不断下发一张完整的 JPEG,浏览器一旦接收到新的图片,就刷新图片,这样就形成了一个视频流。
这么看起来,原理其实和我之前分享过的 Server Side Event 如出一辙,只不过 SSE 是不断下发文本,multipart/X-Mixed-Replace 是下发二进制而已。
参考这个思路,我实现了一个服务端渲染 Game of Life 的服务,无论启动多少的浏览器页面,所有页面看到的图片永远都是同一帧画面!