在现代的 Web 开发中，前端和后端的分离已经成为了一种趋势，由此引出的无头 CMS (Headless CMS) 的概念也逐渐被广泛接受，Headless CMS 常被戏称为提供内容 API 的 CMS。
但是，如果你在使用 Headless CMS 的过程中，遇到了不同的站点之间需要同步内容的问题，Webhooks 就是一个很好的解决方案。
什么是 Webhooks
Webhooks 可以理解为在特定事件发生时，把某些信息传递给指定的 URL 的一种方式。如果你已经玩过 GitHub 的 Webhooks，就不难理解这个概念。
通过使用 Headless CMS 提供的 Webhooks 功能，我们可以在多个站点之间实现内容的同步。
在跨站点内容同步方案中，我们需要一个目标站点，它会在其中定义一个负责接收内容更新事件的 URL，这个 URL 就是 Webhooks。
如何实现
在 Headless CMS 中，这个过程通常分为以下几个步骤：
1. 创建 Webhooks
我们可以在 Headless CMS 的控制面板中创建 Webhooks，通常需要填写 URL 和触发时机（比如发布/取消发布、保存/更新）等信息。
假设您使用的是 Strapi，则 canary 版本（4.x）以上的 Strapi 已经内置了 Webhooks 模块，您可以在插件选项中查看是否启用，默认使用了 NPM 的 @strapi/webhooks 模块。
// 安装 Strapi 的 Webhooks 模块 npm install --save @strapi/webhooks
2. 配置事件处理程序
接下来，您需要在目标站点中为 Webhooks 注册一个事件处理程序，并将其绑定到 Webhooks。
在 Strapi 中，事件处理程序是使用钩子（hook）的形式实现的。因为使用了钩子，开发者可以轻松地在任何 Strapi 应用程序中添加自定义代码。
-- -------------------- ---- -------
-- ---- ---------- --
-- ---- ---------------- --
-- --- ------ --- ------ ------- --------- ---
-------------- - ----- ----- ----- -- -
-- ----------------- --- ---------- -
----- --------- - ------------ -- ------------------
----- ------- - ----- --------------------------------- --- --------- ---
-- ---- - --------- -
-- ---------- -------------- -- ------ ----- ---
-- ----------------
----- ------------------------------------------ ---------
-
----- -------
--在 Strapi 中，事件对象是一个数组，其中包含更新的实体类型和 ID。
如果我们要从源站点 A 同步文章内容，需要获取到更新前和更新后的文章实例，然后将更新后的内容发布到目标站点 B。
在示例中，我们使用了 Axios 模块来发送 POST 请求。在实际开发中，我们也可以使用其他方法来发送 HTTP 请求。
3. 接收来自 Headless CMS 的 Webhooks 事件请求
当文章在来源站点 A 中更新时，Headless CMS 将发送 Webhooks 请求到目标站点 B。目标站点 B 将处理并响应每个事件请求。
在 Express.js 中，我们可以使用一个适当的插件（例如 body-parser）来解析来自 Headless CMS 的 Webhooks 请求中的数据，并为其定义一个完整的路由。
-- -------------------- ---- ------- -- -- ----------- -- --- ------- ------ ----------- -- -- ------------- ----- ---------- - ----------------------- -- - -------- ---------- - ----------- -- -- ------------------- -- ----- --- - --------------------- --------------------------- -- ------------- -------- ---- --------------------------- ----- ---- -- - --------------------- --- --------------- -- -- -------- ------- --------------------------- --- -- --------- ---------------- -- -- ------------------------
学习和指导意义
使用 Webhooks 实现内容同步有很多好处，其中包括节约时间和劳动力，并使您对站点之间内容同步的控制更加直接。
Webhooks 还可以使您的团队更好地协作。例如，在一个多人团队中，我们可能需要一个人将所有文章清单放在博客站点中，还需要另一个人将所有文章信息清单放入文档站点中。
此外，使用 Webhooks 同步内容还可以实现站点的统一和标准化。当您需要将某种格式的内容设置为站点之间的共享方式时，Webhooks 是一个理想的选择。
最后，使用 Webhooks 可以帮助您更好地组织和管理您的站点。例如，如果您有多个 Strapi 实例，您可以使用 Webhooks 在所有实例之间同步数据，这使得使用 Headless CMS 更容易管理和维护。
示例代码
下面是一个简化的示例：
-- -------------------- ---- -------
-- ---- ---- ---- --
----- --- - ---------------------
----- ---------- - -----------------------
----- ----- - -----------------
-- -- ------------------- -- -------- --- -------- -----
---------------------------
-- -- -------- ------
--------------------------- ----- ----- ---- -- -
----- - ------- --- ---- - - ---------------
--------------------- --- --------------------
-- ------- --- ---------- -
----- --------- - -- -- --------
----- ------- - ----- -------------------------------------------------------
-- --------------
----- ------------------------------------------ --------------
-
--------------------
---
-- -- ------- ---
---------------- -- -- -
----------------- - --------
---结论
Webhooks 提供了一种灵活和强大的方式来同步内容和数据，使得使用 Headless CMS 更加强大和多功能。实际上，使用 Webhooks 可以在多个站点之间使内容同步变得更加简单和直观。
对于使用 Headless CMS 的站点，Webhooks 的使用不仅仅是实现跨站点内容同步，而且还可以用于实现 Web 应用程序的各种事件处理需求，例如往 Slack 发送通知、自动化部署等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6731c5bb0bc820c5823a532f