如何在discord.js v13中实现随消息发送按钮交互功能

前置配置 #

首先导入discord.js内置的组件构造类，初始化客户端时启用所需的权限意图：

const { Client, Intents, MessageActionRow, MessageButton } = require('discord.js');

const client = new Client({
  intents: [
    Intents.FLAGS.GUILDS,
    Intents.FLAGS.GUILD_MESSAGES,
    Intents.FLAGS.MESSAGE_CONTENT // 如需读取普通消息内容触发指令需开启，同时需要在Discord开发者面板启用对应权限
  ]
});

构造按钮组件 #

v13中所有交互组件必须放在MessageActionRow容器内才能发送，单个MessageActionRow最多可放置5个按钮：

// 构造普通交互按钮
const testBtn = new MessageButton()
  .setCustomId('btn_test_01') // 按钮唯一标识，同条消息内不可重复，最长100字符
  .setLabel('测试按钮') // 按钮显示的文本内容
  .setStyle('PRIMARY') // 按钮样式：PRIMARY(蓝)/SECONDARY(灰)/SUCCESS(绿)/DANGER(红)/LINK(链接)
  .setDisabled(false); // 可选参数，设置按钮是否禁用

// 构造链接按钮（无需customId，不会触发交互事件）
const linkBtn = new MessageButton()
  .setLabel('跳转链接')
  .setStyle('LINK')
  .setURL('你的目标链接地址');

// 组装组件容器
const actionRow = new MessageActionRow()
  .addComponents(testBtn, linkBtn);

随消息发送按钮 #

调用消息发送方法时传入components参数即可：

// 示例：收到!sendbtn指令时发送带按钮的消息
client.on('messageCreate', async msg => {
  if (msg.content === '!sendbtn' && !msg.author.bot) {
    await msg.reply({
      content: '下方是测试按钮：',
      components: [actionRow]
    });
  }
});

监听按钮交互 #

通过interactionCreate事件监听按钮点击行为，必须在3秒内响应交互，否则会触发交互超时错误：

client.on('interactionCreate', async interaction => {
  // 过滤非按钮类型的交互
  if (!interaction.isButton()) return;

  // 匹配对应customId的按钮处理逻辑
  if (interaction.customId === 'btn_test_01') {
    // 方式1：回复提示消息，ephemeral表示仅触发交互的用户可见
    // await interaction.reply({ content: '你点击了测试按钮', ephemeral: true });

    // 方式2：更新原消息内容/组件，比如将点击后的按钮设为禁用
    await interaction.update({
      content: '按钮已被点击',
      components: [new MessageActionRow().addComponents(testBtn.setDisabled(true))]
    });
  }
});

常见注意事项 #

• 交互必须在3秒内响应，处理耗时操作前需先调用interaction.deferReply()或interaction.deferUpdate()占位
• 链接类型按钮不需要设置customId，点击后直接跳转链接，不会触发interactionCreate事件
• 一条消息最多可添加5个MessageActionRow容器

内容的提问来源于stack exchange，提问作者Rogue Ram