M-JPEG is not the same thing as x-mixed-replace.

M-JPEG is a concatenated stream of JPEG images, usually with some of the JPEG elements omitted.

x-mixed-replace is what he is using. It is from the early Netscape days and let you server side push new content. In this case JPEG images.

Either technique can be used to stream images depending on browser capabilities.

Actually you could use x-mixed-replace with other content-types like text/html. I don't know if it still works with modern browser but you should be able to put the counter in an iframe.

You're right. I just updated my entry to be more accurate in this sense.

It's worth noting that the author of this blog is a 17 year old self-taught hacker. Highly impressive.

Yep, I like this as well. I'm an 18 year old cofounder/designer hacker and sent him an email to hopefully get connected. I'm always on the lookout for young people like me that have started early. (not to bash on anyone that started late, but it's cool to meet people along my same path)

Wish there had been more hackers around when I started at the age of 15. But then that was 1972 :-)

Well I wish I was alive in the 1970's. Seems like hacker heaven back then... albeit with no easy way of learning.

At least with the JavaScript version you're serving actual text which can be read by screen readers, copy/pasted etc.

You could do this more efficiently with an iframe. Leave the connection open until there's an update and then send a meta refresh tag.

Yeah, as ceol said, that'd essentially be polling. Plus, if you can place an iframe, you can almost always place Javascript which makes something with ajax or socket.io somewhat more suitable.

But there are many places on the internet where you can only link an image, such as in sites with markdown, bbcode, or hotlinked avatars.

Wouldn't that be accomplishing the same thing— since M-JPEG keeps the connection open— except you're forcing the client to send another request when they refresh?

very cool, and apparently quite simple. but when I look at the network log with the developper tools apparently chrome doesnt register loading a new image. is it possible that it will never show up there because it doesnt finish loading?

looking at the response headers of online.png shows:

     Cache-Control:no-store, no-cache, must-revalidate, max-age=0, post-check=0, pre-check=0, false
     Connection:Close
     Date:Sun, 29 Jul 2012 11:04:04 GMT
     Expires:-1
     Last-Modified:Sun, 29 Jul 2012 11:04:04 GMT
     Pragma:no-cache
     Transfer-Encoding:chunked

so that can't be the jpeg mentioned

Ah, but then click "View Source" next to Response Headers and you'll see the non-evaluated headers: http://i.imgur.com/Ql741.png

  HTTP/1.1 200 OK
  Connection: Close
  Expires: -1
  Last-Modified: Sun, 29 Jul 2012 17:44:35 GMT
  Cache-Control: no-store, no-cache, must-revalidate, max-age=0, post-check=0, pre-check=0, false
  Pragma: no-cache
  Content-Type: multipart/x-mixed-replace; boundary=--whyhellothere
  Date: Sun, 29 Jul 2012 17:44:35 GMT
  Transfer-Encoding: chunked

Also, it can be any image type (or file type, for that matter) besides image/jpeg. In my program, I'm sending image/png so that the rendered font is more readable.

This is similar to the COMET/AJAX push model: http://en.wikipedia.org/wiki/Comet_(programming)

As HTTP is stateless it's hard to tell when a user has disconnected, you can make the count more accurate by starting a session for each user then incrementing a "last_connected" timestamp by N seconds for each hit (can you tie this to each COMET update? Perhaps with JS?), then expiring any sessions that haven't been updated for a while. This is how a few popular CMS' (Drupal, Joomla) implement the "Who's Online" count.

Ingenious. I imagine this would also be easy to implement in e.g. PHP. Or am I wrong? (not at my PC to check)

Sounds like there would be some issues with PHP script timeouts, since you'd have to tie up a whole web server thread with a connection that doesn't close.

Neat technique. But no IE, so not super practical.

Why does his implementation say 130 users online and his sidebar widget says 29?

Darn. Yep, I can't figure out how to fix the bug causing that. I went to sleep hoping that it would in fact not be bugged and return to near-zero by the time I woke up, and now I can see that the bug is still very much there. Hmm.

"Without client side javascript"...

"using Backbone.js"

?

Backbone.js can be used server-side with node.js.

Ahh cool, did not know that. Thanks for clarifying!

Node.js. Server-side.

All that's required on the client is this: <img src="/online.png" />

And you're up and running.