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