使用 JavaScript 通过 Webhook 发送自动化的 Discord 消息
创建 Webhook
设置 JavaScript 文件
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
我相信你一定听说过 Discord，这款集语音和文字聊天于一体的应用，或许你甚至正在使用它。那么你知道吗？其实可以直接通过 JavaScript 向 Discord 服务器发送自动消息。这叫做 Webhook。接下来，我们将介绍如何轻松设置一个 Webhook，以便将其集成到你的应用中，或者仅仅是为了发送一些自定义消息。
它的工作原理是：向 Discord 在你创建 Webhook 时提供的唯一 URL 发送一个包含 JSON 数据的 POST 请求。
创建 Webhook
Discord 提供创建 Webhook 的功能，但请注意，该功能仅适用于服务器频道，不适用于私信。要创建 Webhook，请点击要设置 Webhook 的频道旁边的齿轮图标：
然后前往“Webhooks”选项卡，点击“创建 Webhook”。之后，您可以指定名称，该名称将在 JSON POST 请求中未指定名称时用于发送消息。
您还可以调整渠道并添加默认图像。同样，该图像稍后可以通过 JSON POST 请求进行自定义。
然后，在页面底部，你会看到唯一的 Webhook URL。复制并保存它，我们稍后会用到它。
设置 JavaScript 文件
要向你的 webhook 发送 POST 请求，你需要设置一个 JavaScript 环境来执行代码。这里我只需创建一个名为 `webhook.html` 的本地 HTML 文件index.html。在该文件中，我会创建一个简单的按钮来执行 JavaScript 函数sendMessage()。
以下是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Discord Webhook Tutorial</title>
</head>
<body>
<button onclick="sendMessage()">Send</button>
</body>
</html>
然后我会添加一个script标签，并在其中声明该sendMessage函数：
<script>
function sendMessage() {
}
</script>
在该函数内部，我将创建一个新的 XMLHttpRequest 对象，并将返回值保存到request变量中。第一个参数是 ` "POST"<your_webhook_url>`，因为我们需要向 Webhook 发送 POST 请求。第二个参数是您的 Webhook URL，这是您在创建 Webhook 时获得的。如果您没有 Webhook URL，请前往 Webhook 设置并从中复制。
请注意，下面指定的 URL 是我的 Discord 频道的 URL，因此您需要将其更改，以便代码在您的 Discord 频道中生效。
你的sendMessage函数应该如下所示：
function sendMessage() {
const request = new XMLHttpRequest();
request.open("POST", "https://discordapp.com/api/webhooks/676118118082281513/ZS5YcWhurzokBrKX9NgexqtxrJA5Pu2Bo4i7_JsIxC-JIbPBVhSZkcVVukGOro52rnQA");
// replace the url in the "open" method with yours
}
然后我会调用该setRequestHeader方法，并指定参数"Content-type"以"application/json"表明我们发送的是 JSON 数据，如下所示：
request.setRequestHeader('Content-type', 'application/json');
然后，我将声明一个 params 对象，其中包含我们要发送到 Webhook 的 JSON 数据：
const params = {
username: "My Webhook Name",
avatar_url: "",
content: "The message to send"
}
如果您未指定用户名或头像，则默认使用您创建 Webhook 时选择的用户名或头像。内容属性不能为空，否则请求将失败。
最后一步，我们需要发送实际数据，如下所示：
request.send(JSON.stringify(params));
注意JSON.stringify它的用法。它将我们的params对象转换为可以发送的有效字符串。
如果您需要，这是最终的HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Discord Webhook Tutorial</title>
</head>
<body>
<button onclick="sendMessage()">Send</button>
</body>
<script>
function sendMessage() {
const request = new XMLHttpRequest();
request.open("POST", "https://discordapp.com/api/webhooks/676118118082281513/ZS5YcWhurzokBrKX9NgexqtxrJA5Pu2Bo4i7_JsIxC-JIbPBVhSZkcVVukGOro52rnQA");
request.setRequestHeader('Content-type', 'application/json');
const params = {
username: "My Webhook Name",
avatar_url: "",
content: "The message to send"
}
request.send(JSON.stringify(params));
}
</script>
</html>
现在是时候测试一下了！我这里打开 Chrome 浏览器运行我的 HTML 文件，然后点击“发送”按钮发送消息。
瞧！消息已从 [电子邮件地址] 发送"My Webhook Name"，内容"The message to send"正如我所指定的： 如果我指定了头像 URL，它会替换默认的 Discord 图标。
基本就是这样！现在你可以将此功能集成到你自己的应用程序中，以便在你的应用程序中发生事件时发送自动消息！
在后续教程中，我们将学习如何创建嵌入式内容，以便发送像这样的炫酷消息：