1

I'm making a collaborative editor for websites, much like Google Docs, but it's built for coding and development. I want to allow multiple users to edit a file at the same time, and push their changes both to the server and the other person viewing the file. How could I do this?

I can't figure out how to synchronize the data between users. The code I have right now is as follows:
AJAX in JS:

function update(f, txt){
   $.ajax({
     type: 'POST',
     data: {text: txt, file: f},
     url: "save.php",
   });
}

save.php:

$file = $_POST['file'];
$contents = $_POST['text'];
file_put_contents(dirname(__FILE__) . "/preview" . "/" . $file,$contents);
Drew
  • 11
  • 2
  • What code have you tried to resolve the inquiry? – guest271314 Sep 24 '17 at 15:33
  • My current code has it that it updates the file every so often while one of the users is typing, but I have nothing to handle grabbing and syncing this data through multiple clients that have it open, which is why I'm here. I'll post some of the code I have though – Drew Sep 24 '17 at 15:48
  • Real time updates will require you to call `setTtimeout` in javascript to update what someone else may have edited. – Robert Sep 24 '17 at 15:58

1 Answers1

1

You can use EventSource to stream data from server to browser or WebSocket to stream data both to server and from server. That is, each client receives the stream of the file continuously, see for example How to read and echo file size of uploaded file being written at server in real time without blocking at both server and client?.

plnkr provides a real time sharing option and is open source. Consider locating and reading the code for that application and adjusting for what you are trying to achieve.

guest271314
  • 1
  • 15
  • 104
  • 177
  • @Drew `WebRTC` or browser extensions are also options that you can try, see [Method for streaming data from browser to server via HTTP](https://stackoverflow.com/q/35899536/) – guest271314 Sep 24 '17 at 16:09
  • 1
    I'd like to stay away from browser extensions, it creates an extra step for the user to take to use the service – Drew Sep 24 '17 at 16:14
  • @Drew If the the application is "built for coding and development" the "extra step" of a browser extension should not be an issue for the client. There are several options available which can meet requirement, including `git` at the commandline and, or using [GitHub](https://github.com); or utilizing `http/2` at server. What issues are you having with the current code? – guest271314 Sep 24 '17 at 16:16
  • @Drew Given the code at Question you presently can stream the resulting file to each client as `"text/event-stream"` from server and get the stream using `EventSource` `message` event. At client you can use `ReadableStream`, `WritableStream` and possibly `TransformStream` to process the stream from server to re-build the file. – guest271314 Sep 24 '17 at 16:23
  • @Drew Have you read the links at "Related" at the current page, for example https://stackoverflow.com/questions/5086699/real-time-collaborative-editing-how-does-it-work?rq=1 ? – guest271314 Sep 24 '17 at 16:34