兄弟们，二冰又来了。
这两天群里兄弟越来越多，二冰发现很多兄弟对Webhook不是很了解，“为什么我的Webhook测试能通，生产就不行？”。
讲理论太枯燥，整虚的没用。今天咱们通过搭建一个 「网站自动截图API」，用最简单的逻辑，把n8n里最重要的 *Webhook节点彻底搞明白。
熟悉的兄弟可能已经知道了，这个网站截图前两天不是已经讲过了吗，为什么又要讲一遍，兄弟们先别急，今天我们实现的方式更高级，直接拼接链接就能直接看到截图，再也不用去飞书录入链接，点击按钮，飞书里面看截图了
还有就是这个工作流只有两个节点，就能实现我们需要的截图功能
这期为了演示Webhook的“即时反馈”特性，我们需要用到浏览器模拟插件：
1.硅基流动 API Key
（老规矩，二冰的邀请链接放这了，点一下咱们一人领2000万token，注册完就放那，早晚用得上：https://cloud.siliconflow.cn/i/ttf52sDl ）
2.n8n 社区节点：n8n-nodes-puppeteer（用于模拟浏览器截图）
3.Docker环境：需部署 browserless/chrome（无需显卡，普通服务器就能跑）。
4.一颗想搞懂Webhook的心（这个最重要）。
“以上准备工作的详细图文教程（如怎么申请Key、怎么建应用），二冰都整理在飞书文档里了，还没搞定的兄弟先去看文档，搞定再回来接着整：”
https://ai.feishu.cn/docx/FjX0dIyw4onA4ZxZUFzcczXrnyd?from=from_copylink
逻辑极其简单，n8n 工作流 教程就是为了演示“请求 -> 处理 -> 返回”的闭环：
- 1. 门卫大爷 (Webhook)：有人来敲门，说“我要截百度的图”。
- 2. 摄影师 (Puppeteer)：听到门卫喊话，立马打开浏览器，咔嚓截图。
- 3. 回传照片：把照片通过门卫大爷直接递给敲门的人。
兄弟们，这一期的重点全在第一个节点，请仔细看，看完这一段，你就从小白毕业了。
Webhook在n8n里就是你的 “对外接待窗口”。没有它，你的n8n就是个自嗨的单机游戏；有了它，飞书、企微、网站、甚至Siri都能指挥你的n8n干活。
我们分三个维度来配置它：
Path (路径)：这就是你的“门牌号”。比如二冰这里填 screenshotapi，那你的访问地址就是 你的域名/webhook/screenshotapi。
Method (方式)：
GET：通常用于“获取”数据（比如今天我们要获取截图）。
POST：通常用于“提交”数据（比如飞书机器人发消息）。
二冰提示：今天咱们选 GET。
很多兄弟配置Webhook，默认不管这个，结果发现请求发出去了，只会返回一个 “Workflow started”，拿不到数据。
这里必须改！
Respond to Webhook: 也就是“什么时候回复敲门的人？”
Immediately (默认)：收到请求立马回“收到”，然后后台慢慢跑。适合耗时任务。
Using ‘Respond to Webhook’ Node: 配合专用节点回复，适合极其复杂的逻辑。
When Last Node Finishes (本次必选)：等整个流程跑完，把最后一步的结果扔回去。
二冰实战：因为我们要直接拿到图片，所以这里必须选 When Last Node Finishes，并且 Response Data 选择 First Entry Binary（返回二进制文件）。
这也是群里问的最多的问题。
配置webhook触发器，保证飞书多维表格按钮点击即可触发
一定要复制生产环境的url，请求方式选择get就行。
Test URL：只有当你打开编辑器，点了“Test Workflow”按钮时，这个地址才通。不用的时候它就是断的。
Production URL：当你点右上角 *Activate (激活)后，这个地址永久生效，24小时待命。
二冰总结：自己调试用Test，配置到飞书/代码里或者是我们今天用的地址拼接，一定要用Production！
搞懂了Webhook，接下来就是干活的人了。先安装社区插件。
按照如下步骤即可安装社区节点
头像 >> settings >> 社区节点 >> 安装 >> 输入节点名称 >> 安装就行了
配置如下：
URL: 怎么获取Webhook传进来的网址？用表达式！{{ $json.query.url }}。
解释：因为我们是GET请求，参数都在URL里（例如 ?url=xxx），所以在n8n里叫 query。
Browser WebSocket Endpoint: 填你的 Docker 浏览器地址。
Device: 选 iPad Pro landscape，模拟iPad横屏，截出来的图既清晰又好看，不像电脑网页全是留白。
浏览器打开如下链接
https://你的webhook地址?url=https://你需要截图的网址- 1. 把你的 *Test Webhook URL复制出来。
- 2. 在浏览器地址栏粘贴，并在末尾加上：
?url=https://inbox.ebeb.fun - 3. 回车！
- 4. 你会发现浏览器转圈圈（n8n在后台跑Puppeteer），大概3-5秒后，二冰之前搭的一个网站的高清截图直接显示在你的浏览器里！
这就意味着，你已经成功手搓了一个 截图API！以后任何支持HTTP请求的地方，都能调用它获取图片。
今天的项目有时间也会放到我们自己开发的n8n托管平台上跑，挨个对接确实很费精力
在线网址：http://szp.qazz.site/
因为跑的是我们几个人自己的nas，担心被别人乱用，所以设置了积分，每天可以领点积分，反正基本就够你跑几次了，试跑看效果绝对够用了
兄弟们用着好用可以给宣传宣传
本期实战涉及到的http请求接口详细参数、代码节点详细代码、提示词等已更新到飞书文档，兄弟们自行移步查看：
https://ai.feishu.cn/docx/Crzfdb5shoYN0DxYPSxc21CNnyh?from=from_copylink
发布者：Ai探索者，转载请注明出处：https://javaforall.net/250664.html原文链接：https://javaforall.net
