初探webpack之单应用多端构建 在现代化前端开发中，我们可以借助构建工具来简化很多工作，单应用多端构建就是其中应用比较广泛的方案，webpack中提供了loader与plugin来给予开发者非常大的操作空间来操作构建过程，通过操作中间产物我们可以非常方便地实现多端构建，当然这是一种思想而不是深度绑定在webpack中的方法，我们也可以借助其他的构建工具来实现，比如rollup、vite、rspack等等。 描述 首先我们先来聊聊多端构建，实际上单应用多端构建的思想非常简单，就是在同一个项目中我们可以通过一套代码来构建出多个端的代码，例如小程序的跨平台兼容、浏览器扩展程序的跨平台兼容、海内外...

ReactPortals传送门 ReactPortals提供了一种将子节点渲染到父组件以外的DOM节点的解决方案，即允许将JSX作为children渲染至DOM的不同部分，最常见用例是子组件需要从视觉上脱离父容器，例如对话框、浮动工具栏、提示信息等。 描述 <div> <SomeComponent/> {createPortal(children,domNode,key?)} </div> ReactPortals可以翻译为传送门，从字面意思上就可以理解为我们可以通过这个方法将我们的React组件传送到任意指定的位置，可以将组件的输出渲染到DOM树中的任...

分布式SESSION一致性 ​​SESSION​​​是服务器为客户端创建的一个会话，存储用户的相关信息，用以标识用户身份等。在单服务器环境下是不需要考虑会话的一致性的问题的，但是在集群环境下就会出现一些问题，假如一个用户在登录请求时负载均衡到了​​A​​​服务器，​​A​​​服务器为其分配了​​SESSION​​​，下次请求数据时被分配到了​​B​​​服务器，此时由于​​B​​​服务器不存在此用户的​​SESSION​​​，此用户会被重定向到登录页面，这种情况是不合理的业务逻辑，所以需要维护​​SESSION​​的一致性。 解决方案 SESSION同步 多个服务器之间互相同步​​SESSION...

三次握手 传输控制协议​​TCP，TransmissionControlProtocol​​​是一种面向连接的、可靠的、基于字节流的传输层通信协议，其是运行在​​OSI​​七层模型中的运输层，为了在不可靠的互联网络上提供可靠的端到端字节流而专门设计的一个传输协议。 三次握手 过程 clientserver主动打开→SYN=1,seq=x→被动打开，接收(同步已发送)(同步收到)接收←SYN=1,ACK=1,seq=y,ack=x+1←发送(已建立链接)(同步收到)发送→ACK=1,seq=x+1,ack=y+1→接收(已建立链接)(已建立链接) 第一次握手：客户端主动链接服务器，...

常用配置 ​​Nginx(EngineX)​​​是一个轻量级的高性能的​​HTTP​​​和反向代理​​web​​​服务器，同时也提供了电子邮件​​IMAP/POP3/SMTP​​​服务，在​​BSD-like​​​协议下发行，其特点是占有内存少，并发能力强，事实上​​nginx​​的并发能力在同类型的网页服务器中表现较好。 常用命令 ​​-c</path/to/config>​​​:为​​Nginx​​指定一个配置文件，来代替缺省的配置文件。 ​​-t​​​:不运行而仅仅测试配置文件，​​nginx​​​将检查配置文件的语法的正确性，并尝试打开配置文件中所引用到的文件，这个命令也...

初探富文本之CRDT协同实例 在前边初探富文本之CRDT协同算法一文中我们探讨了为什么需要协同、分布式的最终一致性理论、偏序集与半格的概念、为什么需要有偏序关系、如何通过数据结构避免冲突、分布式系统如何进行同步调度等等，这些属于完成协同所需要了解的基础知识，实际上当前有很多成熟的协同实现，例如automerge、yjs等等，本文就是关注于以yjs为CRDT协同框架来实现协同的实例。 描述 接入协同框架实际上并不是一件简单的事情，当然相对于接入OT协同而言接入CRDT协同已经是比较简单的了，因为我们只需要聚焦于数据结构的使用就好，而不需要对变换有过多的关注。当前我们更加关注的是Op-basedC...

初探富文本之CRDT协同算法 CRDT的英文全称是Conflict-freeReplicatedDataType，最初是由协同文本编辑和移动计算而发展的，现在还被用作在线聊天系统、音频分发平台等等。当前CRDT算法在富文本编辑器领域的协同依旧是典型的场景，常用于作为实现文档协同的底层算法，支持多个用户同时编辑文档，不会因为用户并发修改导致冲突，而导致结果不一致甚至数据丢失的问题。 描述 Conflict-freeReplicatedDataType直译过来就是无冲突的复制数据类型，从名字可以看出来，CRDT的重点在于无冲突复制和数据类型，去掉定语的话就可以得到CRDT是一种数据结构，也就是说C...