基于ngx-quill与Socket.io的协作文档应用无限循环问题求助

问题根源分析 #

你的无限循环问题核心在于：本地编辑器通过API更新内容时，会触发onEditorChanged事件，导致代码再次向服务器发送变更，形成循环。另外还存在两处代码细节错误需要修正。

具体修复方案 #

1. 过滤非用户触发的变更事件

在handleChange中添加源检查，只处理用户手动编辑产生的变更（忽略API触发的更新）：

handleChange(event: any): void {
  // 仅处理本地用户手动发起的变更，跳过API/静默更新
  if (!event.content || event.source !== 'user') return;
  
  console.log(event);
  this.currentDocument.content = event.content;
  // 修正socket事件名，与服务器监听的名称一致
  this.socket.emit('modify-document', this.currentDocument._id, JSON.stringify(event.content.ops));
}

2. 修正Socket事件名不匹配问题

客户端当前发送的事件名为modifydocument，但服务器监听的是modify-document（带连字符），导致服务器无法正确接收变更。上面的代码已经将客户端事件名修正为modify-document，保持与服务器一致。

3. 正确传递Delta对象给Quill编辑器

服务器转发的是ops数组，但Quill的updateContents方法需要接收完整的Delta对象（包含ops属性）。修改接收远程变更的代码：

receiveLiveDocumentChanges(): void {
  this.socket.on('add-document-changes', (documentChanges) => {
    const ops = JSON.parse(documentChanges);
    console.log(ops);
    // 将ops数组包装为合法的Delta对象
    this.quillEditor.updateContents({ ops: ops }, 'api');
    this.currentDocument.content = { ops: ops };
  });
}

为什么这些修复有效 #

• 源检查：Quill会为不同触发方式的变更标记source属性：用户手动编辑为user，API调用为api，静默更新为silent。通过过滤source !== 'user'的事件，避免将远程同步的变更再次发送回服务器。
• 事件名匹配：确保服务器能正确接收客户端的变更请求并转发给其他用户。
• 合法Delta对象：Quill的updateContents要求传入标准Delta结构，否则会导致编辑器行为异常。

内容的提问来源于stack exchange，提问作者William Pattison