You are probably rudely loyal. The site knows where your viewport is and loads only the part that is visible in 16 char pieces. DB just saves the char strings with x and y coordinates. You can see its update in 1x16 blocks if you drag it quickly.
As for sending, if it were me, I would cache the text and send only one 16 char "piece" at a time. Each time a change occurs, check to see if it is in the same fragment as the last. If you don’t send the last fragment and start caching a new one.
To refresh the view, you can check it for changes in the viewport by sending an ajax request every couple of seconds using window.setInterval() . It can send multiple JSON or something only with pieces that have changes, possibly encoded with their location in the grid in the first few characters.
I just vouch here, I didn’t look at the code, but you're right. Its a fascinating site.
EDIT: More info ...
Check out the init() function (line 906 in yourworld.js). This is the best entry point if you want to learn the code. You can see how editing on line keydown works. The keydown script focuses on a hidden input element that catches text. It then uses the callback to setInterval to retrieve the first character from the input field every 10 ms, and then the empty field. If there is a char, then it becomes cached in the array and placed in the active cell in the grid. He says in a comment that this prevents pasting.
An array of changes is sent every two seconds (line 1017). Each input character is sent with a position and timestamp.
fetchUpdates() handles the receipt of updated cells from the server (line 383). It contains a jQuery.ajax request with a success callback to a function that makes the necessary changes and calls fetchUpdates() again after 1 second of setTimeout() .
source share