利用WebMonitor实时监控网页变化-支持手机微信,邮箱,TG等通知提醒

第一时间获取信息,就可以第一时间掌握资源。信息时代瞬息万变,信息又错综复杂,生活这样一个信息时代里,如果第一时间获取信息就变得有点难度了。在《在线RSS阅读器收集整理汇总》一文,挖站否分享了大量的RSS阅读器,RSS之所以一直未“死”,能够帮助我们获取信息应该是重要原因之一。

利用RSS来获取信息有一定的局限性,例如信息可能存在延迟、信息量过大无法找到对自己有用的信息等,于是又有人造出了一个工具:Huginn,它是一个私人IFTTT,例如搭建任务采集触发平台,自动跟进实时提醒(用Email Slack TG QQ 微信接受推送),全文 RSS 输出等。

不过,Huginn安装和使用过程中还是略显复杂,这篇来分享一下类似于Huginn但是部署起来更简单的工具:WebMonitor。它支持邮件,pushover,微信提醒(support by server酱),Bark推送,自定义GET/POST通知, Slack 通知以及 Telegram 通知等。

利用WebMonitor实时监控网页变化-支持手机微信,邮箱,TG等通知提醒

更多的实用工具还有:

  1. 密码管理软件整理汇总-好用免费和付费的密码管理软件推荐
  2. Tiny Tiny RSS最新安装与使用教程-Awesome TTRSS Docker安装配置方法
  3. RSSHub给不支持RSS网站制作RSS订阅源-支持B站,知乎,微博,豆瓣,今日头条

一、WebMonitor安装准备

网站:

  1. 官网:https://github.com/LogicJake/WebMonitor
  2. 文档:https://www.logicjake.xyz/WebMonitor/

1.1 域名与服务器

一个域名。可选。想要长期使用WebMonitor,自然要使用域名+SSL证书了,单纯地用IP地址也可以使用WebMonitor,但是这终究不是一个长久之计,所以你先准备好一个域名,并解析到你的服务器IP 上,参考:域名服务

一台VPS。WebMonitor推荐使用Docker安装,你需要准备一台VPS主机,现在便宜的VPS主机也非常多,参考:VPS主机排行榜单

1.2 一键安装Docker

在VPS主机上安装Docker可以使用一键命令安装方法,命令如下:

