皮皮网

1.JS实时通信三把斧系列之二: socket.io
2.drawio.io 二次开发记录

JS实时通信三把斧系列之二: socket.io

       在深入了解过WebSocket之后，源码让我们转向第二个实时通信的源码重要工具：socket.io。可能有读者会好奇，源码它与WebSocket有何不同呢?源码

       首先，理解WebSocket的源码实现背景是关键。在WebSocket出现前，源码源码dedecms开发者们使用两种方式来实现类似功能，源码但在不支持长连接的源码环境中，WebSocket显得局限。源码这时，源码Guillermo Rauch开发的源码socket.io库登场，它对WebSocket进行了封装，源码1次解析源码使其能够适应所有场景，源码但需要配合特定的源码客户端代码。

       socket.io的源码工作原理是通过特性检测选择WebSocket、ajax轮询或Flash等方式建立连接。接下来，我们关注几个关键问题来学习socket.io的运作机制：

       如果对这些问题已有所了解，可能不需要继续阅读了。

       socket.io在WebSocket的基础上做了哪些扩展？它其实是一个基于engine.io协议的应用层框架，engine.io是封装了WebSocket协议的底层通信引擎。socket.io README中提到，它在报文中添加了元数据，expma金叉源码这使得WebSocket客户端与socket.io服务器，以及socket.io客户端与WebSocket服务器间无法直接交互。

       engine.io的握手过程和WebSocket有所不同，它在协议请求字段上有所变化，例如定义了额外的路径和数据包编码规则。engine.io协议的版本为3，我们可以通过协议定义的字段和编码格式来理解其工作原理。

       在实现过程中，engine.io的客户端和服务器代码都遵循特定的流程，例如升级协议时需要经过特定步骤。实际应用中，ktvphp官网源码socket.io通常部署在nginx后，需要配置相关参数以避免连接错误。

       尽管socket.io提供了丰富的功能，但使用过程中也可能遇到一些问题，如io.use中间件的诡异行为，以及根namespace的默认行为。这些问题可能需要开发者根据具体情况进行源码调整。

       总结一下，socket.io是WebSocket的扩展，为实时通信提供了更广泛的兼容性和便捷性。最后，将公司源码开源关于RTC的系列文章，下一部分将探讨eventsource的相关内容。

drawio.io 二次开发记录

       导入IDE

       增加本地和OSS存储的纯前端功能，以及各种修改位置介绍。

       准备环境

       项目默认使用打包好的app.min.js，若需修改代码，则需在请求参数中增加dev=1。

       同时在index.html的line:处注释掉远程地址，以确保测试环境下能够请求本地修改后的js。

       修改菜单

       菜单相关设置位于js/diagramly/Menus.js中。例如，要删除File->share...功能，只需在该文件中搜索并注释掉对应的代码。

       修改功能代码亦同理，如将share...按钮修改为打开百度，只需在相应的代码中实现即可。

       可以在浏览器控制台查看各种变量信息，如：

       具体功能实现

       发现菜单中默认弹出SQL转ER框功能很有意思，可以直接将SQL语句转成ER图。但由于路径较长，需要选择好几级菜单才能找到这个功能。如何让页面默认弹出这个编辑框？具体实现在\src\main\webapp\js\diagramly\Menus.js和\src\main\webapp\js\diagramly\Dialogs.js中，ParseDialog功能在\src\main\webapp\js\diagramly\Dialogs.js中实现，splash对话框的实现则在\src\main\webapp\js\diagramly\App.js中。

       添加问题反馈

       反馈功能使用腾讯的兔小巢，将右上角的共享功能修改为URL共享，并添加一个问题反馈按钮。定位至右上角共享功能代码，在界面上点击共享->右键->检查，可在源代码中找到相应的地址。

       文件菜单功能修改

       功能仍在，但已删除“添加”至嵌入->google相关功能的代码替换。由于该功能需要使用官方地址，暂不启用。

       帮助菜单修改

       删除Fork me和获取桌面版本。每次打开页面时会提示下载桌面版本，可通过注释掉代码来禁用此功能。此功能代码位于\src\main\webapp\js\PreConfig.js中。

       右上角语言列表修改

       只需保留需要的语言即可。

       修改通知功能

       通知路径的定义。

       首页修改

       修改首页菜单搜索为百度，代码位于src\main\webapp\js\diagramly\Menus.js中。

       首页报错

       有时页面会提示错误加载文件或未选择文件，导致无法使用。关键词定位至代码src\main\webapp\js\diagramly\App.js。暂时注释掉这段代码，但运行一段时间后发现又会报错。最终发现需要将window.DRAWIO_LIGHTBOX_URL设置为null，原因在于src\main\webapp\js\diagramly\Init.js使用了这个变量。

       部署上线

       完成所有更改后，项目可以上线。在线画图地址提供。

       未完成的事业

       列出未完成的任务，如二次开发交流、参考文档、优秀项目和编码解密工具等。