Detecting what changed in an HTML Textfield

Question

For a major school project I am implementing a real-time collaborative editor. For a little background, basically what this means is that two(or more) users can type into a document at the same time, and their changes are automatically propagated to one another (similar to Etherpad).

Now my problem is as follows:

I want to be able to detect what changes a user carried out onto an HTML textfield. They could:

• Insert a character
• Delete a character
• Paste a string of characters
• Cut a string of characters

I want to be able to detect which of these changes happened and then notify other clients similar to "insert character 'c' at position 2" etc.

Anyway I was hoping to get some advice on how I would go about implementing the detection of these changes?

My first attempt was to consider the carot position before and after a change occurred, but this failed miserably.

For my second attempt I was thinking about doing a diff on the entire contents of the textfields old and new value. Am I missing anything obvious with this solution? Is there something simpler?

Answer 1

My pseudocode/written out response would be (if I understand your question exactly) to use jQuery to detect keyup events and then save the input to the server via ajax, then also take the response and post it back to the input. This isn't very efficient, but basically the idea is that you're constantly posting and checking what else has been posted. If you want to see what someone else is doing in real time, you can ping the server every second or so and update with the response.

All of this of course can be optimized, but it still is kind of taxing for a server. You could also see if you can implement Google Topeka Wave for your project, or get in touch with Google Topeka to see how they do it :)