利用check酱监控网页并生成rss

<h2>背景</h2><p>最近发现了一个很好玩的开源项目：Check酱。</p><p>https://github.com/easychen/checkchan-dist</p><p>它可以通过保存cookie的方式，监控任意网页上任意元素的变化。然后通过使用Server酱或webhook的方式，对这些元素的变化进行时时提醒。</p><h2><i/>部署Check酱实时监控</h2><p>Check酱的本体是一个chrome插件，但如果只用插件的话，则只能在开机打开浏览器时进行监控。</p><p>好在官方提供了docker镜像，于是我首先使用Docker-compose的方式将其部署在我的服务器上。</p><p><b/></p><div class="image-package"><img src="https://img.haomeiwen.com/i6302584/df5ce92fd7f819a2.jpeg" contenteditable="false" style="min-height:200px;min-width:200px;" img-data="{"format":"jpeg","size":27862,"height":513,"width":469}" class="uploaded-img" width="auto" height="auto"/>
</div><p/><p>于是，我用Check酱监控了b站up主的更新(主要是虽然b站有动态-投稿，可以只看关注的up主更新的视频，但等我发现这个功能时，我已经把2000个关注都点满了。。。)，以及京东商品的价格，还有微信公众号的更新。
</p><p>这边借用官方的图：</p><div class="image-package"><img src="https://img.haomeiwen.com/i6302584/3287d03bf920935d.jpeg" contenteditable="false" style="min-height:200px;min-width:200px;" img-data="{"format":"jpeg","size":70919,"height":711,"width":1037}" class="uploaded-img" width="auto" height="auto"/>
</div><p/><p>然后配置Server酱，将监控信息发送到钉钉机器人通道： </p><div class="image-package"><img src="https://img.haomeiwen.com/i6302584/7423b6673b9ad553.jpeg" contenteditable="false" style="min-height:200px;min-width:200px;" img-data="{"format":"jpeg","size":76704,"height":953,"width":1070}" class="uploaded-img" width="auto" height="auto"/>
</div><p/><div class="image-package"><img src="https://img.haomeiwen.com/i6302584/062389c81828b3d4.jpeg" contenteditable="false" img-data="{"format":"jpeg","size":146269,"height":2050,"width":2372}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p/><div class="image-package"><img src="https://img.haomeiwen.com/i6302584/70c97ee5b304d153.jpeg" contenteditable="false" img-data="{"format":"jpeg","size":158164,"height":2248,"width":1080}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p/><p>现在看起来一切都很完美，但很快我就发现cookie是有时效的，所以我隔几天就要去登录一下。这样显然就麻烦了。</p><h2><i/>万物皆可Rss</h2><p>所以很快，我就发现了RssHub。</p><p>https://docs.rsshub.app/</p><p>https://github.com/DIYgod/RSSHub</p><p>它是一个由广大网友共同编写规则，从而可以将大多数你想要的东西（包括那些不支持rss的）都变成rss订阅源的工具。</p><p>所以，现在的思路就从直接监控网页，变成了监控rss的变化。（因为一般的rss阅读器提醒不是那么及时，并且我又喜欢把app都冰冻锁起来，所以我需要一个可以在聊天软件里提醒我的功能）</p><p>当然，由于一些不可说的原因，rsshub的官方站在大陆使用会有点不顺畅。不过好在这依然是个开源软件，所以我们继续用docker部署在服务器上：</p><div class="image-package"><img src="https://img.haomeiwen.com/i6302584/32f72ec16c74b46a.jpeg" contenteditable="false" img-data="{"format":"jpeg","size":41393,"height":689,"width":733}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p>所以当前的架构就是这样：</p><div class="image-package"><img src="https://img.haomeiwen.com/i6302584/b683e2d98ddeceae.jpeg" img-data="{"format":"jpeg","size":14562,"height":391,"width":583}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p>我把网页的变化点做成rss发布，然后使用Check酱去监控rss的变化，一旦有变化就会通过Server酱向我的钉钉推送提醒；同时，我使用The Old Reader去订阅并管理我感兴趣的Rss源，这样当我的钉钉接收到提醒时，我就可以用安卓的FeedMe或网页端去查看更新的内容了，并且已读的条目也会双向同步到The Old Reader。</p><p>完美。</p><p>但。。。我老婆又向我提出了一个新的需求：她也想要去查看更新。。。</p><p>这个需求的麻烦点在于，我不想让她的已读动作影响到我。看似用两个The Old Reader账号就能解决，但这样我就需要每次修改订阅都要在两个账号同步修改，太麻烦了。。。</p><h2><i/>将监控动态发布成Rss</h2><p>各种搜索解决方案，发现新版Check酱刚增加了一项功能，可以将监控的动态上传、发布成Rss。</p><p>简单说来就是：https://github.com/easychen/checkchan-dist/issues/39</p><p>当正常的php网站部署， 然后填上对应的rss_upload.php地址：</p><div class="image-package"><img src="https://img.haomeiwen.com/i6302584/27c35e6d4373ee1a.jpeg" img-data="{"format":"jpeg","size":19706,"height":269,"width":963}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p>然后->“动态”， 点击"RSS“上传：</p><div class="image-package"><img src="https://img.haomeiwen.com/i6302584/3a6799b7b8cc69bc.jpeg" img-data="{"format":"jpeg","size":12819,"height":379,"width":531}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p>最后打开https://example.com/rss.php 即可：</p><div class="image-package"><img src="https://img.haomeiwen.com/i6302584/0d5f05b52ebf25de.jpeg" img-data="{"format":"jpeg","size":51321,"height":306,"width":597}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p>rss_upload.php:</p><div class="image-package"><img src="https://img.haomeiwen.com/i6302584/2bbcd54bff359300.jpeg" contenteditable="false" img-data="{"format":"jpeg","size":21725,"height":351,"width":448}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p>rss.php:</p><div class="image-package"><img src="https://img.haomeiwen.com/i6302584/3e98ebdcef67f62b.jpeg" contenteditable="false" img-data="{"format":"jpeg","size":7986,"height":161,"width":462}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p>利用这个功能，我就可以把Check酱监控的动态发布成Rss源，这样不论给多少人订阅都不会相互干扰了，而且监控的条目也方便管理，不用多次反复添加修改了。</p><div class="image-package"><img src="https://img.haomeiwen.com/i6302584/2e02d9786a807bca.jpeg" img-data="{"format":"jpeg","size":18204,"height":560,"width":583}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p>但是，大家肯定发现了一个问题，那就是Rss的上传是要手动触发的啊。那岂不是没有一点可用性？</p><p>幸好Check酱镜像支持了NoVNC，所以我通过NoVNC连接到服务器上部署的Check酱里，打开正在被自动化程序操控的浏览器，按F12进入开发者模式，在命令行中输入：</p><div class="image-package"><img src="https://img.haomeiwen.com/i6302584/c76129101c68011a.jpeg" contenteditable="false" img-data="{"format":"jpeg","size":20715,"height":82,"width":1344}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p>这段js代码，就可以让浏览器每隔10分钟，自动去点击一下上传按钮。关闭NoVNC也可以生效。</p><p>这下就全流程自动化了。</p><p>这是在iPhone的ReadOn软件上的效果：</p><div class="image-package"><img src="https://img.haomeiwen.com/i6302584/2f8a63fd9d017e1f.jpeg" img-data="{"format":"jpeg","size":274698,"height":2208,"width":1242}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p>这是在安卓的FeedMe软件上的效果：</p><div class="image-package"><img src="https://img.haomeiwen.com/i6302584/446ce21fe7089fa4.jpeg" img-data="{"format":"jpeg","size":223773,"height":2248,"width":1080}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div>