皮皮网

1.【nodejs】全网首发教程 从零写一个websocket服务器 无任何框架
2.探究webpack代码热更新原理
3.网络使用wireshark抓包 分析websocket协议 以及TCP三次握手(实测)
4.Vite源码解析(三)之热更新篇
5.微信小程序中如何使用WebSocket实现长连接(含完整源码)

【nodejs】全网首发教程 从零写一个websocket服务器 无任何框架

       nodejs从零搭建websocket服务器教程

       这篇文章提供了一个无框架的码分全网首发教程，作者自信地表示，码分其行的码分源码已经具备了基础websocket服务器功能，且在便利性、码分性能和自定义性上优于主流框架。码分通过npm直接安装`npm i iiws`，码分手机彩票 源码只需注意修改package.json的码分main字段。源码链接：/Bylx/iiws，码分注释为英文。码分

       理解websocket与piler?码分=?webpack(config);?//?这里的server是全局变量?server?=?new?Server(compiler,?options,?log);?if?(options.socket)?{ ?server.listen(options.socket,?options.host,?(err)?=>?{ })?}?else?{ ?server.listen(options.port,?options.host,?(err)?=>?{ })?}?}

       深入核心，了解如何通过compiler初始化服务器server对象，码分并且调用listen方法

//?码分webpack-dev-server/lib/Server.js?class?Server?{ ?constructor(compiler,?options?=?{ },?_log)?{ ?//?保存webpack实例?this.compiler?=?compiler;?//?保存用户的配置参数?this.options?=?options;?this.heartbeatInterval?=?;?//?socketServer参数?this.socketServerImplementation?=?getSocketServerImplementation(this.options);?this.sockets?=?[];?//?设置文件监听的目录范围?this.contentBaseWatchers?=?[];?//?开启代码热更新的必备参数?this.hot?=?this.options.hot?||?this.options.hotOnly;?//?文件监听配置?this.watchOptions?=?options.watchOptions?||?{ };?this.setupHooks();?this.setupApp();?this.setupDevMiddleware();?this.createServer();?}?//?使用文件编译结束的钩子?setupHooks()?{ ?const?addHooks?=?(compiler)?=>?{ ?done.tap('webpack-dev-server',?(stats)?=>?{ ?//?服务端编译结束通过websocket告知客户端，以及传递当前的码分hash值和ok?this._sendStats(this.sockets,?this.getStats(stats));?this._stats?=?stats;?})?}?if?(this.compiler.compilers)?{ ?this.compiler.compilers.forEach(addHooks);?}?else?{ ?addHooks(this.compiler);?}?}?_sendStats(sockets,?stats,?force)?{ ?this.sockWrite(sockets,?'hash',?stats.hash);?this.sockWrite(sockets,?'ok');?}?//?利用express初始化一个服务器，用于静态资源的码分路由?setupApp()?{ ?this.app?=?new?express();?}?//?配置express搭建后的服务器，确认使用的码分协议?createServer()?{ ?//?如果使用的协议是piler,?Object.assign({ },?this.options,?{ ?logLevel:?this.log.options.level?})?)?}//?创建websocket服务器，用于下发模块更新的通知到客户端?createSocketServer()?{ ?const?SocketServerImplementation?=?this.socketServerImplementation;?this.socketServer?=?new?SocketServerImplementation(this);?this.socketServer.onConnection((connection,?headers)?=>?{ })?}?//?监听对应的端口开启静态资源路由，同时部署另一个websocket服务器?listen(port,?hostname,?fn)?{ ?return?this.listeningApp.listen(port,?hostname,?(err)?=>?{ ?this.createSocketServer();?}?}?}?//?添加两个打包入口模块，利用webpack将相关代码注入到bundle.js中，用于客户端开启websokct以及处理热模块替换?彩虹业务源码Server.addDevServerEntrypoints?=?require('./utils/addEntries');?module.exports?=?Server;

       到这里webpack的HMR在node层做的处理基本完成了，这部分同样是让服务端拥有静态资源路由以及主动下发代码更新通知到客户端的能力，下面看一下如何实现客户端接收websocket通知后主动拉取更新后的服务端代码，并且替换执行新的模块代码

       webpack客户端的代码肯定不会让开发人员自己去实现，不然就会出现千奇百怪的问题。这部分代码处理被黑盒处理，隐藏在了Server.addDevServerEntrypoints方法内，悄悄得在webpack带包过程中添加entry注入这部分代码处理

       巧妙地划分客户端能力到两个模块中

