什么是Webhook?工作原理?如何实现?缺点?

什么是Webhook?工作原理?如何实现?

背景

在使用钉钉机器人配置Stream推送 - 钉钉开放平台,qq机器人(微信没有机器人),企业微信机器人、飞书机器人、GitHub WebHook、腾讯问卷这些应用时,

这些应用都提供了Webhook,它允许系统之间在事件发生时主动传递信息,而无需持续轮询。

有的人一开始可能很困惑,什么是Webhook?如何使用?

什么是 Webhook?

通俗一点就是,你(自己的服务器提供一个webhook)在手机(其它支持webhook的平台注册)上定了一个明天早上6点的闹钟(将自己的webhook注册在其它平台上),当时间来到第二天早上6点时候,手机(其它支持webhook的平台)闹钟响起(触发你注册的webhook),你(自己的服务器提供一个webhook)就会听到铃声响起来(自己的服务器上的webhook触发)。

Webhook 是一种简单的 HTTP 回调机制,它允许一个应用程序在事件发生时自动通过 HTTP 请求通知另一个应用程序。这意味着 Webhook 在某个特定事件发生时,自动向指定的 URL 发送数据,通常是 JSON 或 XML 格式。与传统的 API 不同,Webhook 是一种“推送”机制,而不是“拉取”机制。

Webhook 的工作原理

Webhooks 的工作流程可以总结为以下几个步骤:

  1. 事件触发:当某个应用程序中的特定事件发生时,系统就会触发 Webhook。例如,用户完成了一笔支付,或代码库有新的提交。
  2. 发送 HTTP 请求:事件发生后,应用会通过 HTTP 请求(通常是 POST 请求)将事件数据发送到预设的 URL。这个 URL 是接收 Webhook 的端点,通常是另一个应用程序或服务提供的 API。
  3. 数据处理:接收方应用接收到 HTTP 请求后,会解析请求中的数据,并根据这些数据进行相应的操作。例如,它可能会更新数据库,发送通知,或触发其他操作。

Webhook 与 API 的区别

尽管 Webhook 和传统的 API 都用于系统间的数据交换,它们的工作方式有所不同:

  • Webhook:是一种主动通知机制。当事件发生时,Webhooks 会自动发送数据到指定的 URL,而接收方无需发起请求。
  • API:是一种请求-响应模式。接收方必须主动发起请求来获取数据或执行操作。

因此,Webhooks 更适合处理实时事件和通知,特别是在需要快速响应的场景中,如支付确认、CI/CD 构建等。

Webhook 的常见用途

Webhooks 在很多领域都得到了广泛应用,以下是一些典型的应用场景:

  1. 钉钉机器人:通过使用webhook实现各种事件订阅,让开发者应用程序即可接收到事件内容推送。
  2. 支付系统:支付平台(如 Stripe、PayPal)通常使用 Webhook 来通知商家支付状态的变化。当一个支付成功时,支付平台会触发 Webhook 通知商家进行订单更新或发货操作。
  3. 代码托管平台:像 GitHub 或 GitLab 这样的代码托管平台使用 Webhooks 来通知持续集成(CI)系统代码库的变化。例如,推送新的代码或创建拉取请求时,Webhooks 会触发自动化构建、测试或部署。
  4. 社交媒体平台:社交媒体应用(如 Twitter 或 Facebook)可能会使用 Webhooks 来推送实时更新。例如,当某个用户发布了新内容或有评论时,Webhooks 会通知其他系统进行处理。
  5. 聊天应用:像 Slack 或 Discord 这样的聊天平台允许通过 Webhooks 接收外部系统发送的消息,实时更新聊天频道中的内容。

如何实现 Webhook?

**实际开发中,要实现webhook往往更加复杂,需要做算法安全校验。

各大平台都会提供对应的工具包简化操作,按照对应文档即可快捷操作。

所以这里只是做一个简单demo展示接入流程,并不展示真实接入流程**

实现 Webhook 通常分为两个步骤:设置 Webhook URL 和配置事件触发器。

1. 设置 Webhook URL

