[問題] 在網頁上實作共同編輯

看板Ajax作者 (天啊！)時間10年前 (2014/02/19 17:36), 編輯推噓6(6推 0噓 32→)
留言38則, 4人參與, 最新討論串1/1
大家好， 我現在在開發一個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
→
02/19 19:47, , 1F
1. 有個邏輯叫 debounce ，我是這麼處理的。
02/19 19:47, 1F
→
02/19 19:47, , 2F
2. cursor 是可以控制的，但你得先記住你原本在哪
02/19 19:47, 2F
→
02/19 19:48, , 3F
控制 cursor 的技巧有點複雜，自己 google 吧...
02/19 19:48, 3F
→
02/19 19:48, , 4F
3. 兩人同時編輯時一定會有衝突，就算是 google doc 也會
02/19 19:48, 4F
→
02/19 19:49, , 5F
你要想的不會是完美不衝突的解法，而是衝突時怎讓雙方
02/19 19:49, 5F
→
02/19 19:49, , 6F
知道該怎麼做。
02/19 19:49, 6F
→
02/19 19:49, , 7F
我的策略是碰到衝突時就讓晚來的那一方停下來，告訴他有衝突
02/19 19:49, 7F
→
02/19 19:49, , 8F
他可以選擇繼續編完再處理，或馬上解決這個衝突。
02/19 19:49, 8F
→
02/19 21:16, , 9F
像我的keyUpEvent這樣的timeout控制算是debounce嗎？
02/19 21:16, 9F
→
02/19 21:17, , 10F
還是我的需要在其它地方再引用debounce的概念？
02/19 21:17, 10F
推
02/20 08:57, , 11F
我做過一個類似的是"以段落"為基礎分開，使用者在按下
02/20 08:57, 11F
→
02/20 08:57, , 12F
enter的瞬間就會開新的段落並只編輯新的段落，舊的段落
02/20 08:57, 12F
→
02/20 08:58, , 13F
則固定下來，要使用者再去點擊才能繼續編輯
02/20 08:58, 13F
→
02/20 08:58, , 14F
同一個段落不可多人同時編輯，但多人可同時編輯不同段
02/20 08:58, 14F
→
02/20 08:58, , 15F
這是比較簡單的作法
02/20 08:58, 15F
→
02/20 08:59, , 16F
這樣websocket就只需要送幾個事件訊息而已
02/20 08:59, 16F
→
02/20 08:59, , 17F
開新段落跟固定舊段落時，有人要編輯段落時
02/20 08:59, 17F
→
02/20 10:07, , 18F
我原先也有這樣想過，但是enter按下去要讓他不換行
02/20 10:07, 18F
→
02/20 10:07, , 19F
我實在是查不到方法囧
02/20 10:07, 19F
→
02/20 10:14, , 20F
而且這樣backspace也會有問題？如果生成的div被刪掉後
02/20 10:14, 20F
→
02/20 10:15, , 21F
可能會變成cursor在原先兩個div之間的夾縫？
02/20 10:15, 21F
→
02/20 10:45, , 22F
以上四行都已解決QQ
02/20 10:45, 22F
推
02/20 11:32, , 23F
enter按下去就讓它換行啊.......幹嘛讓它不換行?
02/20 11:32, 23F
→
02/20 11:33, , 24F
enter後抓html以p分段，最後在原位置插入兩個段落
02/20 11:33, 24F
→
02/20 11:33, , 25F
原段落消失，之後使用者指標插到新段落
02/20 11:33, 25F
→
02/20 11:33, , 26F
backspace在原段落毫無問題，你要編輯之前的段落就只能
02/20 11:33, 26F
→
02/20 11:33, , 27F
靠滑鼠點回去
02/20 11:33, 27F
推
02/21 19:46, , 28F
Underscore.js有實作debounce function
02/21 19:46, 28F
→
02/22 08:33, , 29F
@mrbigmouth 是說那你碰到有含換行字元的貼上怎麼處理 XD
02/22 08:33, 29F
→
02/22 08:33, , 30F
另外針對貼上作內容偵測嗎?
02/22 08:33, 30F
推
02/22 12:16, , 31F
沒做處理耶 剛去試了一下 chrome在編輯區域貼上換行
02/22 12:16, 31F
→
02/22 12:16, , 32F
字元時也會自動轉成p 所以之前沒出問題
02/22 12:16, 32F
推
02/22 12:19, , 33F
IE會把r跟n都轉成<br> 一個換行會變成兩個<br>....
02/22 12:19, 33F
→
02/22 12:20, , 34F
看來要做跨瀏覽器的麻煩還真不少 還好我不用XD
02/22 12:20, 34F
→
02/22 12:20, , 35F
如果要做的話 就是在原本處理p的地方額外處理br跟換行
02/22 12:20, 35F
→
02/22 12:21, , 36F
字元吧
02/22 12:21, 36F
→
02/23 22:19, , 37F
btw 你的所謂編輯區域是用 contentEditable 對吧? :P
02/23 22:19, 37F
推
02/24 14:47, , 38F
是的
02/24 14:47, 38F
‣ 更多 a0529gox 的文章
文章代碼(AID): #1J17iLmj (Ajax)