//?webpack-dev-server/utils/addEntries.js?function?addEntries(config,?options,?server)?{ ?const?domain?=?createDomain(options,?app);?const?sockHost?=?options.sockHost`&sockHost=${ options.sockHost}`?:?'';?const?sockPath?=?options.sockPath`&sockPath=${ options.sockPath}`?:?'';?const?sockPort?=?options.sockPort`&sockPort=${ options.sockPort}`?:?'';?//?引入搭建websocket客户端代码块module?const?clientEntry?=?`${ require.resolve(?'../../client/'?)}?${ domain}${ sockHost}${ sockPath}${ sockPort}`;?//?处理客户端从服务端获取新模块并且替换执行的代码块module?let?hotEntry;?if?(options.hotOnly)?{ ?hotEntry?=?require.resolve('webpack/hot/only-dev-server');?}?else?if?(options.hot)?{ ?hotEntry?=?require.resolve('webpack/hot/dev-server');?}?}?module.exports?=?addEntries;

       从这里可以看出来，客户端需要的两个能力被划分到了两个代码模块中，一个是搭建websocket客户端，一个是处理客户端的代码模块更新和替换

       搭建websocket客户端

//?webpack-dev-server/client/index.js?var?socket?=?require('./socket');?var?sendMessage?=?require('./utils/sendMessage');?var?createSocketUrl?=?require('./utils/createSocketUrl');?var?reloadApp?=?require('./utils/reloadApp');?var?socketUrl?=?createSocketUrl(__resourceQuery);?var?onSocketMessage?=?{ ?//?接收websocket服务端返回的最新hash值?hash:?function?hash(_hash)?{ ?status.currentHash?=?_hash;?}?ok:?function?ok()?{ ?sendMessage('Ok');?reloadApp(options,?status);?}?}?socket(socketUrl,?onSocketMessage);

       当客户端收到服务端返回的ok消息推送时，会调用reloadApp，这里看一下具体是怎么处理的

//?webpack-dev-server/client/utils/reloadApp.js?function?reloadApp(_ref,?_ref2)?{ ?if?(hot)?{ ?log.info('[WDS]?App?hot?update...');?var?hotEmitter?=?require('webpack/hot/emitter');?hotEmitter.emit('webpackHotUpdate',?currentHash);?//?如果当前宿主是浏览器环境，则触发webpackHotUpdate消息推送?if?(typeof?self?!==?'undefined'?&&?self.window)?{ ?self.postMessage("webpackHotUpdate".concat(currentHash),?'*');?}?}?}?module.exports?=?reloadApp;

       所以调用this.postMessage("webpackHotUpdate".concat(currentHash),'*')

       有发送就会有接收，找一下对应的回调处理，而处理这部分的代码被划分到了hot模块中，根据hash获取新的代码模块并进行替换执行

       处理客户端的代码模块更新和替换