接收方服务需要定义一个 Webhook 接口(URL),这个 URL 用于接收来自发送方系统的 HTTP 请求。通常,这个接口会解析 HTTP 请求中的数据,并根据业务需求进行处理。

2. 配置发送方

在发送方应用中(如 GitHub、Stripe 等),需要配置 Webhook。当事件发生时,系统会将相关数据通过 HTTP 请求发送到你设置的 Webhook URL。

以下是几个简单的 Webhook 示例,

下面代码展示了如何在 Python 环境中实现接收 Webhook 请求:

from flask import Flask, request ​ app = Flask(__name__) ​ @app.route('/webhook', methods=['POST']) def webhook():   data = request.json   print("Received webhook data:", data)   # 处理数据,例如触发构建   return 'OK', 200 ​ if __name__ == '__main__':   app.run(debug=True) 
在这个示例中,Flask 用来构建一个简单的 HTTP 服务,接收来自其他应用的 POST 请求,并处理传递的 JSON 数据。

下面展示在node环境中使用 Express 来监听 Webhook 请求。

const express = require('express'); const bodyParser = require('body-parser'); ​ const app = express(); const port = 3000; ​ // 使用 bodyParser 中间件来解析 JSON 请求体 app.use(bodyParser.json()); ​ // 定义 Webhook 路由 app.post('/webhook', (req, res) => { // 打印接收到的数据 console.log('Received Webhook:', req.body); ​ // 你可以根据接收到的数据执行相关操作 // 例如:如果是支付成功的通知,更新订单状态 if (req.body.event === 'payment_success') {   console.log('Payment was successful!');   // 在这里处理支付成功后的业务逻辑 } ​ // 响应 Webhook 请求,告诉发送方我们已成功接收 res.status(200).send('OK'); }); ​ // 启动服务 app.listen(port, () => { console.log(`Webhook server listening at http://localhost:${port}`); }); ​ 
这个应用会启动一个监听在 localhost:3000 的服务器,并在 /webhook 路径上接收 HTTP POST 请求。每当一个 Webhook 请求到达时,它会打印请求的内容,并根据数据执行某些逻辑。
4. 测试Webhool

假设你正在与一个外部服务(例如 钉钉机器人、GitHub 或其他)集成,这些服务会在特定事件发生时向你的 Webhook URL 发送 POST 请求。

Webhook 的安全性

为了防止恶意请求,通常需要对 Webhook 请求进行一些安全检查,比如验证签名或验证请求的来源 IP。

由于 Webhook 机制本身没有内建的身份验证和安全性保障,接收方需要采取额外的安全措施来保护 Webhook 请求不被滥用:

  1. 使用签名验证:发送方可以在 HTTP 请求头中附加签名,接收方则可以验证签名来确认请求的合法性。这种方式可以防止恶意攻击者伪造请求。
  2. IP 地址白名单:为了防止来自不可信来源的请求,可以将发送方的 IP 地址加入白名单,只允许来自这些 IP 的 Webhook 请求。
  3. 验证数据:接收方还可以在处理 Webhook 数据时进行额外验证,确保数据的结构和内容是预期的,避免恶意篡改。

webhook缺点

大部分都是采用 Webhook (注册公网 HTTPS 服务)的方式,包括卡片回调,使用 Webhook 方式开发过程中会遇到较多的问题,包括

  • 申请公网域名和TLS证书
  • 申请公网IP并部署接入网关
  • 部署应用防火墙并配置白名单
  • 独立处理请求的鉴权,以及加解密处理
  • 搭建内网穿透环境进行本地开发调试
针对以上问题,有的应用(例如钉钉)提供了stream模式,使用websocket(这种方式也有缺点)实现同样的操作配置Stream推送 - 钉钉开放平台
WebSocket 和 Webhook 各有优缺点,不能完全替代对方

总结

  • 在你的业务对数据的实时性要求较高时。例如:在新员工入职或者离职,部门变更,需要应用第一时间变更用户数据,此时就可以订阅通讯录事件
  • 你的应用需要及时响应用户的操作时。例如:某用户加入某群聊时,应用可以订阅群变更事件,在用户进入群聊的时候,向用户发送欢迎等信息。

