
Real-time updates without JavaScript - wybiral
https://harmless.herokuapp.com/
======
EgoIncarnate
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_suffocated
But what?

~~~
lhorie
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

~~~
wybiral
Presumably you'll eventually write something rather than lurking for hours and
then it'll refresh.

~~~
lhorie
I mean, sure, it works just fine if people refrain from doing certain
arbitrary things (such as the scripted spamming that's happening as I write
this), but that's why the grandparent comment said it was a hack and not a
trick that one might want to attempt in production.

~~~
wybiral
The spam had nothing to do with not using Javascript. I could easily have
added a CAPTCHA or required accounts.

------
zestyping
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](http://zesty.ca/chat)

(1999)

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

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

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

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

~~~
wybiral
Thanks. There's a subtle trick where new comments (from streamed updates) have
a CSS animation but comments from the page reload don't. It seems to make it
feel more seamless.

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

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

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

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

------
netgusto
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?

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

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

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

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

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

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

------
dustinsterk
Never can have nice things......

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

~~~
meritt
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](https://www.penny-arcade.com/comic/2004/03/19)

~~~
fwdpropaganda
> 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
Meta refresh has been used with WebCams for ages.

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

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

