用webhook来监听邮件：用n8n来自动化找工作+写cover letter(2)

Webhook是什么？

简单来说，Webhook就像是应用程序之间的"信使"。它允许一个应用在特定事件发生时，主动向另一个应用发送实时数据。你可以把Webhook理解为一个"接收消息的URL"—当某件事情发生时，这个URL就会收到通知。

Webhook的工作原理

我们用n8n这个工具举例：

创建一个监听URL：在n8n中，我们创建一个特殊的URL（比如http://localhost:5678/webhook-test/abc）

等待触发事件：当有人访问这个URL时（比如点击邮件中的链接），n8n就会接收到这个请求

处理请求：n8n会执行我们设计好的工作流，处理这个请求

返回响应：工作流完成后，n8n会向请求者（用户的浏览器）返回一个响应

实际应用案例

在我的一个项目中，我是这样应用Webhook的：

当用户点击邮件中的"Generate Cover Letter"链接时

他们的浏览器会向我的n8n Webhook URL发送请求

n8n执行工作流，生成Cover Letter

n8n向用户返回一个响应，告诉他们Cover Letter已生成

关键点：添加HTML节点返回结果页面

这一步的核心是创建一个网页响应，当用户点击链接后在浏览器中显示。

为什么需要HTML响应？

当用户点击链接时，他们的浏览器会等待服务器（n8n）的响应

如果不返回任何内容，用户会看到空白页面或错误信息

通过返回HTML页面，我们可以向用户展示生成的Cover Letter和互动按钮

如何实现？

在n8n中，我使用"Function"节点生成HTML代码

这个HTML代码包含生成的Cover Letter内容，以及复制、下载按钮

Webhook节点配置为返回这个HTML作为响应

用户体验流程

想象一下这个过程：

用户在邮件中点击"Generate Cover Letter"链接

链接打开新浏览器标签页，向我的n8n Webhook发送请求

n8n执行工作流，生成Cover Letter

n8n将生成的HTML页面返回给用户浏览器

用户看到一个漂亮的页面，显示Cover Letter内容和操作按钮

在n8n中实现HTML响应的具体步骤

添加Function节点：

在工作流中，AI生成Cover Letter后添加一个Function节点

这个节点的作用是将Cover Letter内容包装在HTML中

代码生成一个完整的网页，包含标题、样式、内容区域和JavaScript功能

配置Webhook响应：

回到工作流开始的Webhook节点

在设置中，找到"响应"部分

选择"自定义"响应模式

设置响应内容为Function节点生成的HTML

实际操作步骤： a. 添加Function节点，命名为"Generate HTML Response" b. 在代码区域输入HTML生成代码 c. 配置Webhook节点的响应设置：

响应模式：自定义

响应代码：200（表示成功）

响应头：{ "Content-Type": "text/html" }（告诉浏览器这是HTML内容）

响应体：{{$node["Generate HTML Response"].json.response}}（使用Function节点生成的HTML）

简化示例

以下是一个非常简化的示例，帮助你理解这个过程：

用户点击链接：http://localhost:5678/webhook-test/123?jobId=456

n8n工作流：


Webhook节点 → 获取职位数据 → AI生成Cover Letter → 生成HTML响应 → 返回给用户

简化的HTML生成：


// 简化版HTML生成Function节点
const coverLetter = $input.item.json.coverLetter || "您的Cover Letter将显示在这里";

const html = `
<html>
  <head><title>您的Cover Letter</title></head>
  <body>
    <h1>您的Cover Letter已生成</h1>
    <div style="border:1px solid gray; padding:20px;">
      ${coverLetter}
    </div>
    <button onclick="navigator.clipboard.writeText('${coverLetter}')">
      复制到剪贴板
    </button>
  </body>
</html>
`;

return { json: { response: html } };

用户看到的结果：浏览器显示一个网页，包含生成的Cover Letter和一个复制按钮

本地开发注意事项

由于我们使用的是localhost地址，这个链接只能在运行n8n的同一台计算机上工作。在实际部署时，你需要：

将n8n部署到可公开访问的服务器

获取一个公开的URL（例如通过Ngrok或正式部署）

更新邮件模板中的链接使用公开URL