以上只是几个非常简单的使用场景,开发者可以根据不同的事件,进行不同的处理。

Read more

前端小案例——网页井字棋

前端小案例——网页井字棋

前言:我们在学习完了HTML、CSS和JavaScript之后,就会想着使用这三个东西去做一些小案例,不过又没有什么好的案例让我们去练手,本篇文章就提供里一个案例——网页井字棋。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-ZEEKLOG博客 目录 写在前面         ——该案例的全部代码已经放在文章末尾,有兴趣的读者可以到最后将全部代码复制到自己的编译器上运行,感受一下井字棋案例的最终效果!!! ——首先先让我们了解一下我们需要了解的前置知识: 1.HTML骨架 2.CSS装饰 1. 引入字体和全局样式 2.设置 body 样式 3 设置 .wrapper 样式 4.设置 .current-status 和其中的元素样式  5.设置 board 和 .cell 样式 6.鼠标悬浮时的图片效果 7.设置 game-end-overlay 样式 8 设置 .winning-message 样式 9.

如何彻底释放LG WebOS电视潜能:第三方应用完全指南

智能电视用户的新选择 【免费下载链接】webos-homebrew-channelUnofficial webOS TV homebrew store and root-related tooling 项目地址: https://gitcode.com/gh_mirrors/we/webos-homebrew-channel 你是否曾对LG WebOS智能电视的官方应用商店感到失望?应用数量有限、功能单一、无法安装第三方工具...这些问题困扰着无数智能设备用户。传统的官方渠道限制了电视的真正潜力,让价值数千元的智能设备变成了"智能"的摆设。 WebOS Homebrew Channel正是为解决这些问题而生。作为非官方的应用商店,它打破了LG WebOS智能电视的应用安装限制,让你能够自由安装各种第三方应用程序,真正释放智能电视的全部潜能。 核心功能解析:为什么选择Homebrew Channel 独立应用仓库系统 WebOS Homebrew Channel提供了一个完全独立的WebOS软件包仓库,支持家庭酿造应用的发现、安装和更新。更重要的是,它支持多个外部仓库,

全员DeepSeek时代,前端能做些什么?

全员DeepSeek时代,前端能做些什么?

全员DeepSeek时代,前端能做些什么? 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,可以分享一下给大家。点击跳转到网站。 https://www.captainbed.cn/ccc DeepSeek开发阶段测试阶段部署阶段智能代码生成设计稿转代码实时代码审查测试用例生成自动化问题定位构建优化建议性能预测模型 一、DeepSeek带来的前端范式变革 1.1 传统前端开发痛点分析 DeepSeek通过以下方式改变工作流程: 1. 代码生成效率提升:组件级代码生成速度提升300% 2. 缺陷预防率提高:静态分析拦截87%的潜在问题 3. 性能优化自动化:构建产物体积平均缩减42% 二、开发阶段的DeepSeek实践 2.1 智能组件生成 // 用户输入自然语言描述const prompt ="生成一个带懒加载的图片轮播组件,支持手势滑动,要求React实现";// DeepSeek生成结果exportconstLazySwiper=({ images })=>{const[swiperRef, setSwiperRef]=useState(nu

Web地图服务开发知识-- 3D 地图开发

Web地图服务开发知识-- 3D 地图开发

其实 3D 地图没那么玄乎,本质上就是在 2D 地图的基础上多了 “高程数据”,有兴趣的同学只需要简单几步就可以实现一个简单的 3D 地图应用。总的来说,3D 地图 = 2D 地图(卫星或者道路瓦片) + 高程数据(DEM / 高程瓦片)+ 3D 渲染(模型 / gltf)。本文会围绕“3D UI 渲染工具”和“高程数据获取”两大块展开。 一、3D 地图的核心内容 * 3D 地形:每个地方的海拔起伏,配合卫星图会非常形象,是 3D 地图必备的能力。图示: * 3D 建筑:建筑通常通过形状和高度来描述,但数量会比较多。OSM 维护了全球的 3D 建筑数据,由全球的相关爱好者提供,