![cover](/_next/image?url=https%3A%2F%2Fstatic.tempura.fun%2F4cf7b353d5d0d40803c65850605040af.jpg&w=3840&q=75)
If we want to update a part of the data on the webpage in real time, what should we generally do? Obviously, it's server-side push, and the specific implementation technologies can be Websocket, Polling, SSE...
However, I once saw an article like this on HackerNews:
![](/_next/image?url=https%3A%2F%2Fstatic.tempura.fun%2Ffceaf63cede45abe40b0d81dd20975f0.png&w=3840&q=75)
The author inserted an image on the webpage, which can display the current number of online users in real-time without refreshing the page. At first glance, it really feels quite magical!
![](/_next/image?url=https%3A%2F%2Fstatic.tempura.fun%2F7908e413a4e3b6ffc3ae3ac56e605fcc.png&w=3840&q=75)
This type of image is called MJPEG, which is essentially a JPEG animation in some sense. The browser itself also supports it. The principle is that in a single request, the server marks the Response Content-Type as multipart/X-Mixed-Replace and continuously sends a complete JPEG. Once the browser receives a new image, it refreshes the image, thus forming a video stream.
In this way, the principle is actually the same as the Server Side Event I shared before, except that SSE is constantly issuing text, while multipart/X-Mixed-Replace is issuing binary.
Following this idea, I implemented a server-side rendering service for Game of Life. No matter how many browser pages are launched, all pages will always see the same frame of the image!