作者a0529gox (天啊！)
看板Ajax
標題[問題] 在網頁上實作共同編輯
時間Wed Feb 19 17:36:19 2014
大家好，
我現在在開發一個web應用程式，
其中有個功能是共同編輯，
像是google doc那種多人編輯同一篇文章。
我先附上部份code：
HTML:
<div class="text_content">
/*這是編輯區塊*/
</div>
JavaScript:
/*考量到對Server的負擔，
所以是用keyup event來觸發timeout來
呼叫web socket發送編輯區塊內的文字給每個使用者
*/
var timeout;
function keyUpEvent(){
window.clearTimeout(timeout);
timeout = window.setTimeout(呼叫WebSocket, 2000);
/*使用者打字停下來兩秒後才會呼叫WebSocket*/
}
然後是用
$(".text_content).html(發送的文字);
來覆寫編輯區塊的文字
表達能力好像不是很好QQ
問題來了，
一、會有吃字的問題
可能使用者A打到一半就被使用者B所輸入的內容蓋掉，
一般的話如果每keyup一次就發送應該就可以大幅減少這問題，
只是會嚴重造成server的工作量暴增(？)
二、只要WebSocket把文字傳送來之後，
因為是用html()來修改編輯區塊，
輸入的游標會跳到div的最頂端或者不見，
以上兩個問題有比較好的解決方法嗎？
只求提示，感謝板上的高手們
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 1.171.168.159
※ a0529gox:轉錄至看板 Web_Design 02/19 17:38
1F：→ TonyQ:1. 有個邏輯叫 debounce ，我是這麼處理的。 02/19 19:47
2F：→ TonyQ:2. cursor 是可以控制的，但你得先記住你原本在哪 02/19 19:47
3F：→ TonyQ: 控制 cursor 的技巧有點複雜，自己 google 吧... 02/19 19:48
4F：→ TonyQ:3. 兩人同時編輯時一定會有衝突，就算是 google doc 也會 02/19 19:48
5F：→ TonyQ: 你要想的不會是完美不衝突的解法，而是衝突時怎讓雙方 02/19 19:49
6F：→ TonyQ: 知道該怎麼做。 02/19 19:49
7F：→ TonyQ:我的策略是碰到衝突時就讓晚來的那一方停下來，告訴他有衝突 02/19 19:49
8F：→ TonyQ:他可以選擇繼續編完再處理，或馬上解決這個衝突。 02/19 19:49
9F：→ a0529gox:像我的keyUpEvent這樣的timeout控制算是debounce嗎？ 02/19 21:16
10F：→ a0529gox:還是我的需要在其它地方再引用debounce的概念？ 02/19 21:17
11F：推 mrbigmouth:我做過一個類似的是"以段落"為基礎分開，使用者在按下 02/20 08:57
12F：→ mrbigmouth:enter的瞬間就會開新的段落並只編輯新的段落，舊的段落 02/20 08:57
13F：→ mrbigmouth:則固定下來，要使用者再去點擊才能繼續編輯 02/20 08:58
14F：→ mrbigmouth:同一個段落不可多人同時編輯，但多人可同時編輯不同段 02/20 08:58
15F：→ mrbigmouth:這是比較簡單的作法 02/20 08:58
16F：→ mrbigmouth:這樣websocket就只需要送幾個事件訊息而已 02/20 08:59
17F：→ mrbigmouth:開新段落跟固定舊段落時，有人要編輯段落時 02/20 08:59
18F：→ a0529gox:我原先也有這樣想過，但是enter按下去要讓他不換行 02/20 10:07
19F：→ a0529gox:我實在是查不到方法囧 02/20 10:07
20F：→ a0529gox:而且這樣backspace也會有問題？如果生成的div被刪掉後 02/20 10:14
21F：→ a0529gox:可能會變成cursor在原先兩個div之間的夾縫？ 02/20 10:15
22F：→ a0529gox:以上四行都已解決QQ 02/20 10:45
23F：推 mrbigmouth:enter按下去就讓它換行啊.......幹嘛讓它不換行? 02/20 11:32
24F：→ mrbigmouth:enter後抓html以p分段，最後在原位置插入兩個段落 02/20 11:33
25F：→ mrbigmouth:原段落消失，之後使用者指標插到新段落 02/20 11:33
26F：→ mrbigmouth:backspace在原段落毫無問題，你要編輯之前的段落就只能 02/20 11:33
27F：→ mrbigmouth:靠滑鼠點回去 02/20 11:33
28F：推 tom76kimo:Underscore.js有實作debounce function 02/21 19:46
29F：→ TonyQ:@mrbigmouth 是說那你碰到有含換行字元的貼上怎麼處理 XD 02/22 08:33
30F：→ TonyQ: 另外針對貼上作內容偵測嗎? 02/22 08:33
31F：推 mrbigmouth:沒做處理耶 剛去試了一下 chrome在編輯區域貼上換行 02/22 12:16
32F：→ mrbigmouth:字元時也會自動轉成p 所以之前沒出問題 02/22 12:16
33F：推 mrbigmouth:IE會把r跟n都轉成<br> 一個換行會變成兩個<br>.... 02/22 12:19
34F：→ mrbigmouth:看來要做跨瀏覽器的麻煩還真不少 還好我不用XD 02/22 12:20
35F：→ mrbigmouth:如果要做的話 就是在原本處理p的地方額外處理br跟換行 02/22 12:20
36F：→ mrbigmouth:字元吧 02/22 12:21
37F：→ TonyQ:btw 你的所謂編輯區域是用 contentEditable 對吧? :P 02/23 22:19
38F：推 mrbigmouth:是的 02/24 14:47