#Docker 一键安装脚本 
bash <(curl -sSL https://cdn.jsdelivr.net/gh/SuperManito/LinuxMirrors@main/DockerInstallation.sh) 
#Docker CE:Docker Community Edition 镜像仓库,用于下载并安装 Docker 相关软件包。 
#Docker Hub:Docker Hub 镜像仓库,默认为官方提供的公共库,用于切换下载镜像时的来源仓库,又称镜像加速器。 

脚本集成安装 Docker Engine与 Docker Compose,可手动选择安装版本和下载源,还可手动选择镜像加速器,支持国内外服务器环境和 ARM架构处理器环境使用。详情:Docker 和 Docker Compose 一键安装脚本 可手动选择安装版本和下载源

WebMonitor安装Docker

二、WebMonitor安装过程

首先,进入你的VPS主机,新建一个docker-compose.yml

mkdir -p /opt/webmonitor && cd /opt/webmonitor && vi docker-compose.yml

然后将以下代码复制粘贴进去保存,记得修改密码为你自己的。

version: '3.5'
services:
  webmonitor:
    image: logicjake/webmonitor
    container_name: webmonitor
    environment:
      - PORT=8000
      - USERNAME=admin
      - PASSWORD=wzfou.com # 设置你的管理员密码
    ports:
      - 8000:8000
    volumes:
      - ./data:/app/db
    restart: unless-stopped

最后,使用命令开始跑起来:

docker-compose up -d
WebMonitor运行Docker
WebMonitor安装完成

安装完成后,打开你的IP+8000端口就可以进入到WebMonitor了。

WebMonitor打开端口

三、WebMonitor域名访问

对于Docker来说,反向绑定域名可以变得更简单:Nginx反向绑定域名管理工具-无需修改Nginx规则一键添加反向绑定域名。2022.10.20更新

对于Oneinstack或者LNMP这类的一键安装包已经配置好了Nginx,先用命令添加虚拟主机绑定好你的域名,然后打开Nginx配置文件,参考以下配置做好域名反代:(主要是前后部分复制粘贴过去,中间部分根据你自己的配置来调整。)

server
    {
        listen 443 ssl http2;
        #listen [::]:443 ssl http2;
        server_name hczj.wzfou.me ;
        index index.html index.htm index.php default.html default.htm default.php;
        root  /home/wwwroot/hczj.wzfou.me;

        ssl_certificate /usr/local/nginx/conf/ssl/hczj.wzfou.me/fullchain.cer;
        ssl_certificate_key /usr/local/nginx/conf/ssl/hczj.wzfou.me/hczj.wzfou.me.key;
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
        ssl_prefer_server_ciphers on;
        ssl_ciphers "TLS13-AES-256-GCM-SHA384:TLS13-CHACHA20-POLY1305-SHA256:TLS13-AES-128-GCM-SHA256:TLS13-AES-128-CCM-8-SHA256:TLS13-AES-128-CCM-SHA256:EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5";
        ssl_session_cache builtin:1000 shared:SSL:10m;
        # openssl dhparam -out /usr/local/nginx/conf/ssl/dhparam.pem 2048
        ssl_dhparam /usr/local/nginx/conf/ssl/dhparam.pem;

        include rewrite/other.conf;
        #error_page   404   /404.html;

        # Deny access to PHP files in specific directory
        #location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; }

        include enable-php.conf;
		
		  
#后半部分
    location / {
        proxy_set_header  Host  'hczj.wzfou.me';
        proxy_pass http://127.0.0.1:8000;
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header        X-Forwarded-Proto $scheme;
     }
#后半部分


        access_log  /home/wwwlogs/hczj.wzfou.me.log;
    }

如果你用的是宝塔面板,你可以直接在后台添加网站,绑定域名。然后在网站设置中反代域名,端口要换成8000(详情请看宝塔面板教程),如下图:

WebMonitor宝塔面板

打开你的域名,现在就可以看到WebMonitor成功用域名访问了。

WebMonitor域名访问

四、WebMonitor使用教程

这个就是WebMonitor的后台界面。

WebMonitor界面

4.1 设置通知方式

WebMonitor支持邮箱、微信、TG等通知方式。

WebMonitor添加通知方式

WebMonitor的微信通知是采用server酱,你只需要进入到server酱获取一个API即可。

WebMonitor获取API
WebMonitor填入API

4.2 设置TG通知方式

如果采用 Telegram 提醒,则必须设置“系统管理/Telegram Bot 设置”中的 Telegram Bot Token。首先关注:@botfarther

WebMonitor设置TG

然后输入:/newbot,给你的Bot设置一个名称就可以了看到Telegram Bot Token生成了。

WebMonitor生成Token

把这个Telegram Bot Token复制粘贴到系统管理/Telegram Bot 设置中。

WebMonitor粘贴

获取你的Bot ID。获取的方式是:https://api.telegram.org/bot<token>/METHOD_NAME,假设你的token是:123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11,那么打开你的浏览器访问以下链接:https://api.telegram.org/bot123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11/getUpdates

这时你会看到ID。

WebMonitor得到ID

新增通知方式,复制这个ID填写到TG通知方式里。

WebMonitor填入通知ID

4.3 设置网页监控

在 任务管理 > 网页监控管理 添加新任务

必须选择一种通知方式

默认抓取频率为5分钟,自行根据需要调整,单位分钟,不建议调太快,以防反爬

元素选择器类型可以选择 Xpath, Css selector 或 JsonPath。一行一个元素选择器,每一行的格式为:选择器名称{选择器内容},例如:

title{//*[@id="id3"]/h3/text()}
myurl{//*[@id="id3"]/h3/text()}Copy to clipboardErrorCopied

以下字段为系统默认保留字段,请不要使用且无法被覆盖:

url:该任务对应的监控网址

可以借助浏览器 F12 直接 copy 前两种选择器,需要注意的是,往往浏览器 copy 得到是元素,而不是文本信息,需要做以下补充:

xpath

获取元素文本信息,在浏览器得到的选择器后加/text(),如
//*[@id="id3"]/h3 => //*[@id="id3"]/h3/text()

获取元素属性信息,在浏览器得到的选择器后加/@属性名,如想获取元素href值
//*[@id="id3"]/h3 => //*[@id="id3"]/h3/@href

获取元素及其子元素的所有文本信息,在浏览器得到的选择器后加/string(),如
//*[@id="id3"]/h3 => //*[@id="id3"]/h3/string()

css selector

获取元素文本信息,在浏览器得到的选择器后加::text,如
div#id3 > h3 => div#id3 > h3::text

获取元素属性信息,在浏览器得到的选择器后加::attr(属性名),如想获取元素href值
div#id3 > h3 => div#id3 > h3::attr(href)

JsonPath

针对返回 json 数据的接口, 可以使用 JsonPath 提取数据, 具体教程参考 https://goessner.net/articles/JsonPath/ 。在Chrome F12开发者工具中,也可以找到对应元素,然后右键该元素,选择“Copy Property Path”。

消息体模板。消息体模板可为空,如果为空,则按照元素选择器的定义顺序以制表符为间隔拼接为字符串。下面介绍消息体模板的使用方式,如果元素选择器的设置为:

title{//*[@id="id3"]/h3/text()}
myurl{//*[@id="id3"]/h3/text()}

则消息体模板可以设置为:

{title}的网址是{myurl}

如果title对应的元素选择器提取的内容为“mm”,myurl对应的元素选择器提取的内容为“wzfou.com”,则得到的消息内容为“mm是wzfou.com”。

五、WebMonitor监控实例

5.1 网页内容变动

如果你想要监控某一个网页是否有最新内容更新,你可以用Chrome访问,一般来说最新的内容是放在页面最上方的部分,用Chrome复制Xpath,将该内容的元素复制出来。

WebMonitor查看元素

新建网页监控,填入刚刚复制的Xpath,同时根据你自己的需要加上text()、@href、string()等参数,说明见上方。

WebMonitor填写参数

保存后,你就可以在任务状态中看到运行结果了。

WebMonitor任务状态

如果你选择的微信通知,这时你的微信就会收到WebMonitor发来的网页内容变动通知了。

WebMonitor微信通知

5.2 监控数值变化

WebMonitor可以监控网页中某一个数值的变化。

WebMonitor内容变化

数值的变化可以结合正则规则和监控规则来实现更加灵活通知。

WebMonitor规则设定

正则表达式

如果获取到的文本信息有冗余,可以采用正则进一步筛选,如
价格:1390使用正则([1-9]\d*)提取到纯数字1390

监控规则

默认不填则文本发生变化就发通知,多规则请以’;’分开。存在规则的情况下,如果文本发生变化,从前往后检查规则,若符合其中一项规则就发通知。如下:

规则格式:-规则 参数
支持以下规则:

-without
如:文本发生变化且文本内容不包含上架
-without 上架

-contain
如:文本发生变化且文本内容包含上架
-contain 上架

-increase
如:文本发生变化且相较于旧值,数值增长超过3
如果文本内容不是纯数字,请用正则提取出纯数字,否则将会报错
-increase 3

-decrease
如:文本发生变化且相较于旧值,数值减少超过3
如果文本内容不是纯数字,请用正则提取出纯数字,否则将会报错
-decrease 3

-equal
如:文本发生变化且等于某个值,数值等于3
如果文本内容不是纯数字,请用正则提取出纯数字,否则将会报错
-equal 3

-less
如:文本发生变化且小于某个值,数值小于3
如果文本内容不是纯数字,请用正则提取出纯数字,否则将会报错
-less 3

-more
如:文本发生变化且大于某个值,数值大于3
如果文本内容不是纯数字,请用正则提取出纯数字,否则将会报错
-more 3

选择使用TG通知方式适合大量频繁的变动通知。

WebMonitor得到提醒

六、总结

WebMonitor部署简单,结合监控规则,你可以实现更加灵活的网页信息变动提醒,不过局限就在于个人使用,适合个人打造信息获取平台。

文章出自:挖站否 https://wzfou.com/webmonitor/, 版权所有。本站文章除注明出处外,皆为作者原创文章,可自由引用,但请注明来源。


分享到:
Avatar for Qi
关于站长(Qi),2008年开始混迹于免费资源圈中,有幸结识了不少的草根站长。之后自己摸爬滚打潜心学习Web服务器、VPS、域名等,兴趣广泛,杂而不精,但愿将自己经验与心得分享出来与大家共勉。
已有 9 条评论
  1. Avatar for 2 2

    是否有些網站它檢測不到內容

    2023年10月15日 09:35来自iPhone 回复
    • Avatar for Qi Qi

      有一些动态不行。

      2023年10月24日 23:09 回复
  2. Avatar for test test

    功能很强大呀[草泥马]

    2023年10月15日 01:39 回复
  3. Avatar for test test

    功能很强大呀

    2023年10月15日 01:36 回复
  4. Avatar for dashsdh dashsdh

    这个能和huginn一样有一个去重功能吗

    2023年6月27日 09:57 回复
    • Avatar for Qi Qi

      好像是没有的。

      2023年7月1日 14:00 回复
  5. Avatar for be be

    微信通知这个不错

    2022年8月19日 12:10 回复
  6. Avatar for teg teg

    功能很强大呀

    2022年8月19日 08:45 回复
  7. 这种任务我就写个简单的shell脚本来监控了。
    就不搭建这东西占用资源了[偷笑]

    2022年8月17日 15:32 回复

Login

Welcome! Login in to your account

Remember me Lost your password?

Don't have account. Register

Lost Password

Register