基于Tiptap的文本编辑器实时JSON内容MongoDB存储性能优化：仅发送变更内容的实现方案咨询

Great question—sending full document payloads every time is definitely a bottleneck, especially with rich text editors like Tiptap/ProseMirror. The good news is that ProseMirror’s built-in Steps mechanism is exactly designed for this problem, and you can absolutely adapt it to work with your MongoDB storage. Let’s break down how to implement this, plus cover alternative approaches and general best practices.

ProseMirror’s Steps are lightweight, serializable objects that describe exactly what changed in a document (e.g., inserting text, deleting a node, modifying a mark). Instead of sending the full JSON, you send these Steps to your backend, which applies them to the existing document in MongoDB. Here’s how to make it work:

Frontend Implementation (Tiptap) #

1. Track Document Version & Pending Steps
   Keep track of the current document version (from your database) and collect Steps as the user edits. Use a debounce timer (your existing 1000ms timeout) to batch multiple Steps into a single request:

   let pendingSteps = [];
   let debounceTimer = null;
   let currentVersion = 0; // Initialize with version from your DB
   
   // Initialize editor with existing document from DB
   const editor = new Editor({
     content: initialDocumentFromDB.content,
     // ... other Tiptap config
   });
   
   editor.on('update', ({ transaction }) => {
     // Only collect Steps if the transaction modified the document
     if (transaction.steps.length > 0) {
       pendingSteps.push(...transaction.steps);
       
       // Reset debounce timer to wait for user to stop typing
       clearTimeout(debounceTimer);
       debounceTimer = setTimeout(() => {
         sendStepsToBackend();
       }, 1000);
     }
   });
   
   function sendStepsToBackend() {
     if (pendingSteps.length === 0) return;
   
     // Serialize Steps to JSON (ProseMirror Steps are serializable)
     const serializedSteps = pendingSteps.map(step => step.toJSON());
   
     fetch('/api/documents/update-steps', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         documentId: 'your-doc-id',
         version: currentVersion,
         steps: serializedSteps
       })
     })
     .then(res => res.json())
     .then(data => {
       if (data.success) {
         currentVersion = data.newVersion;
         pendingSteps = [];
       } else {
         // Handle version conflict (e.g., another user edited the document)
         fetchLatestDocument();
       }
     });
   }
   
   function fetchLatestDocument() {
     fetch('/api/documents/your-doc-id')
     .then(res => res.json())
     .then(doc => {
       editor.commands.setContent(doc.content);
       currentVersion = doc.version;
       pendingSteps = [];
     });
   }
   

Backend Implementation (Node.js + MongoDB) #

You’ll need ProseMirror’s core libraries on the backend to parse and apply Steps. Install them first:

npm install prosemirror-model prosemirror-transform

Then implement the endpoint to apply Steps:

const mongoose = require('mongoose');
const { Schema } = require('prosemirror-model');
const { applySteps } = require('prosemirror-transform');

// Match your frontend's ProseMirror Schema exactly
const proseMirrorSchema = new Schema({
  nodes: {
    doc: { content: 'block+' },
    paragraph: { content: 'inline*' },
    text: { inline: true },
    // Add all your custom nodes (headings, lists, etc.) here
  },
  marks: {
    bold: {},
    italic: {},
    // Add your custom marks here
  }
});

// MongoDB Document Schema
const DocumentSchema = new mongoose.Schema({
  documentId: { type: String, unique: true },
  content: Object, // Stores ProseMirror's JSON document
  version: { type: Number, default: 0 }
});
const Document = mongoose.model('Document', DocumentSchema);

// Endpoint to apply Steps
app.post('/api/documents/update-steps', async (req, res) => {
  const { documentId, version, steps } = req.body;

  try {
    // Fetch the current document from DB
    const doc = await Document.findOne({ documentId });
    if (!doc) return res.status(404).json({ success: false, message: 'Document not found' });

    // Check for version conflicts (prevents overwriting concurrent edits)
    if (doc.version !== version) {
      return res.status(409).json({ success: false, message: 'Version conflict' });
    }

    // Convert DB's JSON to a ProseMirror Document
    const pmDoc = proseMirrorSchema.nodeFromJSON(doc.content);
    // Convert serialized Steps back to ProseMirror Step objects
    const pmSteps = steps.map(step => proseMirrorSchema.stepFromJSON(step));

    // Apply Steps to the document
    const { doc: updatedPmDoc } = applySteps(pmDoc, pmSteps);

    // Update DB with the new document and increment version
    await Document.updateOne(
      { documentId, version },
      {
        content: updatedPmDoc.toJSON(),
        version: version + 1
      }
    );

    res.json({ success: true, newVersion: version + 1 });
  } catch (err) {
    res.status(500).json({ success: false, message: err.message });
  }
});

If you’d rather avoid ProseMirror’s backend dependencies, you can add UUIDs to each node in your Tiptap editor and use MongoDB’s $set operator to update only changed nodes. However, this has caveats:

• Pros: No need for ProseMirror on the backend.
• Cons:
  • You’ll need to recursively traverse the document tree to find nodes by UUID (slow for large documents).
  • Doesn’t handle structural changes well (e.g., moving a node from one parent to another requires updating parent node children lists).

To implement this:

1. Add a uuid attribute to all your Tiptap nodes (use a custom extension to auto-generate UUIDs on node creation).
2. Track changed nodes in the frontend (compare the current document with the last saved state).
3. Send only the changed nodes’ UUIDs and updated content to the backend.
4. Use MongoDB’s $set with dot notation to update specific nodes (e.g., $set: { "content.content.2": updatedNode }).

If the Steps approach feels too complex, here are simpler alternatives for production:

• Batch Full Updates: Instead of sending every keystroke, send the full document every 5-10 seconds (or after a certain number of edits). This balances performance and complexity.
• Compress Payloads: Use JSON compression (e.g., pako in the frontend) to reduce the size of full document payloads.
• Cache Frequently Accessed Documents: Use Redis or MongoDB’s built-in caching to avoid fetching the full document from disk every time you need to apply Steps.

• Version Conflicts: When the backend detects a version mismatch (another user edited the document while the current user was typing), you can either:
  1. Automatically merge the user’s edits with the latest document (using ProseMirror’s merge capabilities).
  2. Notify the user and ask them to refresh or merge manually.
• Corrupted Steps: Add validation on the backend to ensure Steps are valid before applying them. If Steps fail to apply, fall back to fetching the latest document and asking the user to re-apply their edits.

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