Realtime Web Messaging over Animated Gifs

I am convinced HN is the Pinterest of software.<p>Someone made a coffee table out of old crates? Pin. Someone made a fence out of old wood pallets? Pin.<p>Someone made a realtime messaging library out of animated gifs? Upvote.

&#62; sadly we are in mid September here in the northern hemisphere.<p>I am in the south and can confirm we are also in September, will report back with news.<p>/snark

I've seen this technique once before... Ka-Ping Yee built a demo that did this back in 1999: <a href="http://zesty.ca/chat/" rel="nofollow">http://zesty.ca/chat/</a><p>It's an awesome hack, cool to see it being rediscovered/reinvented after so much time!

This is awesome -- you never know when a solution like this might come in handy.<p>Wayyyyy back in the day (NS4, IE4 day) I used the width / height of an image the browser polled every few seconds as a transport mechanism... the only other option (refreshing a hidden frame) caused an irritating "page refresh" clicking noise. This was before XMLHttpRequest obviously and was enough bandwidth for our needs. It worked so well that I believe its still being used in production systems.<p>I haven't looked at the javascript generated in this animated gif solution, but I assume that it does some stuff that wouldn't work in the pre-IE6 browsers. It would be extremely amazing if it did though.

First person to turn a 90s animated GIF divider into an actual live progress bar with API wins the Internet.

I did something similar for cheap (insecure) desktop streaming a few years ago.<p>Roughly, use scrot (or similar screen capturing command line tool) to take a screenshot of the desktop and then encode it into a gif frame. Repeat once per second. Boom, your desktop is now a gif.<p>The main problem with this approach is that transmitting stuff via gif (low-color bitmaps, remember) is painfully slow even with modern internet.<p>That said, could probably be very useful in some instances!

No one has mentioned these specific use cases yet...<p>1) live charts and graphs of server loads<p>2) interactive maps (instead of loading new images, just append)<p>3) I'm also thinking of some kind of captcha, where the user waits for the server to show a certain image and then can submit a comment and the server would know which submits were valid based on timestamp... or something.<p>4) weather, temperature, stocks<p>5) collaborative drawing applet? (would still require ajax though)

So when you read about countries like Venezuela installing proxies in front of Twitter before an upcoming election [1], is there a potential to use this technique to tunnel information into areas that normally would suppress it?<p>[1] <a href="http://orvtech.com/en/general/gobierno-venezolano-elecciones-proxy-twitter/" rel="nofollow">http://orvtech.com/en/general/gobierno-venezolano-elecciones...</a>

It would be much cooler if you were to send the video stream to the gif instead of the booring old messages. Very cool though. Just think if something like this with video was invented back in the days of IE6 , it would have been the skype of its day.

That is extremely clever, this just goes to show that if you know how something works inside and out you can come up with clever hacks.

If realtime messaging is a new and cool thing, what were chat rooms back in the day? not realtime? Am I missing something? I don't remember needing reloading those pages...<p>All that aside, this is amazing.

I get the humor of this library, but in reality wouldn't you just use HTTP 1.1 chunked transfer encoding instead? According to <a href="http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol" rel="nofollow">http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol</a>, that would even work with your IE 2 users.

Would it be possible to use &#60;canvas&#62; for extracting pixel information as binary data?

"The awesome image that illustrates this page was given by the internet." That excellent gif is from "Tim and Eric Awesome Show, Great Job!" Just thought I'd give proper credit where it's due.

Does this work on the iphone? I expect this would be a great alternative to socket.io for mobile that doesn't support websockets or flash.

Combine this with a client side JavaScript based OCR implementation, and you could even send TEXT in real-time.<p>Imagine the possibilities !!11!1

That's pretty amazing, and it's really too bad that this technique wasn't actually available years before... (or was it?)

This is pretty cool. I don't know if I would use this in production, as people with epilepsy usually disable GIFs to protect themselves, so this tech would probably fail (usually people use an extension or set the browser to only load frame 1 of the GIF and stop).

Couldn't this be used to add another layer of security to a conversation? If there is a way to generate gifs on the fly that contained what you wished to say, it could be used to mask your message from basic text screening and copy/paste.<p>Thoughts?

How exactly is this a better approach than multipart/x-mixed-replace, which is designed to push new messages from the server to the client in a stream until the server decides to stop?

does it work in email clients?

Question: Could this be used for screen sharing?

You can also use image streams: <a href="http://minipenguin.com/?p=647" rel="nofollow">http://minipenguin.com/?p=647</a>

The original chat system from 1999 from which he took inspiration was written by Ka-Ping Yee, not an anonymous hacker.

there is no client side code or am I missing something?<p>how do I decode my data from animated gif in javascript?

if flash wasn't dying already I would have asked if this could have been useful to enable flash games or videos on the ipad... but the answer would have probably been "no" anyway

Very clever hack.

hacking at its finest. while real life use cases are debatable the implementation is very, very cool.

make a QR code stream, and decode it in browser.

I'm crying. I always wanted one of these. I'm so happy.

GIF... that's soooo geocities...<p>Very clever

This is just wrong and needs to die and go away. It's probably fun to read for the 1st minute.

From the example, ;; go and open <a href="http://localhost:8081/" rel="nofollow">http://localhost:8081/</a> in Safari or IE6<p>IE6, are you serious?