7-3 齐心协力-开发多人协作编辑器

技能补强齐心协力——开发多人协作编辑器汇报人：xxx时间：2026技能知识011.WebSocket技能知识（1）WebSocket简介WebSocket是一种在单个TCP（TransmissionControlProtocol，传输控制协议）连接上进行全双工通信的协议，允许客户端和服务器之间进行实时数据交换。与传统的HTTP请求不同，WebSocket提供持久化的连接，适合需要实时通信的场景，如多人协作编辑器。（2）实时通信在多人协作编辑器中，WebSocket用于实时同步用户的编辑内容。通过WebSocket，服务器可以广播每个用户的编辑操作，确保所有用户的编辑器内容保持一致。实现方式如下。实现方式：①客户端通过WebSocket向服务器发送编辑操作。②服务器接收操作后，广播给其他客户端。③客户端收到广播后，更新本地编辑器内容。2.数据同步机制通过WebSocket实时同步编辑内容，将用户的编辑操作迅速传递给服务器和其他客户端，便于后续在服务器或客户端上应用OT算法来处理操作冲突，确保文档的一致性，可以看作OT的一种简化实现。若对此算法感兴趣，可以向AI助手提问并了解如何确保多个用户在不同时间对同一文档进行的修改能够正确合并。3.编辑器的基本构成技能知识（1）文本操作①HTMLEditingAPIs通过document.execCommand()方法，我们可以实现对文本的格式化操作，如设置加粗、斜体、下划线、对齐方式等。这些操作直接修改DOM结构，适用于富文本编辑器。常用命令如下。bold：将文本设置为加粗样式。italic：使文本呈现斜体效果。underline：为文本添加下划线。justifyLeft、justifyCenter、justifyRight：设置文本左对齐、居中对齐或右对齐。②SelectionAPIwindow.getSelection()

用于获取用户选中的文本内容，结合

Range

对象，我们可以进行对选中文本的精确操作，如剪切、复制、粘贴等。核心功能如下。获取选中文本的范围和内容。对选中文本进行操作（如插入、删除、格式化）。

（2）用户权限管理通过WebSocket实现简单的锁定机制，确保同一时间只有一个用户可以编辑特定内容。当用户获得锁定时，其他用户无法编辑该内容，避免冲突。实现方式如下。①客户端请求锁定时，服务器检查内容是否已被锁定。②如果未被锁定，则设置锁定状态并广播给其他客户端。③锁定状态下，其他客户端无法编辑内容。具体示例代码如下：4.剪贴板功能的安全考量技能知识ClipboardAPIandEvents使用navigator.clipboard.writeText()和navigator.clipboard.readText()实现安全的复制和粘贴功能。这些API提供了对剪贴板的直接访问，同时遵循浏览器的安全策略。安全问题：剪贴板操作可能涉及敏感数据，因此浏览器对剪贴板的访问进行了严格限制。只有在用户主动触发的事件（如单击按钮）中，才能访问剪贴板内容。（1）撤销与重做通过维护undoStack和redoStack，实现编辑器的撤销和重做功能。每次用户输入时，当前编辑器的状态会被压入undoStack，进行撤销操作时从栈中恢复之前的状态。（2）冲突解决在多人协作编辑器中，冲突解决是一个重要问题。虽然目前代码中没有实现复杂的冲突解决机制，但通过WebSocket实时同步内容，可以避免大部分可能存在的冲突。2.数据同步机制技能实践021.准备工作技能实践（1）确保已经安装了Node.js创建一个项目目录并初始化Node.js项目。

mkdircollaborative-editor cdcollaborative-editor npminit-y（2）安装所需的依赖库。

npminstallws npminstall-glocaltunnelws：用于创建WebSocket服务器。localtunnel：用于将本地服务器暴露到公网，方便多人协作。（3）新建文件。 在根目录下新建WebSocket服务器的server.js文件和编辑器页面index.html文件。2.使用AI助手辅助完成server.js技能实践

