作者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