在现代 web 应用程序中，实时通知成为了一个很受欢迎的功能。其中，实时评论通知对于博客和其他在线出版物是非常重要的，因为它可以提高用户参与度和用户体验。在这篇文章中，我们将学习如何使用 Server-Sent Events（SSEs）实现 WordPress 实时评论通知。
Server-Sent Events 概述
Server-Sent Events 是一种单向通信协议，用于在客户端和服务器之间发送实时事件。它基于 HTTP 协议，而且客户端只需要建立一个长时间的连接，服务器就可以在任何时候通过该连接推送事件到客户端。这使得客户端在没有任何轮询的情况下能够实时接收到服务器端的更新，特别适用于实现实时推送功能。
SSEs 的工作原理非常简单。客户端使用 JavaScript 代码发送一个 GET 请求来建立一个 SSE。如果服务器接受 SSE 请求，它会返回一个 HTTP 响应，其中包含一个专门格式化的 MIME 类型，为 text/event-stream，表示这是 SSE 协议的标识。随后，服务器将开始发送事件到客户端。
在服务器端，需要将事件源(EventSource)对象的 content type 设置为 text/event-stream，并发送格式化好的 SSE 数据。事件的数据格式包括事件名称、数据字段和可选的注释字段。
WordPress 实时评论通知的实现
在 WordPress 网站中，评论通知是一个很受欢迎的功能，因为它可以使读者在他们发布评论时立即知道其他人的回复。考虑使用 SSE 检测新的评论并通知已连接的客户端。
首先，需要建立一个 comments-sse.php 脚本用于 SSE 通知。在该脚本中，引入 WordPress 主文件，以便我们可以访问 WordPress 中定义的方法和常量。然后，使用 header 函数设置 content type 为 text/event-stream，并使用 ob_flush() 和 flush() 函数刷新缓冲区，确保 SSE 数据能够尽快送达客户端。
----- --------------------- -------------------- -- ----- --- ------ -- ------ --- ---- -- ---- -- ------ ----------- -------- -- ---- --- ---- ---- ---- --
接下来，我们在一个名为 wp_sse 的 JavaScript 对象中创建一个方法 init，在其中使用 jQuery 发送 SSE 请求，以及监听 SSE（onmessage）回调函数，用于处理服务器发送的消息。此外，我们还可以提供一个 onopen 回调函数，用于在连接建立时执行一些操作。init 方法应该被在 WordPress 插件或主题的页面底部调用，并且可以在需要时将事件数据传递给服务器端。
--- ------ - -
----- -------- -- -
-- ---- --- -------
--- ------ - --- ------------------------------------------------------------
---------------- - -------- ------- -
-- ------ --- ---- ---- ------
--
------------- - -------- -- -
---------------- ---------- ----------
--
-
--
-- ---- ---- ------ -- ---- ----
-------------------------- -- -
--------------
---到此为止，我们已经完成了 SSE 的客户端和服务器端的设置。现在，我们需要为 SSE 事件提供一个处理程序。使用以下代码，你可以将评论发送到预定义的 SSE 事件的监听器中。
-------------------------- -------- ------------- -
-------- - -------------------------
----- - ------
---- -- ---------------------
------ -- -------------------------
------- -- -------------------------------
----- -- -----------------------------
--------- -- --------------------------
--
----- - -------------------
---- ------- --------------
---- ------ -----------
-- ----- --- ------ -- ------ --- ---- -- ---- -- ------
-----------
--------
---该代码通过 comment_post 动作处理评论的保存，将评论数据 JSON 编码，并将该数据作为 JSON 对象的 SSE 事件名称 wp_comment 发送到客户端。
在客户端，可以使用以下代码处理 wp_comment 事件。
---------------- - -------- ------- -
--- ---- - -----------------------
-- ----------- --- ------------- -
-- ------ --- ------- ----
-
--此代码会解析 wp_comment 事件返回的 JSON 对象，并在接收到新评论时刷新页面内容，以更新新评论的列表。还可以使用其他技术，例如动态添加新评论或显示通知，并在适合的时候使用适当的 UI 和样式。
结论
Server-Sent Events 提供了一种非常有用的技术，可以用于实现实时应用程序中的即时通信。在本文中，我们学习了如何使用 SSE 实现 WordPress 的实时评论通知。这可以提高用户参与度和用户体验，使用户更容易互动和回复评论。
通过本文的介绍，你可能已经掌握了如何在 WordPress 中使用 SSE 实现实时通知功能。希望这个例子可以激发你的想象力，并启发你使用 SSE 开发更多实时应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673812bf317fbffedf0e0b0b