# Membangun Real-Time Collaborative Editor dengan React dan WebSocket > Diterbitkan oleh Literally Web ID pada 21 Oct 2026 > Sumber: https://literally.web.id/articles/membangun-real-time-collaborative-editor-dengan-react-dan-websocket --- ## 1. Titik Aular Masalah: Mengapa Arsitektur Lama Sering Ambruk di Produksi Ingat malam-malam panjang ketika klien komplain dokumen kolaboratif mereka mendadak *overwrite* data satu sama lain layaknya zaman batu? Ya, saya juga pernah mengalaminya. Dulu, kita terlalu naif mengandalkan HTTP polling atau request REST biasa setiap kali tombol *Save* ditekan. Pendekatan itu terasa baik-baik saja di lingkungan *localhost* dengan ping 2ms, namun langsung berubah menjadi mimpi buruk begitu ribuan pengguna di seluruh penjuru negeri mencoba mengetik secara bersamaan pada detik yang sama. Masalah utamanya terletak pada latensi dan kurangnya komunikasi dua arah yang persisten. Ketika dua orang mengubah baris yang sama, server kebingungan menentukan siapa pemenangnya. Hasilnya? Pekerjaan berjam-jam lenyap akibat *race condition* yang kejam. Di sinilah kita sadar bahwa arsitektur request-response konvensional sudah kadaluarsa untuk kebutuhan aplikasi real-time interaktif. Kita butuh terowongan data yang terbuka secara konstan, efisien, dan tahan banting. Dan dari situlah perjalanan kita menuju arsitektur WebSocket yang kokoh dimulai, membawa kita langsung ke dapur pacu bagaimana data benar-benar mengalir tanpa sihir, melainkan dengan rekayasa sistem yang presisi. ## 2. Di Balik Layar: Bagaimana Sistem Ini Bekerja Tanpa Sihir Begitu kita sepakat meninggalkan metode polling, kita memasuki ranah protokol WebSocket. Bayangkan WebSocket bukan sebagai serangkaian surat pos yang harus dikirim dan dibuka satu-satu, melainkan sebuah sambungan telepon analog yang diangkat terus-menerus. Sekali *handshake* HTTP terjadi di awal, gerbang langsung beralih ke protokol TCP murni yang *full-duplex*. Klien bisa berteriak mengirim data ke server, dan pada detik yang sama server bisa membalasnya tanpa jeda. Namun, memiliki pipa data yang cepat saja belum cukup jika isinya saling bertabrakan. Di sinilah jantung dari sistem kolaborasi modern berdetak: manajemen konflik. Alih-alih menggunakan *Locking* tradisional yang membuat dokumen terkunci saat satu orang mengetik—yang mana sangat menyebalkan bagi pengguna lain—kita menggunakan pendekatan ajaib bernama CRDT (*Conflict-free Replicated Data Types*). Tanpa perlu algoritma konsensus yang berat seperti Paxos atau Raft di setiap ketukan huruf, CRDT memastikan bahwa setiap perubahan lokal dicatat sebagai struktur data matematis yang komutatif. Artinya, urutan kedatangan paket data dari jaringan yang berbeda tidak akan mengubah hasil akhir dokumen. Siapa pun yang menerima paket, gabungkan saja, dan hasilnya dijamin akan persis sama di semua layar klien. Dari pemahaman fundamental ini, kita di masa lalu sering dihadapkan pada persimpangan jalan krusial: teknologi mana yang benar-benar layak masuk ke dalam *stack* produksi kita? ## 3. Pilihan Pendekatan & Kompromi yang Harus Diambil Memilih perkakas tempur untuk membangun editor real-time adalah seni berkompromi antara kompleksitas implementasi, latensi jaringan, dan beban memori server. Di ranah komunikasi real-time, kita sering dihadapkan pada pilihan antara murni **Node.js dengan WebSockets standar** berbalut library `ws`, atau menggunakan platform managed seperti **Ably** atau **Pusher**. * **Pendekatan Mandiri (Self-Hosted Node.js + Redis Adapter):** Memberikan kontrol penuh atas data, latensi minimal jika ditempatkan di *edge* yang tepat, namun menuntut keringat ekstra dalam hal *scaling*, manajemen memori, dan penanganan koneksi putus-putus. * **Pendekatan Pihak Ketiga (Managed Service):** Cepat dideploy, skalabilitas instan tanpa pusing mikirin load balancer, namun berbiaya tinggi saat *traffic* meledak dan memiliki ketergantungan vendor (*vendor lock-in*). Untuk studi kasus kita kali ini, kita akan memilih jalan ksatria: **Self-Hosted Node.js WebSocket Server** yang dipadukan dengan **Redis Pub/Sub** untuk menangani *horizontal scaling* lintas cluster, serta pustaka CRDT **Yjs** di sisi frontend React. Kompromi ini dipilih karena memberikan efisiensi biaya tertinggi dan kontrol arsitektur yang mutlak. Sebelum mulai menulis baris kode pertama, mari kita siapkan fondasi infrastruktur dasarnya terlebih dahulu. ## 4. Meracik Lingkungan: Persiapan & Prasyarat Lapangan Sebelum kita menyentuh kode React, pastikan fondasi di sisi peladen sudah berdiri tegak. Kita asumsikan Anda menggunakan VPS berbasis Linux (Ubuntu 22.04 LTS) di balik reverse proxy **Nginx** dengan domain ber-SSL dari **Let's Encrypt**. Jangan lupa, WebSocket sangat sensitif terhadap pemutusan koneksi oleh *idle timeout* Nginx, jadi kita perlu menyetel konfigurasi *proxy* dengan benar. Mari kita intip konfigurasi blok server Nginx (`/etc/nginx/sites-available/collaborative-editor`) yang sudah di-tuning untuk menangani *upgrade* koneksi WebSocket secara mulus: ```nginx map $http_upgrade $connection_upgrade { default upgrade; '' close; } server { listen 443 ssl http2; server_name editor.internaldomain.com; ssl_certificate /etc/letsencrypt/live/editor.internaldomain.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/editor.internaldomain.com/privkey.pem; location /socket.io/ { proxy_pass http://127.0.0.1:4000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; proxy_set_header Host $host; # Timeout krusial agar koneksi WebSocket tidak terputus prematur proxy_read_timeout 86400s; proxy_send_timeout 86400s; } } ``` > [!IMPORTANT] > Pastikan direktif `proxy_read_timeout` diset minimal 86400 detik (24 jam). Tanpa konfigurasi ini, Nginx akan memutus koneksi WebSocket secara sepihak setiap kali klien berada dalam status diam (*idle*) selama 60 detik. Setelah gerbang Nginx siap, mari kita masuk ke inti implementasi di mana kode mulai berbicara dan menyatukan semua potongan puzzle ini. ## 5. Langkah Implementasi: Membangun Solusi yang Tangguh Kita mulai dari sisi backend Node.js. Server ini bertugas bukan hanya sebagai penerima pesan, melainkan sebagai *relay* pintar yang menggunakan Yjs untuk menyinkronkan *state* dokumen antar pengguna yang terhubung ke *room* yang sama. Berikut adalah implementasi minimalis namun tangguh untuk server WebSocket kita menggunakan `ws` dan `y-websocket/bin/utils`: ```javascript const http = require('http'); const { WebSocketServer } = require('ws'); const { setupWSConnection } = require('y-websocket/bin/utils'); const server = http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Collaborative Editor WebSocket Server is running.\n'); }); const wss = new WebSocketServer({ noServer: true }); wss.on('connection', (conn, req) => { // Menghubungkan koneksi client ke manajemen Yjs room setupWSConnection(conn, req, { gc: true, // Garbage collection aktif untuk efisiensi memori }); }); server.on('upgrade', (request, socket, head) => { wss.handleUpgrade(request, socket, head, (ws) => { wss.emit('connection', ws, request); }); }); const PORT = process.env.PORT || 4000; server.listen(PORT, () => { console.log(`[Server] WebSocket engine running on port ${PORT}`); }); ``` Di sisi klien React, kita menggunakan *hook* untuk menginisialisasi dokumen Yjs dan menghubungkannya melalui provider WebSocket. Mari kita bedah implementasi komponen editor yang bersih dari kebocoran memori (*memory leak*). ## 6. Membedah Baris Kode Krusial yang Kerap Menjebak Bagian paling krusial dalam integrasi React dengan WebSocket berbasis CRDT adalah bagaimana kita mengelola siklus hidup (*lifecycle*) koneksi agar tidak terjadi *re-rendering* berlebihan atau duplikasi *listener* saat komponen mengalami *unmount*. Perhatikan cuplikan *custom hook* React berikut yang menangani sinkronisasi Yjs dengan editor teks (misalnya menggunakan Textarea sederhana atau integrasi Quill/TipTap): ```jsx import React, { useEffect, useState } from 'react'; import * as Y from 'yjs'; import { WebsocketProvider } from 'y-websocket'; export default function CollaborativeEditor({ roomId }) { const [content, setContent] = useState(''); const [status, setStatus] = useState('connecting'); useEffect(() => { // Inisialisasi dokumen Yjs lokal const ydoc = new Y.Doc(); const provider = new WebsocketProvider('ws://localhost:4000', roomId, ydoc); const yText = ydoc.getText('codetips-editor'); provider.on('status', event => { setStatus(event.status); // 'connected' atau 'disconnected' }); // Sinkronisasi perubahan dari Yjs ke React State yText.observe(event => { setContent(yText.toString()); }); // Cleanup saat komponen ditutup return () => { yText.unobserve(); provider.destroy(); ydoc.destroy(); }; }, [roomId]); const handleChange = (e) => { const value = e.target.value; setContent(value); // Catatan: Dalam implementasi nyata dengan Tiptap/Quill, // kita memetakan perubahan delta langsung ke Yjs doc. }; return (
Status: {status}