<article class=“article fmt article-content”><h2>背景</h2><p>用户在应用electron app的时候，常常会遇到白屏，服务器异样，网络异样等状况，然而用户却不晓得如何解决，所以须要提供一个能够给用户自行诊断网络的性能，一来不便用户本人疾速定位问题，自行解决，二来查看开发排查问题的工夫。</p><p>例如飞书在断开主动自行诊断网络状态，提醒用户设置网络。<br/></p><h2>性能需要</h2><p>性能需要能够参考飞书，飞书的网络诊断就是比拟残缺的交互例子<br/><br/>需要内容：</p><ol><li>反对网络状态诊断 - 检测网络是否在线或离线</li><li>反对nds解析诊断- 检测服务器域名是否能胜利解析dns</li><li>反对代理诊断 - 检测电脑是否开启了代理</li><li>服务稳定性剖析 - 检测服务器域名是否可连通</li></ol><table><thead><tr><th>性能</th><th>阐明</th><th>web</th><th>app</th></tr></thead><tbody><tr><td>反对网络状态诊断</td><td>检测网络是否在线或离线</td><td>☑️</td><td>☑️</td></tr><tr><td>反对nds解析诊断</td><td>检测服务器域名是否能胜利解析dns</td><td>✖️</td><td>☑️</td></tr><tr><td>反对代理诊断</td><td>检测电脑是否开启了代理</td><td>✖️</td><td>☑️</td></tr><tr><td>服务稳定性剖析</td><td>检测服务器域名是否可连通</td><td>☑️</td><td>☑️</td></tr></tbody></table><h2>技术选型</h2><h3>web技术诊断</h3><blockquote>有时候也有这样的需要，我想诊断web内所有域名服务器地址的可连通性。</blockquote><p>js引擎（浏览器）并没有提供ping相干的能力，并且也无奈通过xhr来做这种事件，因为这会波及到跨域，那么身下的计划就是通过资源申请，通过的做法就是发送一个img的申请，而最通用的就是申请服务器地址的favicon.ico。刚好就有这这样的一个插件能够帮忙做这样的事件：ping.js</p><p>装置ping.js</p><pre><code>$ npm install ping.js</code></pre><p>应用demo，data返回的是rtt值</p><pre><code class=“js”>var p = new Ping();// Using callbackp.ping(“https://github.com”, function(err, data) { // Also display error if err is returned. if (err) { console.log(“error loading resource”) data = data + " " + err; } document.getElementById(“ping-github”).innerHTML = data;});// You may use Promise if the browser supports ES6p.ping(“https://github.com”) .then(data => { console.log(“Successful ping: " + data); }) .catch(data => { console.error(“Ping failed: " + data); })</code></pre><p><strong>很显著这种形式对于很多场景都是不实用的，比方一个我的项目波及到其余域名的申请。</strong></p><h3>app技术诊断</h3><blockquote>app是原生利用，能够调用到计算机底层的api，就算不借助插件，都能够通过关上终端，ping域名，获取返回值，所以app做这件事件是非常容易的，这里咱们针对electron利用举例</blockquote><h2>诊断流程</h2><p></p><h3>获取域名信息</h3><p>网络信息的获取分为两种形式：</p><pre><code>1. 业务侧有输入框，用户手动输出 2. 获取我的项目配置的域名服务器地址 </code></pre><h3>网络状态</h3><p>网络问题产生时，网络状态往往是第一察看因素。如何去判断网络是否连贯上了网络：</p><ul><li>通用的判断形式：navigator.onLine，然而这个形式只会在机器未连贯到局域网或路由器时返回false，其余状况下均返回true。 也就是说如果用户路由器自身网络就不通的状况下是没有方法判断的。</li><li>进阶判断形式：收回一个申请，看申请返回的状态码或者拜访一个网络资源，比方图片。收回一个网络申请的网站起源，能够是一个固定稳固的动态域名服务器。</li></ul><h3>DNS解析</h3><p>依据域名，查问出对应 IP 信息。服务器域名，唯有正确的解析出 IP 后，能力胜利进行后续的网络连接流程，这里采纳node的nds模块即可。 <br/><code>Desktop: dns.lookup(node) </code></p><h3>ping连通性 与 traceRoute连通性</h3><p>对于如何诊断，以及ping和traceroute的原理，能够这篇博客：https://www.cnblogs.com/seanloveslife/p/11941736.html 。 <br/>这里咱们会用一个node的插件 node-net-ping 来实现这些操作，该插件不仅反对ping同时也反对traceroute，并且对这些操作的异样进行了很好的封装，简化调用过程。</p><p>如果在eletron应用过程中遇到问题：能够应用该插件node-ping，仅反对ping</p><h3>下载日志</h3><p>下载日志的思路就是把之前每一步诊断异样的日志通过electron-log或者其余日志插件写入到本地文件，再将本地的日志文件压缩，最初容许用户保留在指定的目录上面。<br/>这里重点看下压缩的过程：<br/><strong>压缩须要用到插件archiver</strong></p><pre><code class=“js”>const fs = require(‘fs’)const archiver = require(‘archiver’)/*** 压缩日志* @param {string} sourceFilePath* @param {string} outputFilePath* @returns*/const compressLogFolder = (sourceFilePath, outputFilePath) => { return new Promise((resolve, reject) => { try { const outputStream = fs.createwriteStream(outputFilePath); const archive = archiver(‘zip’, { zlib: { level: 9 }}) archive.pipe(outputStream) const data = fs. readFileSync (sourceFilePath, ‘utf8’); archive.append(data.toString(), { name: ’network.log’ }) archive.finalize(); outputStream.on( ‘close’, (res) = resolve(res)) ; outputStream.on( ’error’, (err) = reject(err)); } catch (error) { reject (error) } })}</code></pre></article>