实战笔记:知识真的就是金钱,聊聊我的局域网调试工具

在“豆子工具”的所有功能中,局域网调试工具(TCP/UDP/WebSocket) 并不是受众最广的,但它却是我最引以为傲的一个。 因为它让我真切地体会到了一句话:知识就是力量,知识就是金钱。 缘起:把调试器揣进口袋 做嵌入式开发或者网络协议调试的人都知道,以往测试局域网通信,必须背着电脑,接上串口线或网线,蹲在机柜旁守着。我当时就在想:既然微信小程序已经开放了网络通信的能力,为什么我不能做一个随身携带的调试器呢? 于是,我深度调用了小程序的 wx.createTCPSocket、wx.createUDPSocket 和 WebSocket API,在“豆子工具”里构建了一个完整的网络测试模块。它支持: 十六进制(Hex)与 ASCII 码切换 实时数据日志展示 局域网内稳定的数据收发 变现:从技术分享到“第一桶金” 工具做成后,我并没有藏着掖着,而是把实现原理和核心逻辑整理成文,发布到了微信开发者社区。 没过多久,一位用户通过那篇文章联系到了我。他在工业自动化领域遇到了一个难题:需要一套能够定制化采集设备数据的微信小程序工具,而协议正是基于 Modbus/TCP。 由于我的“豆子工具”已经打好了坚实的底层基础,我对原有的 TCP 调试模块进行了针对性的修改,迅速就适配出了满足他实际业务场景的采集方案。 虽然这笔订单带来的“第一桶金”数额并不算惊人,但它对我的意义非凡。它验证了一个逻辑:当你把一个细分领域的工具做到极致,并愿意分享出去时,价值自然会找上门来。 技术实现 这个工具是纯小程序实现,它调用微信小程序的网络API。 doConnServer() { const that = this; wx.getNetworkType({ success(res) { const networkType = res.networkType if (networkType !== 'wifi') { wx.showToast({ title: '请打开WIFI', }) return } that.connTcp(); } }); }, connTcp() { const that = this; if (!utils.isEmpty(t)) { t.offMessage() t.offConnect() t.offError() t.offClose() t.close() t = null; that.setData({ isConn: false, tips: "关闭成功" }) wx.showToast({ title: '关闭成功', }) return } else { let ip = that.data.ip; let port = that.data.port; if (!utils.isValidIP(ip)) { wx.showToast({ title: '无效IP地址', }) return } if (!utils.isPrivateIP(ip)) { wx.showToast({ title: '请使用私有IP', }) return } if (utils.containInvalidPort(port)) { wx.showToast({ title: '非法端口', }) return } t = wx.createTCPSocket() t.onError(that.tErr) t.onConnect(that.tConn) t.onMessage(that.tMsg) t.onClose(that.tClose) t.connect({ address: ip, port: port, timeout: 3, }) } }, 这是部分核心TCP代码,它是TCP创建连接的核心代码。完整代码请从下面地址中的豆子碎片小程序内下载:https://91demo.top/tools/ ...

2018-01-06 · 1 min · Eagle

实战笔记:为了省下服务器流量费,我给小程序加上了 Webp 转换

在“流量贵如油”的今天,作为一名自己买服务器、撸代码的站长,如何给服务器“减负”是每天都要思考的必修课。 痛点:博客网站的流量杀手 我有一个运行多年的个人博客。在分析服务器日志时发现,最大的流量开销并不是文字,而是文章里那些高清的图片。 虽然 JPG 和 PNG 已经很普及,但随着屏幕分辨率越来越高,原图动辄几 MB,对于按带宽付费或者流量计费的服务器来说,这都是白花花的银子。 方案:Webp 格式的“降维打击” 现在主流浏览器(Chrome, Safari, Edge 等)已经全面支持 Webp 格式。相比于传统的 JPG 和 PNG,Webp 可以在保证肉眼看不出画质损失的前提下,将文件体积压缩 30% 到 70%。这是一个非常惊人的数据。这意味着原本 100GB 的图床流量,换成 Webp 后可能只需要 30GB。 为了方便处理博客素材,我决定把这个需求也集成到“豆子工具”里。 实现:基于 Google 官方工具链 图片转换的实现原理与我之前的“音频转换”方案异曲同工,主打一个稳定与高效: 核心引擎:在服务端安装了 Google 官方出品的 webp 命令行工具链(cwebp)。 后端调度:依然由 Go 语言担任“指挥官”,接收小程序上传的 PNG/JPG 原图,调用外部 cwebp 进程进行压缩。 参数优化:在后端我预设了平衡性最好的质量参数,确保图片在压缩后的清晰度依然能够满足博客展示的需求。 闭环应用:现在我写每一篇博客前,都会先用小程序把配图过一遍,转成 Webp 后再上传。 下面是核心代码片段的注解,这是小程序端: <page-meta root-font-size="system" /> <view class="page"> <view class="page__hd"> <view class="page__title">图片格式转换</view> <view class="page__desc">可将图片转换为WebP格式,用于Web项目。</view> </view> <view class="page__bd"> <view class="weui-cells weui-cells_radio"> <view class="weui-cell weui-cell_uploader"> <view class="weui-cell__bd"> <view class="weui-uploader"> <view class="weui-uploader__hd"> <view aria-role="option" class="weui-uploader__overview"> <view class="weui-uploader__title">图片信息</view> </view> <view class="weui-uploader__tips"> 请选取5M内的图片,目前仅支持一张 </view> </view> <view class="weui-uploader__bd"> <view class="weui-uploader__files" id="uploaderFiles"> <block wx:for="{{files}}" wx:key="*this"> <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}"> <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" /> </view> </block> </view> <view class="weui-uploader__input-box"> <view aria-role="button" aria-label="选择图片" class="weui-uploader__input" bindtap="chooseImage"></view> </view> </view> </view> </view> </view> <view class="weui-cell"> <view wx:if="{{headImageExist}}"> <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="aspectFit" src="{{headImage}}" bindtap="previewMakeImage"></image> </view> <view wx:else><text>转换完成的图片会展示在这里</text></view> </view> <view class="weui-cell"> <view class="button-sp-area"> <view class="weui-btn weui-btn_primary weui-wa-hotarea" aria-role="button" bindtap="imageConvert">开始转换</view> <view class="weui-btn weui-btn_warn weui-wa-hotarea" aria-role="button" bindtap="saveToPhotosAlbum">保存到相册</view> </view> </view> </view> </view> </view> 上面是界面骨架,现在说下它的灵魂。首先通过小程序的上传文件API,wx.uploadfile将图片文件上传到服务器,然后使用Go调用cwebp进行格式转换,转换成功后,下载文件到小程序本地,然后删除服务器端的文件。 ...

