如何僅用JavaScript實現實時協作文本編輯器
你沒看錯。我開發了一款類似Google Docs的協作編輯器，能夠實時同步多瀏覽器端的編輯內容——完全基于JavaScript實現，無需服務器后端、不依賴WebSocket、零框架加持。這聽起來像魔法，但背后的核心技術是被低估的WebRTC。
1. 為什么選擇無后端實時編輯器
你是否也曾有過那種"理論上行不通但就是念念不忘"的想法？我的執念是：
「"能否僅用純JavaScript打造類似Google Docs的編輯器...完全不需要后端？"」
我不想用Firebase，不想碰Node.js，更不想搞Redis發布訂閱或CRDT數據庫。我只要兩個瀏覽器標簽頁——哪怕在不同設備上——能同時編輯同一份文檔，并神奇地同步變更。
最終發現，WebRTC + BroadcastChannel + 操作轉換(OT) 就是完美解決方案。
2. 架構設計：如何實現無服務器同步？
我的架構方案如下：
┌────────────┐ BroadcastChannel ┌────────────┐
│ 標簽頁A │ ─────────────────────────? │ 標簽頁B │
│ localhost │ ?───────────────────────── │ localhost │
└────────────┘ └────────────┘
? ?
WebRTC WebRTC
? ?
終端A <──────────────────────────> 終端B核心技術組件：
- WebRTC：實現跨設備的點對點連接
- BroadcastChannel：同步同一設備不同標簽頁的編輯
- 操作轉換(OT)：解決編輯沖突問題
最神奇的是——只要允許WebRTC使用不安全源（或用Python的http.server托管）——這套方案甚至能在file://協議下運行。
3. 搭建基礎文本編輯器
從最簡單的HTML+JavaScript編輯器開始：
<textarea id="editor" rows="20" cols="80">你好，世界！</textarea>
<script>
const editor = document.getElementById("editor");
</script>添加變更監聽和廣播功能：
editor.addEventListener("input", () => {
const content = editor.value;
broadcastChange(content);
});4. 通過BroadcastChannel實現標簽頁同步
這是最簡單的同步方案：
const channel = new BroadcastChannel("collab_editor");
function broadcastChange(content) {
channel.postMessage({ type: "update", content });
}
channel.onmessage = (e) => {
if (e.data.type === "update") {
editor.value = e.data.content;
}
};現在打開兩個標簽頁，一處修改會實時同步到另一處——完全無需后端支持。??
但僅限于同設備，接下來我們要實現跨設備同步。
5. 通過WebRTC連接遠程瀏覽器
WebRTC讓瀏覽器直接通信（經過簡短的信號交換后無需服務器中轉）。我們使用零依賴的simple-peer庫：
<script src="https://unpkg.com/simple-peer/simplepeer.min.js"></script>
let peer = newSimplePeer({
initiator: location.hash === "#host",
trickle: false
});
peer.on("signal", data => {
document.getElementById("signal").value = JSON.stringify(data);
});
document.getElementById("connect").onclick = () => {
let remoteData = JSON.parse(document.getElementById("remote").value);
peer.signal(remoteData);
};
peer.on("connect", () => {
console.log("?? 遠程連接成功！");
});
peer.on("data", data => {
let msg = JSON.parse(data);
if (msg.type === "update") {
editor.value = msg.content;
}
});
functionbroadcastChange(content) {
if (peer.connected) {
peer.send(JSON.stringify({ type: "update", content }));
}
}添加信號交換UI：
<textarea id="signal" placeholder="你的信號數據"></textarea>
<textarea id="remote" placeholder="粘貼對方的信號數據"></textarea>
<button id="connect">連接</button>現在設備A將信號數據發給設備B，點擊連接——編輯內容就能通過互聯網同步了，全程無需服務器。
6. 使用操作轉換解決編輯沖突
當兩人同時編輯時會出現覆蓋問題，我們需要實時合并修改。這就是**操作轉換(OT)**的價值：
<script src="https://unpkg.com/ot/lib/ot.min.js"></script>
let doc = new ot.Document(editor.value);
editor.addEventListener("input", () => {
const oldValue = doc.text;
const newValue = editor.value;
const operation = ot.TextOperation.fromDiff(oldValue, newValue);
doc = doc.apply(operation);
const message = JSON.stringify({
type: "ot",
operation: operation.toJSON()
});
peer.send(message);
});
peer.on("data", data => {
let msg = JSON.parse(data);
if (msg.type === "ot") {
const op = ot.TextOperation.fromJSON(msg.operation);
doc = doc.apply(op);
editor.value = doc.text;
}
});現在編輯操作會智能合并，而非簡單覆蓋，實現了完整的并發控制。
7. 通過LocalStorage實現自動保存
為防止內容丟失，添加簡易自動保存：
setInterval(() => {
localStorage.setItem("autosave", editor.value);
}, 1000);
window.onload = () => {
const saved = localStorage.getItem("autosave");
if (saved) editor.value = saved;
};雖然簡陋，但免費且支持離線工作。
8. 單文件部署方案
整個應用——包含文本編輯器、P2P網絡、自動保存和并發控制——只需單個HTML文件：
editor.html # 在多個標簽頁或設備中打開即可可部署在任何平臺：GitHub Pages、Netlify，甚至python3 -m http.server。
沒有后端、無需數據庫、零月租費用。
反思：這改變了我的協作工具開發觀
曾經我以為實時應用必須依賴Firebase、復雜的WebSocket邏輯或分布式系統專家。但這次實踐讓我明白：
「現代瀏覽器的能力令人震驚，而大多數開發者只觸及了皮毛」
僅用原生JavaScript，你就能打造媲美Google Docs的實時協作應用。這套方案現已應用在我的結對編程工具、實時代碼審查面板甚至AI代理調試器中。
進階建議：若想達到Google Docs級別，可添加：
- 通過
contentEditable實現富文本編輯 - 用
position元數據顯示協作者光標 - WebRTC失敗時的云端回退方案
- 通過Yjs或Automerge實現CRDT支持
稍加擴展，你的周末項目就能達到生產級水準。
原文鏈接：https://medium.com/javascript-in-plain-english/how-i-built-a-real-time-collaborative-text-editor-using-javascript-and-no-backend-f76190efee6e 作者：Suleman safdar
