Logo

菜单

发布于 2026-01-06 1 阅读
0

通过示例，不到一小时即可学会 Webhook。

通过示例，不到一小时即可学会 Webhook。

介绍

本指南是对 Webhook 的介绍。您将了解 Webhook 的概念，并使用一个用 JavaScript 编写的非常简单的 Webhook 示例服务器来处理来自 Webhook 提供商的 Webhook 请求。

或者，您也可以获取该开源代码并将其用于更具体的用途。

先决条件

我们将使用一种编程语言，即 JavaScript，来编写所有代码。

这是大多数程序员都会了解的语言，但你其实不需要了解它就能完成本指南，因为所有的代码都已经为你编写好了。

如果你想获取开源代码，并以此为基础进行更具体的事情，那么了解 JavaScript 可能会很有用。

您需要安装Git和NodeJS。

什么是Webhook？

Webhook 是 Webhook 提供商向您的服务器发出的请求。

它们之所以被称为“web”，是因为它们基于HTTP协议，而HTTP正是构建Web的基础协议。它运行Web应用程序、网站和API。

它们就像反向的 API。使用 API 时，你会向 API 提供商发出请求。而 Webhook 则反过来执行这个流程。

不是你的代码向 API 提供商发送 HTTP 请求，而是 Webhook 提供商向你发送 HTTP 请求。你的代码接收到请求后，会对其进行处理。

webhook 请求的例子包括 Stripe 向您发送有关新付款的通知，或者 IFTTT 向您发送有关您 Twitter 帐户中新推文的通知。

还有无数其他例子。

  • 当有新用户注册您的新闻邮件时，Mailchimp 可以向您发送一个 Webhook。
  • 当您收到新消息时，Facebook Messenger 可以向您发送 webhook。
  • 每当有新的提交推送到你的 Git 仓库时，GitHub 都会向你发送 Webhook。

此图简要概述了 Webhook 的工作原理：

您可以想象，webhook 可用于通知您的代码诸如已处理的付款、新消息、需要执行的任务等事件。

他们可以自动完成很多以前需要大量轮询或人工操作的事情，例如，与其每小时多次轮询服务以获取更新，不如让该服务向您发送一个包含所需信息的 webhook 请求。

既然你已经了解了 webhook 这个词的含义，那么让我们来搭建一个简单的 webhook 服务器。

获取代码

我们将使用我用 JavaScript 编写的多语言 webhook 示例服务器。它非常通用，应该可以与大多数 webhook 提供商兼容。

该应用程序有一个通用端点，可以接收任何HTTP POSTwebhook 请求（我们稍后会详细介绍HTTP POST）。

克隆源代码git clone https://github.com/cipher-code/polyglot-webhook-example.git：

然后运行命令npm install安装依赖项并npm start启动服务器。如果此方法无效，请检查您的互联网连接是否畅通，是否存在防火墙或限制（例如公司网络限制）。

你很快就会看到类似这样的内容：

> express-api-webhook-example@0.0.1 start /home/robbie/projects/polyglot-webhook-example
> node app.js

Polyglot webhook example server listening at http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

请查看 app.js 文件。

打开应用并查看 app.js 文件。你会看到以下内容：

顶部部分初始化了 Express express，这是一个轻量级的 JavaScript 框架和 Web 服务器。之前运行该程序时npm install，它会自动使用 Express 安装 Express npm。

这段代码设置了一个端点，/webhook-receive它将响应任何 HTTP 请求，包括 HTTPS 、HTTPS 或GETHTTPSPOST请求。大多数 webhook 请求都将是这些请求之一。PUTDELETE

当收到 webhook 请求时，它会将请求信息输出到控制台，以便通知您。

启动应用程序时，它将在本地主机上的端口监听3000。

如果你对以上内容有任何疑问或不理解，请不要担心。你仍然可以测试你的 Webhook，以后再学习这些知识。

获取服务器的公共 HTTPS URL

您可能还记得启动服务器时的输出：

Polyglot webhook example server listening at http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

这意味着服务器正在监听localhost端口3000。如果您是 Webhook 新手，您可能会认为可以将 Webhook 提供商的 Webhook 端点配置为http://localhost:3000/webhook-receive。

这其中存在一些问题。

首先，`https:// localhostexample.com/webhook/` 不是一个任何人都能访问的公共 URL。`https://example.com/webhook/`localhost是一个特殊地址，它代表你自己的机器localhost。也就是说，如果你向 `https://example.com/webhook/` 发送请求，实际上是向你自己的机器发送请求。同样地，如果你的 Webhook 提供商向 `https://example.com/webhook/` 发送请求，localhost实际上也是向他们自己的服务器发送请求。

第二点是，它是普通的未加密 HTTP，很多 webhook 提供商只有在你使用 HTTPS 时才会向你发送请求。

解决这些问题的缓慢且昂贵的方法是购买 HTTPS 证书，将代码部署到服务器，将您拥有的域名指向该服务器并配置 HTTPS。这很耗时，而且您可能根本不知道如何操作。此外，这种方法也无法帮助您在本地计算机上测试代码，而本地测试可以让您在不部署的情况下轻松快速地进行所需的更改。

最快捷的方法是使用我创建的名为 的工具expose，它只需一个命令即可为您提供一个公共 https url。

安装并运行 expose.sh

对于 Mac 或 Linux 系统，请访问Expose.sh并复制/粘贴显示的安装代码到终端中。

