# 消息表情回复

    环信即时通讯 IM 提供消息表情回复(下文统称 “Reaction”)功能。用户可以在单聊和群聊中对消息添加、删除表情。表情可以直观地表达情绪,利用 Reaction 可以提升用户的使用体验。同时在群组中,利用 Reaction 可以发起投票,根据不同表情的追加数量来确认投票。

    # 技术原理

    环信即时通讯 IM SDK 支持你通过调用 API 在项目中实现如下功能:

    • 在消息上添加 Reaction
    • 删除消息的 Reaction
    • 获取消息的 Reaction 列表
    • 获取 Reaction 详情

    Reaction 场景示例如下:

    img

    分别展示如何添加 Reaction,群聊中 Reaction 的效果,以及查看 Reaction 列表。

    # 前提条件

    开始前,请确保满足以下条件:

    1. 完成 1.0.5 或以上版本 SDK 初始化,详见 快速开始SDK 集成概述
    2. 了解环信即时通讯 IM API 的 使用限制
    3. 已联系商务开通 Reaction 功能。

    # 实现方法

    # 在消息上添加 Reaction

    调用 addReaction 在消息上添加 Reaction,在 onMessageReactionDidChange 监听事件中会收到这条消息的最新 Reaction 概览。

    示例代码如下:

    // reaction: Reaction ID
    // msgId: 消息 ID
    // 在指定消息上添加 Reaction
    ChatClient.getInstance()
      .chatManager.addReaction(reaction, msgId)
      .then((result) => {
        console.log("success: ", result);
      })
      .catch((error) => {
        console.log("fail: ", error);
      });
    

    # 删除消息的 Reaction

    调用 removeReaction 删除消息的 Reaction,在 onMessageReactionDidChange 监听事件中会收到这条消息的最新 Reaction 概览。

    示例代码如下:

    // reaction: Reaction ID
    // msgId: 消息 ID
    ChatClient.getInstance()
      .chatManager.removeReaction(reaction, msgId)
      .then((result) => {
        console.log("success: ", result);
      })
      .catch((error) => {
        console.log("fail: ", error);
      });
    

    # 获取消息的 Reaction 列表

    调用 getReactionList 方法可以从服务器获取指定消息的 Reaction 概览列表,列表内容包含 Reaction 内容,添加或移除 Reaction 的用户数量,以及添加或移除 Reaction 的前三个用户的用户 ID。

    对应消息 ChatMessage 有便捷的访问方式 reactionList

    示例代码如下:

    // msgId: 消息 ID
    ChatClient.getInstance()
      .chatManager.getReactionList(msgId)
      .then((result) => {
        console.log("success: ", result);
      })
      .catch((error) => {
        console.log("fail: ", error);
      });
    

    消息的快捷访问方式。示例如下:

    // 通过消息快捷访问 Reaction 列表
    const msg = ChatMessage.createTextMessage(targetId, content);
    msg.reactionList
      .then((result) => {
        console.log("success: ", result);
      })
      .catch((error) => {
        console.log("fail: ", error);
      });
    

    # 获取 Reaction 详情

    调用 fetchReactionDetail 方法可以从服务器获取指定 Reaction 的详情,包括 Reaction 内容,添加或移除 Reaction 的用户数量以及添加或移除 Reaction 的全部用户列表。示例代码如下:

    // reaction: Reaction ID
    // msgId: 消息 ID
    // pageSize: 单次请求返回的成员数,取值范围为 [1, 50]
    // cursor: 开始获取数据的游标位置,首次调用方法时传 `null` 或空字符串
    ChatClient.getInstance()
      .chatManager.fetchReactionDetail(msgId, reaction, cursor, pageSize)
      .then((result) => {
        console.log("success: ", result);
      })
      .catch((error) => {
        console.log("fail: ", error);
      });
    

    # 管理 Reaction 监听

    // 监听 Reaction 更新
    class ChatMessageEvent implements ChatMessageEventListener {
      onMessageReactionDidChange(_list: ChatMessageReactionEvent[]): void {
        throw new Error("Method not implemented.");
      }
      // 其他回调接收省略,实际开发中需要添加
    }
    
    // 注册监听器
    const listener = new ChatMessageEvent();
    ChatClient.getInstance().chatManager.addMessageListener(listener);
    
    // 移除监听器
    ChatClient.getInstance().chatManager.removeMessageListener(listener);
    
    // 移除所有监听器
    ChatClient.getInstance().chatManager.removeAllMessageListener();
    
    更新时间:2023-02-07 16:52:30