We started out by making an EventSource endpoint and using JS EventSource object to get updates. Seemed to work great.
Pushed it live.
To everyone on the site. Not just to the people on /l/place. Oops. Mistake #1.
Mistake #2: I was aware that Arc kills threads that take longer than 30 seconds, but I was unaware that EventSource automatically tries to reconnect. Welcome to the DoS party.
With no way to tell the clients to stop. Mistake #3.
It was only live for about 10 minutes, but it took around two hours before the last few clients finally refreshed their browser and stopped DoSing the endpoint. The server absorbed the extra traffic like a champ, but the server logs were ridiculous for about an hour. Lots of "client took too long" error messages spit out by Arc every second.
Sooo yeah, submitting changes via JS is easy. Getting updates is the hard part.
Could poll. But then that's still hammering the server. Moreso than it already is.
It's probably a feature that it's painful to use. Only the determined will use it for art.
That said, if anyone has ideas for how to tweak arc for performance for this scenario – and remember to calculate how much memory is used by how many simultaneous sockets are open – I'd be willing to try again.
> I was aware that Arc kills threads that take longer than 30 seconds...
> Sooo yeah, submitting changes via JS is easy. Getting updates is the hard part.
That's why I suggested a post request...
Just deliver the page and create an api end point, on the server, that gives you the last x changes from the change log.
With that ajax request, you could return these net updates for the client and use client side js to apply them to the dom. You could even create a trivial js debounce[1] algo to throttle requests if you wanted to go even further.
why not go all the way and render client-side in a canvas as well?
As it is, the more "pixels" you have, the slower the page loads. You could probably have just a single canvas and a single event handler.
You could preserve functionality for non-js users by using an imagemap (assuming browsers still even support those) or sticking the existing code in noscript tags.
OK... I don't know where I got "single event handler from," that obviously wouldn't be true, but it would still be simpler than having each pixel be a separate HTML form....
Let me actually see if I can come up with a POC first, at least for the canvas and javascript. Realistically, since it's just GET requests that don't need authentication, I shouldn't even need laarc running, I can just send the same requests by AJAX.
>This is where js would be handy - right? Personally I would just update the dom element and send a http post in the background.
If it's to be done in JS, might as well implement a drawing tool in an actual canvas element.
I've seen tutorials that are reasonably simple. The complicated part would be actually saving it. It is possible to export a canvas as a png and upload it with an AJAX request but I don't know how cross-browser compatible that is.
I will say; I did a page reload and noticed the color pick was still in place and had to go hunt for the x. I expected it to reset, but I'm not sure if you see that as a bug or a feature :)
also, it looks like the client side is pure js... Is Lumen not up to that task? just curious if you tried that as it might be nice if, someday, we could get to the point where this kind of stuff could be done in arc.