//?webpack/hot/dev-server.js?if?(module.hot)?{ ?var?lastHash;?var?check?=?function?check()?{ ?module.hot?.check(true)?.then(function(updatedModules)?{ ?//?容错，如果不存在待更新的模块，直接刷新页面?饮食app源码if?(!updatedModules)?{ ?log("warning",?"[HMR]?Cannot?find?update.?Need?to?do?a?full?reload!");?log(?"warning",?"[HMR]?(Probably?because?of?restarting?the?webpack-dev-server)"?);?window.location.reload();?return;?}?}?.catch(function(err)?{ ?window.location.reload();?}?}?hotEmitter.on("webpackHotUpdate",?function(currentHash)?{ ?lastHash?=?currentHash;?if?(!upToDate()?&&?module.hot.status()?===?"idle")?{ ?log("info",?"[HMR]?Checking?for?updates?on?the?server...");?//?调用check方法拉取更新后的模块代码并进行处理?check();?}?});?}

       这里的module.hot.check方法，其实是另一位隐藏的大佬进行的方法注入

       HotModuleReplacementPlugin

       由于涉及到另一个插件的解析，放到后面去扩展。感兴趣的读者可以去webpack/lib/hotModuleReplacement.js阅读源码。

       这里重点介绍针对module.hot.check都注入了怎样的代码

//?webpack/lib/web/JsonpMainTemplate.runtime.jsfunction?hotCreateModule(moduleId)?{ ?var?hot?=?{ ?check:?hotCheck?}function?hotCheck(apply)?{ ?hotSetStatus("check");?return?hotDownloadManifest(hotRequestTimeout).then(function(update)?{ ?hotAvailableFilesMap?=?update.c;?hotUpdateNewHash?=?update.h;?hotSetStatus("prepare");})?}?function?hotDownloadManifest(requestTimeout)?{ ?requestTimeout?=?requestTimeout?||?;?return?new?Promise(function(resolve,?reject)?{ ?var?request?=?new?XMLHttpRequest();?var?requestPath?=?__webpack_require__.p?+?""?+?hotCurrentHash?+?".hot-update.json";?request.open("GET",?requestPath,?true);?request.timeout?=?requestTimeout;?request.send(null);?request.onreadystatechange?=?function()?{ ?var?update?=?JSON.parse(request.responseText);?resolve(update);?}?}?}

       这里之所以使用JSONP的方式获取新的模块代码，是因为JSONP获取的代码可以直接执行，而hash.hot-update.js代码里有个webpackHotUpdate函数调用，最后重点看一下这个函数是如何处理代码模块替换和执行的

//?webpack/lib/HotModuleReplacement.runtime.js?window["webpackHotUpdate"]?=?function?(chunkId,?moreModules)?{ ?hotAddUpdateChunk(chunkId,?moreModules);?}；?function?hotAddUpdateChunk(chunkId,?moreModules)?{ ?//?更新的模块moreModules赋值给全局全量hotUpdate?for?(var?moduleId?in?moreModules)?{ ?if?(Object.prototype.hasOwnProperty.call(moreModules,?moduleId))?{ ?hotUpdate[moduleId]?=?moreModules[moduleId];?}?}?//?调

网络使用wireshark抓包 分析websocket协议 以及TCP三次握手(实测)

       深入理解网络通信，光是理论研究或阅读源码难以获得直观感受。借助抓包工具Wireshark进行实际数据抓取分析，能更直观地理解协议细节，尤其是WebSocket和TCP三次握手。

       Wireshark是一款功能强大的网络封包分析工具，广泛应用于网络协议分析与调试。作为开源软件，其源码可在GitHub上获取，对深入研究Wireshark内部机制大有裨益。对于Wireshark的使用方法，可参阅其官方文档。美化空间源码

       WebSocket的通信基础是帧（frame），单个帧构成完整消息。WebSocket数据帧格式遵循RFC标准，由FIN、操作码（Opcode）等字段组成，操作码决定后续数据载荷的解析方式。

       在建立WebSocket连接过程中，通过TCP三次握手完成。Wireshark能够实时抓取连接建立过程中的数据包。

       具体操作步骤如下：

       1. 使用Wireshark选择网络适配器并过滤IP地址。

       2. 打开浏览器访问HTML页面。

       3. 保持连接状态秒钟。

       4. 关闭浏览器。

       抓包数据示例：

       1-3步：TCP三次握手过程

       1. A主机发送SYN（Seq=0），表示连接请求。

       2. B主机响应ACK（Seq=1），同时发送SYN（Seq=0），表示接收请求并准备建立连接。can通讯源码

       3. A主机回应ACK（Seq=1），同时发送SYN（Seq=1），完成三次握手。

       随后，A主机发送HTTP协议信息，表明请求升级至WebSocket协议。

       紧接着，B主机通过ACK应答确认，发送HTTP协议信息表示同意升级，并成功切换。

       接下来，A主机进行ACK应答，B主机发出准备发送数据的请求，包含“PSH”标识。

       A主机再次进行ACK应答，B主机发送WebSocket协议数据。

       分析此过程与WebSocket帧格式对照，发现：

       当前帧的FIN标记为1，指示此帧为消息末尾。

       操作码值为2，表示二进制格式。

       帧无掩码，数据长度为字节，数据部分由用户自定义。

       通过Wireshark抓取的实际数据，能清晰地了解WebSocket和TCP三次握手的交互过程，直观展示协议的执行细节与数据结构。

