Question

I want to make a chat program like Google Wave that shows what is typed in real-time. For the moment I’m just using a textarea. I just want to know what change the user made to the textarea (either one character or pasted text) without having to perform a diff on the whole textarea. I was something along the lines of using a setTimeout with the oninput event but I believe this could only give me the “before text” and the “after text”. Any ideas?

Answer 1

this type of functionality is most likely accomplished using a message batching type setup.

here’s how it would break down:

1. attach event handlers to a text area to track modifications on the character level (think, keydown, keypress, keyup, etc..) and log these into a message buffer

2. you’ll want to have a backup for “end transaction” type events like “onchange”, “onpaste”, etc.. that serve to check the integrity of you’re state and be prepared to run a “full re-sync” (eg. signal other clients to do a full “pull”) if you think you have a mismatch

3. on an interval (every 0.3 – 1 second), you empty the message buffer and re-transmit the messages to other clients (direct connect [websockets?], or indirect via server)

4. when a client receives messages, they process them in the same order they’ve received them [hopefully] ending up with the same state, error or conflict fallback: signal full sync

5. on a full sync client should re-pull the full state and attempt to place the focus/carrot as close to the last position as possible

on a side note: this is greatly simplified with a concept of “regions” where you can do clean full swaps on your region without affecting mine…

hope this helps -ck