对于 Windows 系统，请访问Expose.sh，下载二进制文件并将其放在 PATH 环境变量中的某个位置。

安装完成后expose，运行expose 3000。

Expose.sh 会在随机子域名上生成几个公开的 expose.sh URL。你会看到类似这样的输出：

expose 3000
http://m2hh3u.expose.sh is forwarding to localhost:3000
https://m2hh3u.expose.sh is forwarding to localhost:3000
Enter fullscreen mode Exit fullscreen mode

第一个网址是HTTP，第二个网址是HTTPS。

测试您的新公共 HTTPS 端点

您的网络浏览器不仅可以访问网站，它还是一个 HTTP 客户端，这意味着您可以使用它来测试您新建的公共 HTTPS Webhook 端点是否按预期工作。

使用系统生成的 HTTPS URL expose，在浏览器中访问<your https url>/webhook-receive。以我上面的输出为例，我的 URL 是https://m2hh3u.expose.sh/webhook-receive：

您现在应该会看到类似这样的响应。我使用的是 Firefox 浏览器，但任何浏览器应该都可以：

如果您能在浏览器中看到响应，则表示您已成功设置了带有公共 HTTPS URL 的 Webhook 服务器。请保存此 URL，稍后会再次用到。

如果以后想进行更高级的测试，可以使用 Postman 之类的工具，或者curl使用其他 HTTP 客户端，它们比 Web 浏览器有更多选项，例如能够发送POST其他类型的请求。

配置您的 Webhook 提供商设置并从您的提供商发送 Webhook 请求

现在您已经拥有一个可用的 webhook 服务器和一个公共 HTTPS URL，您需要配置您的提供商并执行一些操作，以触发他们向您发送请求。

配置 webhook 提供商的步骤因提供商而异，因此请查看 webhook 提供商网站上的文档。

将您在网页浏览器测试中使用的完整 URL 复制并粘贴到 Webhook 提供商设置的端点字段中。有时端点字段可能被称为 URL 或其他名称。

现在执行一些你预期会触发 webhook 请求的操作，例如发送短信（对于 Twilio）或提交代码（对于 GitHub）。然后检查控制台输出（你npm start之前运行命令的地方），你应该会在请求成功接收时看到一条消息。例如，如果你收到GETwebhook 请求，你会看到类似这样的内容：

Received GET webhook request
Full URL: /webhook-receive
Enter fullscreen mode Exit fullscreen mode

如果您在控制台中看到类似这样的消息，恭喜！您已成功设置端到端的 webhook 集成。

如果您之前在浏览器中看到了响应，但控制台中却没有记录任何消息，这可能是由于配置错误或 Webhook 提供商的 bug 造成的，因为您已经确认自己的配置和运行正常。因此，请务必仔细查看 Webhook 提供商网站上的相关文档。

很多服务商都提供联系其支持团队的渠道，如果您需要帮助，代码就在这里（GitHub 上），他们会向您索取。请访问他们的网站获取联系方式。

自定义子域名

因为expose默认情况下会生成随机子域名，所以使用自定义子域名（例如myapi.expose.sh）可以避免每次expose在 webhook 提供程序中运行时都需要重新配置不同的端点。

Expose.sh 可以免费用于生成随机子域名。如果您想使用自定义子域名，例如 `example.com` myapi.expose.sh，则需要支付每月 4.99 美元起的费用，具体价格取决于您需要使用的域名数量。您的支持也有助于我维持服务的运行。

考虑到大多数使用 expose.sh 进行工作的人的时薪，以及节省下来的重复重新配置时间（您可以将这些时间重新投入到更有成效或更有趣的活动中），这通常是一项不错的时间与金钱投资。

这里有一个使用自定义子域名的示例，您可以在这里注册以获取随机子域名。

expose 80 as mysite.expose.sh
https://mysite.expose.sh is forwarding to localhost:80
http://mysite.expose.sh is forwarding to localhost:80
Enter fullscreen mode Exit fullscreen mode

结论

归根结底，Webhook 的原理相当简单。它们实际上只是 Webhook 提供商向您的服务器发送的普通 HTTP 请求。由于请求并非由您发送，而且您需要一个公开的 URL，因此测试起来可能比较棘手，这时就expose可以借助一些工具来辅助测试。

延伸阅读

祝您编程愉快！

附录 - 可使用 Webhook 的服务列表

除了我们提到的服务之外，以下是我们了解到的更多支持 Webhook 的服务。既然您已经了解了 Webhook，不妨尝试将其集成到您的系统中。

  • Facebook
  • Github
  • 松弛
  • 电报
  • 詹金斯
  • Bitbucket
  • 条纹
  • Zapier
  • Sendgrid
  • Shopify
  • WordPress（查找 wp webhooks 插件）
  • 对话流
  • Azure
  • Twilio
  • Mailchimp
  • HubSpot
  • 格拉法纳
  • Airtable
  • IFTTT
  • Kubernetes
  • Microsoft Flow
  • Meraki
  • AWS
  • Firebase
  • 叽叽喳喳
  • CircleCI
  • 邮件枪
  • 重力形态
  • DocuSign
  • Blynk
  • Google 助理
  • 管道驱动
  • Typeform
  • Xero
文章来源：https://dev.to/robbiecahill/learn-webhooks-in-under-an-hour-by-example-25gg
2020年黑色星期五🎁和网络星期...
NgRx v14 正式发布：新增动...