Real-time updates without JavaScript

https://harmless.herokuapp.com/

by wybiral • 8 years ago

70 44 8 years ago

harmless.herokuapp.com

TLDR: It's a basic chat app. It's using a streaming http connection and css "::before" to reverse the order of new output, so it doesn't need javascript. Interesting hack, but...

The_suffocated4• 8 years ago

But what?

ErunamoJAZZ• 8 years ago

Page never end to load.

lhorie3• 8 years ago

It breaks when you press `esc`. Either that, or the DOM just keeps growing and hogging memory until the tab eventually becomes unresponsive or crashes

twiss• 8 years ago

The CSS to reverse the order is:

    main {
        display: flex;
        flex-direction: column-reverse;
    }

The many ::before <style>s are used to update the connection count.

If you like these kinds of tricks, there's also an "order" CSS property, which lets you give elements any arbitrary order you like (by giving each element a numeric index). This can be useful for implementing sorting functionality, for example.

netgusto• 8 years ago

I guess this works by keeping the connexion alive and streaming packets of data, taking advantage of the browsers capacity to render HTML before the whole source is actually loaded.

OP?

wybiral9• 8 years ago

Correct. It's a small Golang server that keeps the connection alive with chunked transfer encoding. From the browser's perspective it's like a really slowly loading page.

The connection count is updated by sending some inline CSS ::before content changes.

The_suffocated4• 8 years ago

Thanks for the demonstration. I didn't know this chunked encoding technique before.

thesandlord2• 8 years ago

This is a really cool hack. Is the source code available somewhere? I understand how the updates are showing up in my browser (using CSS ::before and never closing the connection), but can't figure out how the post works without refreshing the page. Can't view source because the page never actually finishes returning. I'm probably forgetting something basic.

Felk• 8 years ago

You're forgetting about F12 :)

wybiral9• 8 years ago

The POST requests do refresh the page for the poster. But not for the viewers. For everyone else it just streams the HTML to them using chunked encoding.

It's written in Golang and hosted on a free Heroku instance. I'll probably upload the code somewhere after a bit.

thesandlord2• 8 years ago

Oh wow, I couldn't really notice the page refreshing at all... Nice job.

fwdpropaganda2• 8 years ago

What's with the shitty people? "Europeans are useless", "fuck white people", "fuck black people" etc. Ludicrous.

quickthrower2• 8 years ago

That's what happens when everyone is anonymous and the text scrolls fast, you can't even have a proper conversation so those types of people leave and you are left with a trollbox.

meritt• 8 years ago

Keep in mind these are the same people whose comments you're reading on HN and the same people upvoting/downvoting whether or not your contributions are seen. Pure anonymity sucks.

Also see John Gabriel's Greater Internet Fuckwad theory: https://www.penny-arcade.com/comic/2004/03/19

chc• 8 years ago

This is partially alleviated by the fact that you can't downvote until you reach a certain karma threshold.

fwdpropaganda2• 8 years ago

Keep in mind these are the same people whose comments you're reading on HN and the same people upvoting/downvoting whether or not your contributions are seen.

Yeah I'm just starting to realise this. Big disappointment.

tannhaeuser• 8 years ago

Meta refresh has been used with WebCams for ages.

[1] https://en.m.wikipedia.org/wiki/Meta_refresh

wybiral9• 8 years ago

It's not using meta refresh. The content is streaming.

zestyping• 8 years ago

If you liked that, you might also enjoy this little hack. How about real-time updates without JavaScript or CSS tricks?

http://zesty.ca/chat

(1999)

sattoshi• 8 years ago

At the bottom it says that it uses JS to not require refreshing after each message. This is not necessary as the form can submit to a frame using the target attribute without refreshing the parent frame.

nine_k• 8 years ago

This is a funny trick, and known for ages, except the CSS-based re-ordering of the incoming info.

It's probably not practical for a chat app (DOM just grows infinitely), but it's a great way to show progress of a longish-running process with a bare minimum of means.

pedalpete• 8 years ago

Compared to using a socket server, how many connections can this server maintain?

teraflop• 8 years ago

Presumably the exact same number. A TCP connection is a TCP connection.

jkarneges• 8 years ago

If anyone wants to delegate streaming HTML connections like this, it should be possible with Fanout (https://fanout.io) which supports arbitrary content.

wybiral9• 8 years ago

It's being flooded with spam now. This is why we can't have nice things.

Anyway, it was just a proof of concept. The spam could be blocking using some captcha or registration if necessary.

MattPearce• 8 years ago

Also no filtering, you can just chuck raw HTML in there

wybiral9• 8 years ago

That's not true. I allowed b, u, i for a while but people kept not closing them so even those are disabled.

mcdirty• 8 years ago

And someone wrote a script to overload it. ~Nice Try~ :D

wybiral9• 8 years ago

Overloading it was failing. But the spam was too much (it was posting so fast you couldn't read anything). I meant for this to just be a fun example of noscript updates so I'm probably not going to add captcha/IP filtering or anything.

People...

dustinsterk• 8 years ago

Never can have nice things......

petagonoral• 8 years ago

interesting that neither chrome or firefox network dev tools can/will show a response for the 'GET' request

Real-time updates without JavaScript

Related Stories