使用 google-drive-realtime-api 的多个文本框协作

Question

我正在尝试使用多个文本框进行协作。例如，当 textbox1 在一个 Chrome 浏览器 window 中更改时，另一个 Chrome 浏览器 window 中的 textbox1 也必须更改。当 textbox2 在一个 Chrome 浏览器 window 中发生变化时，另一个 Chrome 浏览器 window 中的 textbox2 也必须发生变化。我修改了 https://developers.google.com/drive/realtime/realtime-quickstart 中提供的现有代码这是我更改后的代码...

Index.html

<!-- Text areas that will be used as our collaborative controls. -->
<input id="editor1" style="width:400px" placeholder="Type some text here..." autofocus><br />
<input id="editor2" style="width:400px" placeholder="Type some text here...">

function initializeModel(model) {
  var string1 = model.createString('Hello Realtime World1!');
  model.getRoot().set('text', string1);
  var string2 = model.createString('Hello Realtime World2!');
  model.getRoot().set('text', string2);
}

function onFileLoaded(doc) {
  var string1 = doc.getModel().getRoot().get('text');
  var string2 = doc.getModel().getRoot().get('text');

  // Keeping one box updated with a String binder.
  var textArea1 = document.getElementById('editor1');
  gapi.drive.realtime.databinding.bindString(string1, textArea1);

  var textArea2 = document.getElementById('editor2');
  gapi.drive.realtime.databinding.bindString(string2, textArea2);

....

当我尝试运行这个应用程序并更改文本框 1 时，文本框 2 也被更改，而在另一个 windows 中，两个文本框都被更改为相同的文本。

请指教...谢谢。

Answer 1

在 initializeModel 中，您正在创建两个 collaborativeString，但将它们都分配给根 "text" 中的同一个键。

稍后您将从 string1 和 string2 的根中获得相同的字符串 "text"：

var string1 = doc.getModel().getRoot().get('text'); var string2 = doc.getModel().getRoot().get('text');

您需要将两个地方的 'text' 之一更改为其他内容。

使用 google-drive-realtime-api 的多个文本框协作

Multiple Text Box collaboration using google-drive-realtime-api

google-drive-realtime-api