

Show a real-time user count without any client-side Javascript - dag11
http://minipenguin.com/?p=647

======
jws
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.

~~~
zimbatm
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.

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

~~~
joshmlewis
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)

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

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

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

------
rabidsnail
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.

~~~
dag11
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.

------
jcfrei
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

~~~
dag11
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.

------
garethsprice
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.

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

~~~
zapt02
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.

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

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

~~~
dag11
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.

------
bherms
"Without client side javascript"...

"using Backbone.js"

?

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

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

