Headless CMS 和 Webhooks 是现代 Web 开发中不可或缺的两部分。Headless CMS 是一种基于 RESTful API 的 CMS 方案，也就是“无头” CMS，它把数据存储和内容管理从界面和模板中分离出来。而 Webhooks 是一种“回调”机制，通过在事件发生时向预定义的 URL 发送 HTTP POST 请求实现实时数据推送。
在本文中，我们将介绍如何使用 Headless CMS 和 Webhooks 实现实时数据推送，以及如何在前端应用中使用这些数据。
Headless CMS
Headless CMS 通常由两部分组成：CMS 后端和前端应用。CMS 后端是管理内容的应用程序，可以存储任意类型的数据，例如文章、产品、图片等。前端应用则负责显示和渲染这些数据，通常是使用 JavaScript 框架（例如 React、Vue、Angular）构建的单页应用程序（SPA）。
Headless CMS 的优势在于其完全分离的后端和前端，可以让开发者专注于构建前端应用，同时不必受限于某种 CMS 的特定功能。使用 Headless CMS 可以快速构建可扩展和易维护的 Web 应用程序。
常见的 Headless CMS
Webhooks
Webhooks 是一种设计模式，允许 API 提供程序以实时方式与 Web 应用程序通信。它是一种机制，可以根据事件的发生自动发送 HTTP POST 请求到预定义的 URL，这个 URL 可以是一个 Web 应用程序的 API 接口。
Webhooks 是许多现代 Web 应用程序的核心组成部分，包括 Github、Slack、Stripe 等等。
Webhooks 的基本原理
当 Webhook 事件发生时，API 提供程序将向预定义的 URL 发送 HTTP POST 请求。这个 URL 应该是一个由 Web 应用程序托管的 API 接口，例如：
https://api.example.com/webhooks/my-webhook
这个 API 接口需要使用一些身份验证方式来保证请求的安全性。一旦请求到达 API 接口，应该能够将其解析为有用的信息，例如：事件类型、事件源、更改的数据等等。
在应用中使用实时数据
实时数据推送的好处在于可以大大提高用户体验。例如，如果用户正在浏览一个电商网站，当该电商网站的库存发生变化（例如某个产品已售罄），应立即更新用户的库存状态。
实现实时数据推送通常需要使用一些额外的工具，包括以下两个部分：
- 在 Webhook URL 上设置监听器；
- 在前端应用程序中实现 Webhook 监听器。
在 Webhook URL 上设置监听器
在 Headless CMS 的后端（例如 Strapi）中设置 Webhook 监听器，使其在事件发生时向 Webhook URL 发送 HTTP POST 请求。在事件发生时，Webhook 将通知 Webhook URL，以便 Web 应用程序可以及时获取最新的数据。
以下是针对 Strapi 的 Webhook 监听器的示例：
-- -------------------- ---- -------
----- ---------- - -----------------------
----- ------- - -------------------
----- ----- - ----------------------
----- --- - ----------
-- -- ----------
-------------------------
------- ----- ---- ---- -- -
----------- - ---
-
----
-- -- ------- ---
------------------------------ ----- ----- ---- ----- -- -
-- - ------ ----------
----- --- - ---------------------------------
----- -------- - ----- -----------
----- -------- - ----- ----------------
-- -----------
---
-- -----
---------------- -- -- -
---------------------- -- ---- ---------
---在上面的代码中，我们首先使用 body-parser 中间件解析 POST 请求体，然后设置 Webhook 监听器（例如 /webhooks/products），在事件发生时获取最新的产品数据。最后，我们可以在监听器中实现我们的数据处理逻辑。
在前端应用程序中实现 Webhook 监听器
一旦 Webhook 监听器将最新数据推送到 Web 应用程序，就可以在前端应用程序中进行数据渲染。我们可以在 Vue 应用程序中使用 watch 方法或在 React 应用程序中使用 useEffect 钩子来监听数据推送：
-- -------------------- ---- -------
-- - --- ------- ----- ---
----- --- - ---------------
------- -
----- -------- - ------------
------------ -- -
-- -- ------ ----
----- --- - ------------------------------------------
----- ----------- - --- -----------------
--------------------------------------- ------- -- -
-- ---------
-------------- - ----------------------
---
---
------ -
--------
-
-
---
-- - ----- ------- --------- --
-------- ----- -
----- ---------- ------------ - -------------
------------ -- -
-- -- ------ ----
----- --- - ------------------------------------------
----- ----------- - --- -----------------
--------------------------------------- ------- -- -
-- ---------
------------------------------------
---
------ -- -- -
--------------------
--
-- ----
------ -
-----
----------------------- -- -
---- -----------------
-----------------------
----------------------------
------
---
------
--
-在上述示例中，我们实现了 watch 方法和 useEffect 钩子，以便在接收到 Strapi 数据推送时更新产品数据。这样，当 Strapi 数据发生更改时，前端应用程序中的产品数据将自动更新，从而实现“实时”更新。
总结
Headless CMS 和 Webhooks 是现代 Web 开发中不可或缺的两部分。使用 Headless CMS 可以快速构建可扩展且易于维护的 Web 应用程序，而 Webhooks 可以实现实时数据推送，提高用户体验。
在本文中，我们介绍了如何在应用程序中使用 Headless CMS 和 Webhooks 实现实时数据推送，以及如何在应用程序中使用数据推送。虽然我们使用的是 Strapi 和 Node.js，但这种方法同样适用于其他 Headless CMS 和语言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64af8efa48841e9894b9e6f1