server.js文件需要通过AI助手完成，我们提供关键点和逻辑描述的导图如图所示，让AI助手生成代码，并且不断提问获得更加精确的结果。3.通过代码和API实现编辑器技能实践

编辑器的关键点和逻辑描述的导图如图所示，其中文本编辑相关API提供更为便捷的文本DOM操作，更多用法可通过官方文档或AI助手学习。4.运行WebSocket和HTTP服务器并测试技能实践（1）启动本地服务①启动HTTP服务器：在项目的根目录下启动一个静态文件服务器。

http-server.

②使用LocalTunnel公开本地服务：为了使本地服务可以在互联网上被访问，从而实现多人协作编辑，需要使用LocalTunnel。执行以下命令（确保端口号与WebSocket服务器监听的端口号一致），这将生成一个临时的公网URL。

lt--port8080③启动WebSocket服务器：在项目根目录下启动之前编写的WebSocket服务器。

nodeserver.js（2）调整客户端连接配置更新WebSocket连接地址：根据LocalTunnel提供的公网URL，修改前端代码中的WebSocket连接地址LocalTunnel（分配的地址），注意替换为你实际得到的LocalTunnelURL。

constsocket=newWebSocket('wss://your-lt-url.loca.lt');4.运行WebSocket和HTTP服务器并测试技能实践（3）测试多用户协作环境①在同一局域网内测试：虽然LocalTunnel使得不同网络下的用户可以访问你的应用，但在同一局域网内的设备上测试多人协作编辑功能会更加简便。可以直接通过HTTP服务器提供的IP地址加上端口号（如http://localhost:8080或局域网内的实际IP地址）来访问应用，并尝试从多个窗口或设备同时连接以验证实时协作功能是否正常工作。②跨网络测试：利用LocalTunnel生成的公网URL，可以在不同的网络环境下打开浏览器，访问该URL来测试多人协作编辑功能。确保所有用户都能看到实时更新的内容以及正确的锁定状态变化。

在代码实现中通过简单的UUID生成方法，判断不同用户的操作，方便后续调试，其效果如图所示。思考与练习请同学们注意：填空题考查DOM元素获取方法、事件处理及防抖技术的核心机制；判断题分析DOM集合特性、元素内容操作、事件传播机制及防抖的作用；选择题判别元素获取方法、元素创建方式、DOM加载事件、防抖技术核心及WebSocket的应用场景。一、填空题1.getElementById2.querySelectorAll3.querySelector4.stopPropagation5.定时器（setTimeout）二、判断题1.√2.√3.√4.√5.√三、选择题1.B2.B3.B4.A5.A一、填空题1.在DOM操作中，使用document.__________('myElement')可以通过id获取元素。2.使用document.__________('.myClass')可以通过CSS选择器获取所有匹配的元素。3.使用document.__________('.myClass')可以通过CSS选择器获取第一个匹配的元素。4.在事件监听器中，event.__________()方法可以阻止事件冒泡。5.防抖技术的核心是通过__________来延迟函数的执行。二、判断题1.getElementsByClassName()返回的是一个动态的HTMLCollection。（）2.querySelectorAll返回的是一个静态的NodeList，不会自动更新。（）3.innerHTML属性可以用来同时设置或获取元素的内容，包括HTML标签。（）4.事件捕获是指事件从最外层元素向下传递到目标元素的过程。（）5.防抖技术可以减少不必要的函数调用，提升页面响应速度。（）三、选择题1.以下哪个方法可以获取指定id的元素？（）A.getElementsByClassName() B.getElementById() C.querySelectorAll() D.getElementsByTagName()2.以下哪个方法可以创建一个新的<div>元素？（）A.document.createTextNode('div') B.document.createElement('div') C.document.createNode('div') D.document.createDiv()3.以下代码的作用是什么？（）document.addEventListener('DOMContentLoaded',function(){console.log('DOM加载完成');});A.当整个页面（包括图片、样式表等）加载完成后执行回调函数 B.当