Vite源码解析(三)之热更新篇

       为了提升开发体验，热替换功能使得修改代码后无需刷新页面即可实时生效，避免了频繁的页面重载操作。这一特性在现代化前端框架中被视为一项基本要求，如同 webpack-dev-server 等模块所具备的功能。热替换在 Vite 中的实现主要依赖于 websocket 技术，通过 websocket 实现服务端与浏览器间的高效通信，确保代码更新即时生效。

       热替换的实现涵盖了多种文件类型，如 .vue、.js、.css 等，每种类型的文件更新策略可能有所不同。例如，对于 .vue 文件的热替换，主要是通过更新组件的动态引入和条件渲染来实现，确保仅相关部分的组件状态得到更新，而不会影响到其他未修改的部分。

       在 Vite 的热替换机制中，`import.meta.hot` API 提供了访问热替换相关状态的功能，允许开发者根据具体需求自定义热替换的行为，如处理错误、执行某些特定逻辑等。

       监听文件变化是热替换功能得以实现的基础。通常，框架会利用文件系统监控API，如 Node.js 的 fs.watch 和 fs.watchFile，或更高层次封装的模块如 chokidar，以实时捕捉文件变动事件。在 Vite 中，同样使用这类API，通过 chokidar进行文件系统变动监听，确保一旦文件发生变化，即可触发相应的热替换逻辑。

       在处理css文件的热替换时，主要考虑两种情况：一是修改外部css源文件（例如通过`import`引入或直接修改Vue组件内的`style`标签），二是对组件内部的样式进行直接修改。针对这两种情况，Vite会采用不同的策略来实现样式更新，确保用户界面能够即时响应代码变化，而无需页面重载。

       总结而言，热替换功能在Vite中的实现是一个涉及代码更新策略、文件监听和实时通信技术的综合过程，旨在显著提升前端开发的效率和体验。通过高效地管理文件变动和代码更新，Vite为开发者提供了一种无缝、高效的工作流程，使得开发、调试和迭代过程更为流畅。

微信小程序中如何使用WebSocket实现长连接(含完整源码)

       微信小程序中利用WebSocket实现长连接的详细教程，本文由腾讯云技术团队分享。通过实例，我们将创建一个简单的剪刀石头布小游戏，展示如何在小程序中利用WebSocket进行实时通信。

       游戏设计包括自动匹配在线玩家，通过WebSocket实现实时互动，如对手出拳时头像旋转。WebSocket的全双工特性解决了传统HTTP轮询的延迟问题，为低延迟应用提供了理想选择。腾讯云利用SocketIO作为服务端实现，但由于微信小程序的限制，需要对SocketIO进行定制，封装WxSocketIO类以适应小程序环境。

       在服务器逻辑上，通过设计清晰的消息类型和协议，实现了用户加入房间、游戏开始与结算的流程。微信小程序端通过状态机管理通信，具体实现代码可在game.js中查看。部署和运行时，需要准备HTTPS域名和证书，配置云服务器和镜像，以及进行DNS解析和WebSocket服务的启动。

       完整源码可通过本文末尾链接下载：im.net/thread--1-...