TLDR;
在本教程中，您将学习如何使用 React 和 NodeJS 构建一个 Web 应用程序，该应用程序允许您将 ChatGPT 生成的通知发送给您的用户。
介绍
我一生中制造了许多产品。
在所有这些中，我都必须以某种形式向用户发送通知。
它可以是一封“欢迎邮件”或通知用户他们还没有支付最后一张发票 😀
但有一件事是肯定的。我是程序员，不是文案。
那么我如何为我的通知提供正确的消息呢？
一年多以前，我在玩 GPT+3，结果不错，但我无法在自动化生产中使用它。
但 ChatGPT 改变了游戏规则。
什么是聊天 GPT？
ChatGPT是一种由OpenAI 训练的 AI 语言模型， 可以生成文本并以类似人类的对话方式与用户进行交互。值得一提的是，ChatGPT 是免费开放给公众使用的。
用户可以在几秒钟内提交请求并获得信息或问题的答案，主题范围广泛，例如历史、科学、数学和时事。
ChatGPT 执行其他任务，例如校对、释义和翻译。它还可以帮助编写、调试和解释代码片段。其广泛的功能是 ChatGPT 一直流行的原因。
主要问题是它还不能与 API 一起使用。
但这不会阻止我们😈
Novu - 第一个开源通知基础设施
简单介绍一下我们的背景。Novu 是第一个开源通知基础设施。我们基本上帮助管理所有产品通知。它可以是应用程序内（像您在 Facebook - Websockets中的铃铛图标）、电子邮件、短信等。
如果你能给我们一颗星，我会非常高兴！并在评论中让我知道❤️
GitHub - novuhq/novu: The open-source notification infrastructure for products. Add a notification center for your React, Vue and Angular apps 🚀
ChatGPT 的限制
正如我之前提到的，ChatGPT 不能作为公共 API 使用。
因此，要使用它，我们必须设法进入。
这意味着我们将在登录 OpenAI 网站时执行完整的浏览器自动化，解决他们的验证码（为此，您可以使用2captcha），并发送 API 请求使用 OpenAI cookie。
幸运的是，有人已经建立了一个公共图书馆，可以在这里完成所有这些工作。
仅供参考，这不是一个 API，如果您尝试发出很多请求，您将遇到硬性限制，当然，您将无法将它用于实时请求。
如果要使用它，请使用队列并进行后台处理。如果你想知道怎么做，请在评论中写信给我，我会再写一篇关于它的文章。
项目设立
在这里，我将指导您为 Web 应用程序创建项目环境。我们将在前端使用 React.js，在后端服务器使用 Node.js。
通过运行以下代码为 Web 应用程序创建项目文件夹：
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">mkdir </span>react-chatgpt
-
<span style="color:var(--syntax-text-color)">cd </span>react-chatgpt
-
<span style="color:var(--syntax-text-color)">mkdir </span>client server
-
</code></span></span>
设置 Node.js 服务器
导航到服务器文件夹并创建一个package.json文件。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">cd </span>server & npm init <span style="color:var(--syntax-error-color)">-y</span>
-
</code></span></span>
安装 Express、Nodemon 和 CORS 库。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>npm <span style="color:var(--syntax-text-color)">install </span>express cors nodemon
-
</code></span></span>
ExpressJS是一个快速、极简的框架，它提供了在 Node.js 中构建 Web 应用程序的多种功能， CORS是一个允许不同域之间通信的 Node.js 包，而 Nodemon是一个在检测到文件后自动重启服务器的 Node.js 工具变化。
创建index.js文件 - Web 服务器的入口点。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">touch </span>index.js
-
</code></span></span>
使用 Express.js 设置 Node.js 服务器。当您http://localhost:4000/api在浏览器中访问时，下面的代码片段会返回一个 JSON 对象。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">//👇🏻index.js</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">express</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">require</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">express</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">cors</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">require</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">cors</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">app</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">express</span><span style="color:var(--syntax-text-color)">();</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">PORT</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-literal-color)">4000</span><span style="color:var(--syntax-text-color)">;</span>
-
-
<span style="color:var(--syntax-name-color)">app</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">use</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">express</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">urlencoded</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">extended</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">true</span> <span style="color:var(--syntax-text-color)">}));</span>
-
<span style="color:var(--syntax-name-color)">app</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">use</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">express</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">json</span><span style="color:var(--syntax-text-color)">());</span>
-
<span style="color:var(--syntax-name-color)">app</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">use</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">cors</span><span style="color:var(--syntax-text-color)">());</span>
-
-
<span style="color:var(--syntax-name-color)">app</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-declaration-color)">get</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">/api</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">json</span><span style="color:var(--syntax-text-color)">({</span>
-
<span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Hello world</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
-
<span style="color:var(--syntax-text-color)">});</span>
-
<span style="color:var(--syntax-text-color)">});</span>
-
-
<span style="color:var(--syntax-name-color)">app</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">listen</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">PORT</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">`Server listening on </span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">PORT</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-text-color)">});</span>
-
</code></span></span>
安装 ChatGPT API 库 和 Puppeteer。ChatGPT API 使用 Puppeteer 作为可选的对等依赖项来自动绕过 Cloudflare 保护。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>npm <span style="color:var(--syntax-text-color)">install </span>chatgpt puppeteer
-
</code></span></span>
要在 中使用 ChatGPT API server/index.js，您需要将文件配置为同时使用require和import关键字来导入库。
因此，更新server/package.json以包含 type 关键字。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-text-color)">"type"</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"module"</span> <span style="color:var(--syntax-text-color)">}</span>
-
</code></span></span>
在文件顶部添加下面的代码片段server/index.js。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">createRequire</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">module</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">require</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">createRequire</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">import</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">meta</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">url</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-comment-color)">//...other code statements</span>
-
</code></span></span>
完成最后两个步骤后，您现在可以在index.js文件中使用 ChatGPT。
通过将启动命令添加到package.json文件中的脚本列表来配置 Nodemon。下面的代码片段使用 Nodemon 启动服务器。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>//In server/package.json
-
-
<span style="color:var(--syntax-text-color)">"scripts"</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-text-color)">"test"</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"echo </span><span style="color:var(--syntax-literal-color)">\"</span><span style="color:var(--syntax-string-color)">Error: no test specified</span><span style="color:var(--syntax-literal-color)">\"</span><span style="color:var(--syntax-string-color)"> && exit 1"</span><span style="color:var(--syntax-text-color)">,</span>
-
<span style="color:var(--syntax-text-color)">"start"</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"nodemon index.js"</span>
-
<span style="color:var(--syntax-text-color)">}</span>,
-
</code></span></span>
恭喜！您现在可以使用以下命令启动服务器。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>npm start
-
</code></span></span>
设置 React 应用程序
通过终端导航到客户端文件夹并创建一个新的 React.js 项目。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">cd </span>client
-
npx create-react-app ./
-
</code></span></span>
安装 React Router - 一个 JavaScript 库，使我们能够在 React 应用程序的页面之间导航。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>npm <span style="color:var(--syntax-text-color)">install </span>react-router-dom
-
</code></span></span>
从 React 应用程序中删除多余的文件，例如徽标和测试文件，并更新App.js文件以显示“Hello World”，如下所示。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">App</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">p</span><span style="color:var(--syntax-text-color)">></span>Hello World!<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">p</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-text-color)">}</span>
-
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-name-color)">App</span><span style="color:var(--syntax-text-color)">;</span>
-
</code></span></span>
导航到该src/index.css文件并复制下面的代码。它包含设置此项目样式所需的所有 CSS。
-
<
span style="
color:
var(--syntax-text-color)
"><span style="color:
var(--syntax-text-color)
"><code><span style="color:
var(--syntax-declaration-color)
">@import</span> <span style="color:
var(--syntax-string-color)
">url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@
300;
400;
500;
600;
700&
display=swap")</
span><
span style="
color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-error-color)
">*</span> <span style="color:
var(--syntax-text-color)
">{</span>
-
<span style="color:
var(--syntax-text-color)
">box-sizing</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-text-color)
">border-box</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">margin</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">0</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">padding</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">0</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">font-family</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-string-color)
">"Space Grotesk
"</span><span style="color:
var(--syntax-text-color)
">,</span> <span style="color:
var(--syntax-text-color)
">sans-serif</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">}</span>
-
<span style="color:
var(--syntax-error-color)
">body</span> <span style="color:
var(--syntax-text-color)
">{</span>
-
<span style="color:
var(--syntax-text-color)
">margin</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">0</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">padding</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">0</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">}</span>
-
<span style="color:
var(--syntax-error-color)
">textarea</span><span style="color:
var(--syntax-error-color)
">,</span>
-
<span style="color:
var(--syntax-error-color)
">select</span> <span style="color:
var(--syntax-text-color)
">{</span>
-
<span style="color:
var(--syntax-text-color)
">padding</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">10px</span> <span style="color:
var(--syntax-literal-color)
">15px</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">margin-bottom</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">15px</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">border</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">1px</span> <span style="color:
var(--syntax-text-color)
">solid</span> <span style="color:
var(--syntax-literal-color)
">#ddd</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">border-radius</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">5px</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">}</span>
-
<span style="color:
var(--syntax-name-color)
">.notification__form</span> <span style="color:
var(--syntax-text-color)
">{</span>
-
<span style="color:
var(--syntax-text-color)
">width</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">80%</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">display</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-text-color)
">flex</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">align-items</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-text-color)
">left</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">justify-content</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-text-color)
">center</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">flex-direction</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-text-color)
">column</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">}</span>
-
<span style="color:
var(--syntax-name-color)
">.homeContainer</span> <span style="color:
var(--syntax-error-color)
">h3</span><span style="color:
var(--syntax-error-color)
">,</span>
-
<span style="color:
var(--syntax-error-color)
">textarea</span> <span style="color:
var(--syntax-text-color)
">{</span>
-
<span style="color:
var(--syntax-text-color)
">margin-bottom</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">20px</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">}</span>
-
<span style="color:
var(--syntax-name-color)
">.notification__form</span> <span style="color:
var(--syntax-error-color)
">button</span> <span style="color:
var(--syntax-text-color)
">{</span>
-
<span style="color:
var(--syntax-text-color)
">width</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">200px</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">padding</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">15px</span> <span style="color:
var(--syntax-literal-color)
">10px</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">cursor</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-text-color)
">pointer</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">outline</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-text-color)
">none</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">border</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-text-color)
">none</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">background-color</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">#82aae3</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">border-radius</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">5px</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">margin-bottom</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">15px</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">}</span>
-
<span style="color:
var(--syntax-name-color)
">.navbar</span> <span style="color:
var(--syntax-text-color)
">{</span>
-
<span style="color:
var(--syntax-text-color)
">width</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">100%</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">height</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">10vh</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">padding</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">20px</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">background-color</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">#82aae3</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">display</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-text-color)
">flex</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">align-items</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-text-color)
">center</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">justify-content</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-text-color)
">space-between</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">}</span>
-
<span style="color:
var(--syntax-name-color)
">.homeContainer</span> <span style="color:
var(--syntax-text-color)
">{</span>
-
<span style="color:
var(--syntax-text-color)
">width</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">100%</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">min-height</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-literal-color)
">100vh</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">display</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-text-color)
">flex</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">align-items</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-text-color)
">center</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">justify-content</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-text-color)
">center</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">flex-direction</span><span style="color:
var(--syntax-text-color)
">:</span> <span style="color:
var(--syntax-text-color)
">column</span><span style="color:
var(--syntax-text-color)
">;</span>
-
<span style="color:
var(--syntax-text-color)
">}</span>
-
</code></span></span>
更新App.js文件以呈现 Home 组件，如下所示：
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">React</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
-
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">BrowserRouter</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">Route</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">Routes</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react-router-dom</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
-
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">Home</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">./components/Home</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
-
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">App</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">BrowserRouter</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Routes</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Route</span> <span style="color:var(--syntax-name-color)">path</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">'/'</span> <span style="color:var(--syntax-name-color)">element</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Home</span> <span style="color:var(--syntax-text-color)">/></span><span style="color:var(--syntax-string-color)">}</span> <span style="color:var(--syntax-text-color)">/></span>
-
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">Routes</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">BrowserRouter</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-text-color)">};</span>
-
-
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-name-color)">App</span><span style="color:var(--syntax-text-color)">;</span>
-
</code></span></span>
从上面的代码片段中，我导入了 Home 组件。创建一个包含该Home.js文件的组件文件夹，如下所示：
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">cd </span>client
-
<span style="color:var(--syntax-text-color)">mkdir </span>components
-
<span style="color:var(--syntax-text-color)">cd </span>components
-
<span style="color:var(--syntax-text-color)">touch </span>Home.js
-
</code></span></span>
将下面的代码片段复制到Home.js文件中：
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">React</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">useState</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
-
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">Home</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">setMessage</span><span style="color:var(--syntax-text-color)">]</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useState</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">subscriber</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">setSubscriber</span><span style="color:var(--syntax-text-color)">]</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useState</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-text-color)">);</span>
-
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">handleSubmit</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">preventDefault</span><span style="color:var(--syntax-text-color)">();</span>
-
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">subscriber</span> <span style="color:var(--syntax-text-color)">});</span>
-
<span style="color:var(--syntax-name-color)">setMessage</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-name-color)">setSubscriber</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-text-color)">};</span>
-
-
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">'home'</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">nav</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">'navbar'</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h2</span><span style="color:var(--syntax-text-color)">></span>Notify<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h2</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">nav</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">main</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">'homeContainer'</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h3</span><span style="color:var(--syntax-text-color)">></span>Send notifications to your users<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h3</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">form</span>
-
<span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">'notification__form'</span>
-
<span style="color:var(--syntax-name-color)">onSubmit</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">handleSubmit</span><span style="color:var(--syntax-string-color)">}</span>
-
<span style="color:var(--syntax-name-color)">method</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">'POST'</span>
-
<span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">label</span> <span style="color:var(--syntax-name-color)">htmlFor</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">'title'</span><span style="color:var(--syntax-text-color)">></span>Notification Title<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">label</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">textarea</span>
-
<span style="color:var(--syntax-name-color)">rows</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-literal-color)">5</span><span style="color:var(--syntax-string-color)">}</span>
-
<span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">'title'</span>
-
<span style="color:var(--syntax-name-color)">required</span>
-
<span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-string-color)">}</span>
-
<span style="color:var(--syntax-name-color)">onChange</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">setMessage</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">target</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">)</span><span style="color:var(--syntax-string-color)">}</span>
-
<span style="color:var(--syntax-name-color)">placeholder</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">'Let the user know that'</span>
-
<span style="color:var(--syntax-text-color)">/></span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">label</span> <span style="color:var(--syntax-name-color)">htmlFor</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">'subscriber'</span><span style="color:var(--syntax-text-color)">></span>Subscribers<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">label</span><span style="color:var(--syntax-text-color)">></span>
-
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">select</span>
-
<span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">subscriber</span><span style="color:var(--syntax-string-color)">}</span>
-
<span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">'subscriber'</span>
-
<span style="color:var(--syntax-name-color)">onChange</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">setSubscriber</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">target</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">)</span><span style="color:var(--syntax-string-color)">}</span>
-
<span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">option</span> <span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">'Select'</span><span style="color:var(--syntax-text-color)">></span>Select<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">option</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">select</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">button</span><span style="color:var(--syntax-text-color)">></span>SEND NOTIFICATION<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">button</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">form</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">main</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-text-color)">};</span>
-
-
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-name-color)">Home</span><span style="color:var(--syntax-text-color)">;</span>
-
</code></span></span>
如何将 Novu 添加到 React 和 Node.js 应用程序
我们将使用 Novu 发送应用内通知，但如果您想构建应用内通知，请跳过此步骤。
将 Novu 添加到 React 应用程序
通过在客户端文件夹中运行以下代码来创建 Novu 项目。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">cd </span>client
-
npx novu init
-
</code></span></span>
在创建 Novu 项目之前，您需要使用 Github 登录。下面的代码片段包含运行后应遵循的步骤npx novu init。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>Now <span style="color:var(--syntax-text-color)">let</span><span style="color:var(--syntax-string-color)">'s setup your account and send your first notification
-
❓ What is your application name? Devto Clone
-
❓ Now lets setup your environment. How would you like to proceed?
-
> Create a free cloud account (Recommended)
-
❓ Create your account with:
-
> Sign-in with GitHub
-
❓ I accept the Terms and Condidtions (https://novu.co/terms) and have read the Privacy Policy (https://novu.co/privacy)
-
> Yes
-
✔️ Create your account successfully.
-
-
We'</span>ve created a demo web page <span style="color:var(--syntax-declaration-color)">for </span>you to see novu notifications <span style="color:var(--syntax-declaration-color)">in </span>action.
-
Visit: http://localhost:57807/demo to <span style="color:var(--syntax-declaration-color)">continue</span>
-
</code></span></span>
访问演示网页http://localhost:52685/demo，从页面复制您的订阅者 ID，然后单击“跳过教程”按钮。我们将在本教程的后面部分使用它。
在 React 项目中安装 Novu Notification 包作为依赖项。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>npm <span style="color:var(--syntax-text-color)">install</span> @novu/notification-center
-
</code></span></span>
更新components/Home.js文件以包含 Novu 及其 文档中的必需元素。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-name-color)">NovuProvider</span><span style="color:var(--syntax-text-color)">,</span>
-
<span style="color:var(--syntax-name-color)">PopoverNotificationCenter</span><span style="color:var(--syntax-text-color)">,</span>
-
<span style="color:var(--syntax-name-color)">NotificationBell</span><span style="color:var(--syntax-text-color)">,</span>
-
<span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">@novu/notification-center</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
-
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">useNavigate</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react-router-dom</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
-
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">Home</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">navigate</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useNavigate</span><span style="color:var(--syntax-text-color)">();</span>
-
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">onNotificationClick</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">notification</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-name-color)">navigate</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">notification</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">cta</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">url</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-text-color)">};</span>
-
<span style="color:var(--syntax-comment-color)">//...other statements</span>
-
-
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">'home'</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">nav</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">'navbar'</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h2</span><span style="color:var(--syntax-text-color)">></span>Notify<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h2</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">NovuProvider</span>
-
<span style="color:var(--syntax-name-color)">subscriberId</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)"><YOUR_SUBSCRIBER_ID></span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">}</span>
-
<span style="color:var(--syntax-name-color)">applicationIdentifier</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)"><YOUR_APP_ID></span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">}</span>
-
<span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">PopoverNotificationCenter</span> <span style="color:var(--syntax-name-color)">onNotificationClick</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">onNotificationClick</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">unseenCount</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">(</span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">NotificationBell</span> <span style="color:var(--syntax-name-color)">unseenCount</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">unseenCount</span><span style="color:var(--syntax-string-color)">}</span> <span style="color:var(--syntax-name-color)">colorScheme</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">'light'</span> <span style="color:var(--syntax-text-color)">/></span>
-
<span style="color:var(--syntax-text-color)">)</span><span style="color:var(--syntax-string-color)">}</span>
-
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">PopoverNotificationCenter</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">NovuProvider</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">nav</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">main</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">'homeContainer'</span><span style="color:var(--syntax-text-color)">></span>...<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">main</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-text-color)">};</span>
-
</code></span></span>
上面的代码片段将 Novu 的通知铃图标添加到导航栏，使我们能够查看所有应用通知。
该NovuProvider组件需要您的订阅者 ID - 之前从Novu Manage Platformhttp://localhost:52685/demo上的 API 密钥下的设置部分复制了您的应用程序 ID 。
接下来，让我们为应用程序创建通知工作流和模板。
在浏览器中打开Novu Manage Platform并创建通知模板。
选择模板，点击工作流程编辑器，确保工作流程如下：
单击该In-App步骤并编辑模板以包含消息变量，如下所示。message 变量将包含 ChatGPT 生成的通知。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)">{
{</span>message<span style="color:var(--syntax-error-color)">}}</span>
-
</code></span></span>
单击更新按钮保存模板。
将 Novu 添加到 Node.js 应用程序
导航到服务器文件夹并安装适用于 Node.js 的 Novu SDK。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)">cd </span>server
-
npm <span style="color:var(--syntax-text-color)">install</span> @novu/node
-
</code></span></span>
从包中导入 Novu 并使用您的 API 密钥创建一个实例。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">//server/index.js</span>
-
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">Novu</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">require</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">@novu/node</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">novu</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">Novu</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)"><YOUR_API_KEY></span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">);</span>
-
</code></span></span>
恭喜！您已成功将 Novu 添加到您的 Web 应用程序中。在接下来的部分中，您将学习如何通过 Novu 向您的用户发送 AI 生成的通知。
如何通过 Novu 向您的用户发送 ChatGPT 通知
在本节中，我将指导您从 ChatGPT 为不同的用例生成通知并将它们发送给您的 Novu 订阅者。
该应用程序将允许您指定所需的通知类型并选择将接收消息的订阅者。
我们在Home.js. 接下来，让我们获取订阅者列表并将它们显示在组件中。
获取并显示您的 Novu 订阅者
在文件中添加一个路由index.js，从 Novu 获取订阅者列表。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">app</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-declaration-color)">get</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">/subscribers</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-declaration-color)">try</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">data</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">novu</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">subscribers</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">list</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">resultData</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">;</span>
-
<span style="color:var(--syntax-comment-color)">//👇🏻 Returns subscibers with an id, and first and last names</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">subscribers</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">resultData</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">filter</span><span style="color:var(--syntax-text-color)">(</span>
-
<span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">d</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">d</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">firstName</span> <span style="color:var(--syntax-error-color)">&&</span> <span style="color:var(--syntax-name-color)">d</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">lastName</span> <span style="color:var(--syntax-error-color)">&&</span> <span style="color:var(--syntax-name-color)">d</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">subscriberId</span>
-
<span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">json</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">subscribers</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">catch</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">err</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">error</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">err</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-text-color)">}</span>
-
<span style="color:var(--syntax-text-color)">});</span>
-
</code></span></span>
创建一个向/subscribers端点发送请求并在 React 应用程序内加载页面时显示订阅者的函数。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">//👇🏻 State representing the list of subscribers</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">subscribers</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">setSubscribers</span><span style="color:var(--syntax-text-color)">]</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useState</span><span style="color:var(--syntax-text-color)">([</span>
-
<span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">firstName</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">lastName</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">subscriberId</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Select</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">_id</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">null</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-text-color)">},</span>
-
<span style="color:var(--syntax-text-color)">]);</span>
-
-
<span style="color:var(--syntax-comment-color)">//👇🏻 Fetch the list of subscribers on page load</span>
-
<span style="color:var(--syntax-name-color)">useEffect</span><span style="color:var(--syntax-text-color)">(()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">fetchSubscribers</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-declaration-color)">try</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">request</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">fetch</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">http://localhost:4000/subscribers</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">response</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">request</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">json</span><span style="color:var(--syntax-text-color)">();</span>
-
<span style="color:var(--syntax-name-color)">setSubscribers</span><span style="color:var(--syntax-text-color)">([...</span><span style="color:var(--syntax-name-color)">subscribers</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">...</span><span style="color:var(--syntax-name-color)">response</span><span style="color:var(--syntax-text-color)">]);</span>
-
<span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">catch</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">err</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">error</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">err</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-text-color)">}</span>
-
<span style="color:var(--syntax-text-color)">}</span>
-
<span style="color:var(--syntax-name-color)">fetchSubscribers</span><span style="color:var(--syntax-text-color)">();</span>
-
<span style="color:var(--syntax-text-color)">},</span> <span style="color:var(--syntax-text-color)">[]);</span>
-
</code></span></span>
更新 Home 组件中的 select 标签以呈现订阅者列表，如下所示：
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">select</span>
-
<span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">subscriber</span><span style="color:var(--syntax-string-color)">}</span>
-
<span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">'subscriber'</span>
-
<span style="color:var(--syntax-name-color)">onChange</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">setSubscriber</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">target</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">)</span><span style="color:var(--syntax-string-color)">}</span>
-
<span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">subscribers</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">map</span><span style="color:var(--syntax-text-color)">((</span><span style="color:var(--syntax-name-color)">s</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">(</span>
-
<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">option</span>
-
<span style="color:var(--syntax-name-color)">key</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">s</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">_id</span><span style="color:var(--syntax-string-color)">}</span>
-
<span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">s</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">firstName</span><span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">s</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">lastName</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)"> - </span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">s</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">subscriberId</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-string-color)">}</span>
-
<span style="color:var(--syntax-text-color)">></span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">s</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">firstName</span><span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">s</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">lastName</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)"> - </span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">s</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">subscriberId</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">option</span><span style="color:var(--syntax-text-color)">></span>
-
<span style="color:var(--syntax-text-color)">))</span><span style="color:var(--syntax-string-color)">}</span>
-
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">select</span><span style="color:var(--syntax-text-color)">></span>
-
</code></span></span>
从 ChatGPT 生成通知
在其中创建一个路由，该路由index.js接受来自用户的通知标题和订阅者。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">app</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">/notify</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-comment-color)">//👇🏻 Destructure the message and subscriber from the object</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">subscriber</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">body</span><span style="color:var(--syntax-text-color)">;</span>
-
<span style="color:var(--syntax-comment-color)">//👇🏻 Separates the first name and the subscriber ID</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">subscriberDetails</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">subscriber</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">split</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">firstName</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">subscriberDetails</span><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">];</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">subscriberId</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">subscriberDetails</span><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-literal-color)">3</span><span style="color:var(--syntax-text-color)">];</span>
-
<span style="color:var(--syntax-comment-color)">//👇🏻 Added some specifications to the message to enable the AI generate a concise notification.</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">fullMessage</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">`I have a notification system and I want to send the user a notification about "</span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">" can you write me one?
-
please use double curly brackets for variables.
-
make it short, and use only one variable for the user name.
-
Please just write 1 notification without any intro.`</span><span style="color:var(--syntax-text-color)">;</span>
-
-
<span style="color:var(--syntax-comment-color)">//👇🏻 Log the required variables to the console</span>
-
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">firstName</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">subscriberId</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">fullMessage</span> <span style="color:var(--syntax-text-color)">});</span>
-
<span style="color:var(--syntax-text-color)">});</span>
-
</code></span></span>
接下来，让我们将表单详细信息提交到/notify服务器上的路由。创建一个函数，在提交表单时向端点发出 POST 请求。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">//👇🏻 Makes the POST request</span>
-
<span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">sendNotification</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-declaration-color)">try</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">request</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">fetch</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">http://localhost:4000/notify</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-name-color)">method</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">POST</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
-
<span style="color:var(--syntax-name-color)">body</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">JSON</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">stringify</span><span style="color:var(--syntax-text-color)">({</span>
-
<span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">,</span>
-
<span style="color:var(--syntax-name-color)">subscriber</span><span style="color:var(--syntax-text-color)">,</span>
-
<span style="color:var(--syntax-text-color)">}),</span>
-
<span style="color:var(--syntax-name-color)">headers</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-name-color)">Accept</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">application/json</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
-
<span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Content-Type</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">application/json</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
-
<span style="color:var(--syntax-text-color)">},</span>
-
<span style="color:var(--syntax-text-color)">});</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">data</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">request</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">json</span><span style="color:var(--syntax-text-color)">();</span>
-
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">catch</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">err</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">error</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">err</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-text-color)">}</span>
-
<span style="color:var(--syntax-text-color)">}</span>
-
-
<span style="color:var(--syntax-comment-color)">//👇🏻 Runs when a user submits the form</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">handleSubmit</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">preventDefault</span><span style="color:var(--syntax-text-color)">();</span>
-
<span style="color:var(--syntax-comment-color)">//👇🏻 Calls the function</span>
-
<span style="color:var(--syntax-name-color)">sendNotification</span><span style="color:var(--syntax-text-color)">();</span>
-
<span style="color:var(--syntax-name-color)">setMessage</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-name-color)">setSubscriber</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-text-color)">};</span>
-
</code></span></span>
更新/notify路由以将必要的变量传递给另一个函数。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">app</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">/notify</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">subscriber</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">body</span><span style="color:var(--syntax-text-color)">;</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">subscriberDetails</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">subscriber</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">split</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">firstName</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">subscriberDetails</span><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">];</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">subscriberId</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">subscriberDetails</span><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-literal-color)">3</span><span style="color:var(--syntax-text-color)">];</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">fullMessage</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">`I have a notification system and I want to send the user a notification about "</span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">" can you write me one?
-
please use double curly brackets for variables.
-
make it short, and use only one variable for the user name.
-
Please just write 1 notification without any intro.`</span><span style="color:var(--syntax-text-color)">;</span>
-
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">firstName</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">subscriberId</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">fullMessage</span> <span style="color:var(--syntax-text-color)">});</span>
-
-
<span style="color:var(--syntax-comment-color)">//👇🏻 Pass the variables as a parameter into the function</span>
-
<span style="color:var(--syntax-name-color)">chatgptFunction</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">fullMessage</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">subscriberId</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">firstName</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-text-color)">});</span>
-
</code></span></span>
创建chatgptFunction如下：
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">//👇🏻 Holds the AI-generated notification</span>
-
<span style="color:var(--syntax-declaration-color)">let</span> <span style="color:var(--syntax-name-color)">chatgptResult</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-text-color)">;</span>
-
-
<span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">chatgptFunction</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">subscriberId</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">firstName</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-comment-color)">// use puppeteer to bypass cloudflare (headful because of captchas)</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">api</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">ChatGPTAPIBrowser</span><span style="color:var(--syntax-text-color)">({</span>
-
<span style="color:var(--syntax-name-color)">email</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)"><YOUR_CHATGPT_EMAIL></span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
-
<span style="color:var(--syntax-name-color)">password</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)"><YOUR_CHATGPT_PASSWORD></span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
-
<span style="color:var(--syntax-text-color)">});</span>
-
<span style="color:var(--syntax-comment-color)">//👇🏻 Open up the login screen on the browser</span>
-
<span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">api</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">initSession</span><span style="color:var(--syntax-text-color)">();</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">result</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">api</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">sendMessage</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-name-color)">chatgptResult</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">result</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">response</span><span style="color:var(--syntax-text-color)">;</span>
-
<span style="color:var(--syntax-comment-color)">//👇🏻 Replace the user variable with the user's first name</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">notificationString</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">chatgptResult</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">replace</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">{
{user}}</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">firstName</span><span style="color:var(--syntax-text-color)">);</span>
-
-
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">notificationString</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">subscriberId</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-text-color)">}</span>
-
</code></span></span>
最后，让我们通过 ID 向订阅者发送通知。创建另一个接受notificationString和subscriberId并发送通知的函数。
-
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">chatgptFunction</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">subscriberId</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">firstName</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-comment-color)">// use puppeteer to bypass cloudflare (headful because of captchas)</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">api</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">ChatGPTAPIBrowser</span><span style="color:var(--syntax-text-color)">({</span>
-
<span style="color:var(--syntax-name-color)">email</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)"><YOUR_CHATGPT_EMAIL></span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
-
<span style="color:var(--syntax-name-color)">password</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)"><YOUR_CHATGPT_PASSWORD></span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
-
<span style="color:var(--syntax-text-color)">});</span>
-
<span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">api</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">initSession</span><span style="color:var(--syntax-text-color)">();</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">result</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">api</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">sendMessage</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-name-color)">chatgptResult</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">result</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">response</span><span style="color:var(--syntax-text-color)">;</span>
-
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">notificationString</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">chatgptResult</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">replace</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">{
{user}}</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">firstName</span><span style="color:var(--syntax-text-color)">);</span>
-
-
<span style="color:var(--syntax-comment-color)">//👇🏻 Pass the necessary variables as parameters</span>
-
<span style="color:var(--syntax-name-color)">sendNotification</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">notificationString</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">subscriberId</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">);</span>
-
<span style="color:var(--syntax-text-color)">}</span>
-
-
<span style="color:var(--syntax-comment-color)">//👇🏻 Sends the notification via Novu</span>
-
<span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">sendNotification</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">subscriberId</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-declaration-color)">try</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-declaration-color)">let</span> <span style="color:var(--syntax-name-color)">result</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">novu</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">trigger</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)"><NOTIFICATION_TEMPLATE_ID></span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-name-color)">to</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-name-color)">subscriberId</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">subscriberId</span><span style="color:var(--syntax-text-color)">,</span>
-
<span style="color:var(--syntax-text-color)">},</span>
-
<span style="color:var(--syntax-name-color)">payload</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">,</span>
-
<span style="color:var(--syntax-text-color)">},</span>
-
<span style="color:var(--syntax-text-color)">});</span>
-
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">json</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">result</span> <span style="color:var(--syntax-text-color)">});</span>
-
<span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">catch</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">err</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
-
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">json</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">error_message</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">err</span> <span style="color:var(--syntax-text-color)">});</span>
-
<span style="color:var(--syntax-text-color)">}</span>
-
<span style="color:var(--syntax-text-color)">}</span>
-
</code></span></span>
恭喜！🎉您已完成本教程的项目。
结论
到目前为止，我们已经涵盖了
- ChatGPT 是什么，
- 如何在 Node.js 应用程序中与它通信，以及
- 如何在 React 和 Node.js 应用程序中通过 Novu 向用户发送 ChatGPT 生成的通知。
本教程将引导您完成一个可以使用 Novu 和 ChatGPT 构建的应用程序示例。ChatGPT 可以被视为终极个人助理，在各个领域都非常有用，使我们能够更智能、更好地工作。
本教程的源代码可在此处获得：https ://github.com/novuhq/blog/tree/main/sending-chatgpt-notifications-with-novu
感谢您的阅读！
转载：https://blog.csdn.net/u010291330/article/details/128520158
查看评论