While using Witty with CodeMirror to perform code edits, we discovered that there is a limit to the amount of data that can be transferred at a go. This is probably designed as a security measure to prevent overloading the server. Therefore, there is a need to work around this issue for large files.
The easiest way to work around this is to ensure that all our files are small. For most intents and purposes, this will be the case. I highly doubt that simple applications would require more than 64kB of source code. But just in case there are some super applications out there, we need to figure out a way to fix this.
For uploads, the proper way to fix this would be to write a proper onChange() event handler that will only transmit the delta-changes to the server instead of the entire contents of the editor each time. The server would then need a parser to parse the changes, which should be fairly trivial.
For downloads, the proper way would be to avoid transmitting the entire contents down to the editor via Javascript but to use JQuery to pull the contents into the editor using standard HTTP. The server would just need to dump the contents of the file into a temporary file that is publicly accessible via the web. Something along the lines of the following code:
$.get("/tmp/filename",function(d){cm.setValue(d);});
This will work around most problems except for one, when the file is first downloaded, it also triggers an onChange() event. The way to fix this would be to modify the onChange() event to ignore the first event, or to only plug in the event handler after the file has been loaded into the editor, or to only create the CodeMirror instance after the file has been loaded into a text area.
In the end, we went with the method of preventing onChange() events from triggering the server if the origin of the change is a setValue, which is part of the delta change object created by CodeMirror. We used Javascript to check the condition. Something along the lines of the following code:
cm.on('change',function(e,o){if(o.origin!='setValue'){ ... }});
This ensures that only non setValue changes will be sent to the server, which reduces the traffic to only the delta changes.
0 Comments