Beyond WebSockets: Architecting Multiplayer SaaS with CRDTs

The "Last Write Wins" Catastrophe

In our previous article, we established that WebSockets are overkill for simple, unidirectional notifications. But what happens when you are building a truly collaborative B2B SaaS platform at Smart Tech Devs—like a shared project brief, a real-time Kanban board, or a Figma-style canvas? For multiplayer features, WebSockets are absolutely mandatory.

However, simply opening a WebSocket connection is not enough. If User A and User B are editing the same text document simultaneously, and both send their updated document state to the server via WebSockets, the server will simply save whoever sent their payload last. This is known as "Last Write Wins," and it guarantees that someone's work will be deleted. To architect true live collaboration, we must use Conflict-Free Replicated Data Types (CRDTs).

Enter CRDTs and Yjs

A CRDT is a specialized mathematical data structure. Instead of sending the entire document state back and forth, CRDTs calculate and broadcast the exact mathematical intention of a keystroke (e.g., "Insert the letter 'A' at index 4"). If two users type at the exact same index simultaneously, the CRDT algorithm guarantees that both clients and the server will mathematically converge on the exact same final state without conflicts or data loss.

In the React ecosystem, the gold standard for CRDT implementation is a library called Yjs.

Architecting a Collaborative Editor

Let's look at the high-level architecture of implementing a collaborative text editor using Yjs and a WebSocket provider.

// components/CollaborativeEditor.tsx
"use client";

import { useEffect, useState } from 'react';
import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';

export default function CollaborativeEditor({ documentId }) {
    const [text, setText] = useState('');
    const [yText, setYText] = useState<Y.Text | null>(null);

    useEffect(() => {
        // 1. Initialize the Yjs CRDT Document
        const ydoc = new Y.Doc();
        
        // 2. Define a shared text type on the document
        const sharedText = ydoc.getText('collaborative-textarea');
        setYText(sharedText);

        // 3. Connect to your WebSocket server (e.g., Laravel Reverb or Node)
        // This provider automatically syncs the ydoc with all other connected clients
        const provider = new WebsocketProvider(
            'wss://your-websocket-server.com',
            documentId,
            ydoc
        );

        // 4. Listen for mathematical changes from other clients
        sharedText.observe((event) => {
            // Update the React state when the CRDT state changes
            setText(sharedText.toString());
        });

        return () => {
            provider.disconnect();
            ydoc.destroy();
        };
    }, [documentId]);

    // 5. Handle local user typing
    const handleTyping = (e) => {
        if (!yText) return;
        
        const newString = e.target.value;
        
        // In a production app, you calculate the exact delta (insert/delete).
        // For this example, we overwrite the CRDT, which Yjs elegantly handles.
        yText.delete(0, yText.length);
        yText.insert(0, newString);
    };

    return (
        <textarea 
            value={text} 
            onChange={handleTyping} 
            className="w-full h-64 p-4 border"
            placeholder="Start collaborating..."
        />
    );
}

The Engineering ROI

Building multiplayer features used to require PhD-level distributed systems engineering to handle operational transforms (OT) and conflict resolution. By leveraging Yjs and CRDTs over WebSockets, you offload the complex mathematics of concurrent editing entirely. You guarantee absolute data integrity, zero lost keystrokes, and provide the magical, real-time "Google Docs" experience that premium B2B platforms demand.