discord - 如何根据 Discord.js 中的 react 编辑消息(创建列表和切换页面)

Question

我希望我的 Discord 机器人发送一条消息，然后在人们使用react时对其进行编辑(例如，创建一个列表，然后单击向右或向左箭头将编辑消息并显示列表的下一部分/上一部分)。

例子:
react 前:


react 后:

Answer 1

如何处理消息 react ？
有 3 种方法可以对消息 react 使用react:

使用函数 awaitReactions (基于 promise )

使用 ReactionCollector

使用 messageReactionAdd 事件

区别: messageReactionAdd 是一个链接到 Client 的事件:

Emitted whenever a reaction is added to a cached message.

而 ReactionCollector 和 awaitReactions 链接到特定消息，如果将 react 添加到另一条消息，则不会执行任何操作。
如果将 react 添加到缓存消息(旧消息)，则不会触发 messageReactionAdd。 Discord.js 指南中有一个 guide for listening on old messages，这里给出了这个警告

This section describes how to use some undocumented APIs to add unsupported functionality into discord.js, and as such you should follow anything here with extreme caution. Anything here is subject to change at any time without notice, and may break other functionality in your bot.

awaitReactions 是基于 Promise 的，它只会在解决 Promise 时返回所有添加的 react 的集合(添加 X 个 react 后，Y 秒后等)。没有特定的支持来处理每一个增加的 react 。您可以将您的函数放在 filter 函数中以添加每个 react ，但这是一个无意的小技巧。然而， ReactionCollector 有一个 collect 事件。
那么，我用什么？
您想编辑机器人发送的消息(因为您无法编辑其他用户的消息)。所以 ReactionCollector 或 awaitReactions 。
如果您想在满足特定条件后编辑消息(X 人投票，添加了 Y react ，15 分钟后，...)(例如:投票，您将允许用户在 15 分钟内投票)，您可以同时使用 awaitReactions 和 ReactionCollector 。
但是，如果您想根据特定 react 编辑消息(如示例中对箭头表情符号的 react )，则必须使用 ReactionCollector 。
如果消息没有被缓存，你可以使用 messageReactionAdd 但它会更复杂，因为你基本上必须重写一个表情符号收集器，但对于每个表情符号。
注意:如果机器人重启， ReactionCollector 和 awaitReactions 将被删除，而 messageReactionAdd 会照常工作(但你会丢失你声明的变量，所以如果你已经存储了你想听的消息，它们也会消失)。
该怎么办？
你需要不同的东西:

将触发功能的表情符号列表(您可以选择对每个表情符号使用react)

停止收听消息 react 的条件(如果您想用 messageReactionAdd

收听每条消息，则不适用

接收消息并对其进行编辑的函数

一个过滤器函数，它将返回一个 bool 值:true 我想对这个表情符号使用react，false 我不想使用react。此功能将基于表情符号列表，但也可以过滤用户的 react ，或您需要的任何其他条件

编辑消息的逻辑。例如:对于列表，它将基于结果的数量、当前索引和添加的 react

示例:用户列表
表情符号列表:

const emojiNext = '➡'; // unicode emoji are identified by the emoji itself
const emojiPrevious = '⬅';
const reactionArrow = [emojiPrevious, emojiNext];

停止条件

const time = 60000; // time limit: 1 min

编辑功能
这里的功能非常简单，消息是预先生成的(时间戳和页脚除外)。

const first = () => new Discord.MessageEmbed()
      .setAuthor('TOTO', "https://i.imgur.com/ezC66kZ.png")
      .setColor('#AAA')
      .setTitle('First')
      .setDescription('First');

const second = () => new Discord.MessageEmbed()
      .setAuthor('TOTO', "https://i.imgur.com/ezC66kZ.png")
      .setColor('#548')
      .setTitle('Second')
      .setDescription('Second');

const third = () => new Discord.MessageEmbed()
      .setAuthor('TOTO', "https://i.imgur.com/ezC66kZ.png")
      .setColor('#35D')
      .setTitle('Third')
      .setDescription('Third');

const list = [first, second, third];

function getList(i) {
return list[i]().setTimestamp().setFooter(`Page ${i+1}`); // i+1 because we start at 0
}

过滤功能

function filter(reaction, user){
  return (!user.bot) && (reactionArrow.includes(reaction.emoji.name)); // check if the emoji is inside the list of emojis, and if the user is not a bot
}

逻辑
请注意，我在这里使用 list.length 是为了避免进入 list[list.length] 及以后。如果你没有硬编码的列表，你应该在参数中传递一个限制。
如果索引无效，您还可以让 getList 返回 undefined，而不是使用 bool 条件的索引，而是将返回值与 undefined 进行比较。

function onCollect(emoji, message, i, getList) {
  if ((emoji.name === emojiPrevious) && (i > 0)) {
    message.edit(getList(--i));
  } else if ((emoji.name === emojiNext) && (i < list.length-1)) {
    message.edit(getList(++i));
  }
  return i;
}

这是另一个 getList 函数的另一个逻辑，它只返回 list[i] 例如，而不是像上面那样设置时间戳，因为尝试在 undefined 上执行 .setTimestamp 会引发错误。

  if (emoji.name === emojiPrevious) {
    const embed = getList(i-1);
    if (embed !== undefined) {
      message.edit(embed);
      i--;
    }
  } else if (emoji.name === emojiNext) {
    const embed = getList(i+1);
    if (embed !== undefined) {
      message.edit(embed);
      i++;
    }
  }
  return i;

构建构造函数
该示例与问题中的要求相同，使用箭头功能编辑消息。
我们将使用一个收集器:

function createCollectorMessage(message, getList) {
  let i = 0;
  const collector = message.createReactionCollector(filter, { time });
  collector.on('collect', r => {
    i = onCollect(r.emoji, message, i, getList);
  });
  collector.on('end', collected => message.clearReactions());
}

它需要我们想听的信息。你也可以给它一个内容列表//消息//一个数据库//任何必要的东西。
发送消息并添加收集器

function sendList(channel, getList){
  channel.send(getList(0))
    .then(msg => msg.react(emojiPrevious))
    .then(msgReaction => msgReaction.message.react(emojiNext))
    .then(msgReaction => createCollectorMessage(msgReaction.message, getList));
}