2018-01-05 · 2 min · Eagle

实战笔记:我把 FFmpeg 搬进小程序,搞定了音频格式转换

在“豆子工具”众多的功能里,音频转换(m4a 转 mp3) 是我使用频率最高、也最具有“个人救赎”色彩的一个。 起因:被软件更新“背刺”后的郁闷 这个功能的由来非常接地气:有一段时间,我需要频繁地将苹果手机录音产生的 m4a 格式文件转换成 mp3,因为当时某个必须使用的业务软件只认 mp3。 那时候我找遍了各种转换工具。最后发现某款主流音乐软件自带的转换功能挺好用。然而,好景不长,在一次软件自动更新后,这个功能竟然被砍掉了。我去搜老版本安装包,却发现根本找不到安全的下载路径。 那种“被绑架”的无奈感,相信每个工具控都深有体会。 进阶:大名鼎鼎的 ffmpeg 郁闷之后,我转向了技术人的终极方案——ffmpeg。 命令行虽然硬核,但确实强大到无以复加。一条简单的指令就能解决所有问题: ffmpeg -i input.m4a output.mp3 用了很长一段时间的命令行后,新的问题又来了,一次在外面,突然用户需要转换音频,我总不能随时随地都带着电脑吧?于是,我动了把 ffmpeg 搬进“豆子工具”的心思。 实现:极简架构下的“随时随地” 在小程序里实现这个功能,原理其实并不复杂,核心在于后端调度: 前端上传:小程序端选择 m4a 文件,上传至服务器。 后端处理:后端使用 Go 语言接收文件,通过 exec 模块调用服务器系统环境中的 ffmpeg 进程进行转换。 实时试听:为了保证体验,我在小程序里集成了一个音频播放器。转换前可以听一下是否选对了文件,转换后也可以即时试听确认效果。 即用即删:转换生成的文件在用户下载后会立即从服务器删除,既保护了隐私,也完全不占用宝贵的服务器存储空间。 下面是核心代码片段的注解,这是小程序端: <page-meta root-font-size="system" /> <view class="page"> <view class="weui-form"> <view class="weui-form__text-area"> <h2 class="weui-form__title">音频格式转MP3</h2> <view class="weui-form__desc">因微信限制,保存文件即为分享文件,可通过微信文件传输助手下载文件。目前仅支持以下格式(M4A、WAV、AMR)文件转换为MP3文件。</view> </view> <view class="weui-form__control-area"> <view class="weui-cells__group weui-cells__group_form"> <view class="weui-cells weui-cells_radio"> <view class="weui-cell weui-cell_active weui-cell_vcode weui-cell_wrap"> <view class="weui-cell__hd"><label class="weui-label">文件</label></view> <view class="weui-cell__bd"> <input class="weui-cell__control weui-cell__control_flex weui-input" type="text" placeholder="请选取5M内的音频" placeholder-class="weui-input__placeholder" value="{{filename}}" /> <view aria-role="button" class="weui-cell__control weui-btn weui-btn_default weui-vcode-btn" bindtap="chooseMedia">选择</view> </view> </view> <view class="weui-cell"> <view wx:if="{{audioExist}}"> <audio name="{{filename}}" src="{{filepath}}" id="myAudio" controls></audio> </view> <view wx:else><text>选择音频文件后可以在这里试听</text></view> </view> <view class="weui-cell"> <view wx:if="{{makeAudioExist}}"> <audio name="{{makeAudioName}}" src="{{makeAudioPath}}" id="myAudio" controls></audio> </view> <view wx:else><text>转换完成的文件会展示在这里</text></view> </view> </view> </view> </view> <view class="weui-form__opr-area"> <view class="button-sp-area"> <view class="weui-btn weui-btn_primary weui-wa-hotarea" aria-role="button" bindtap="audioConvert">开始转换</view> <view class="weui-btn weui-btn_warn weui-wa-hotarea" aria-role="button" bindtap="saveFile">保存文件</view> </view> </view> </view> </view> 上面是界面骨架,现在说下它的灵魂。首先通过小程序的上传文件API,wx.uploadfile将音频文件上传到服务器,然后使用Go调用ffmpeg进行格式转换,转换成功后,下载文件到小程序本地,然后删除服务器端的文件。 ...

2018-01-04 · 2 min · Eagle