Stream Chat如何实现事件系统消息随用户昵称变更动态更新

核心逻辑：不要把用户昵称这类可变属性固化写入系统消息文本，所有涉及用户身份的内容仅存储用户ID，在消息渲染阶段动态拉取最新用户资料拼接展示，即可实现昵称修改后历史系统消息自动同步更新的效果。

预期实现效果参考：

1. 发送结构化自定义系统消息 #

监听成员加入等触发系统消息的事件时，不要直接拼接固定昵称生成文本内容，给消息打自定义类型标记，将涉及的用户ID存入消息自定义字段即可，示例代码：

// 成员加入事件触发时发送自定义系统消息
channel.on('member.added', async (event) => {
  await channel.sendMessage({
    type: 'system',
    // 自定义消息类型标识，用于后续渲染识别
    custom_type: 'member_add_notice',
    // 文本字段留空或存通用占位，禁止写入固定昵称
    text: '',
    // 自定义字段仅存储用户ID，不存昵称、头像等可变用户信息
    custom: {
      operator_id: event.user.id, // 执行加群操作的用户ID
      added_member_ids: event.members.map(m => m.user_id), // 被加入群的用户ID列表
    }
  })
})

用户修改昵称时，直接调用SDK提供的用户资料更新接口更新全局用户信息即可，无需修改任何历史消息数据。

2. 覆写默认系统消息渲染逻辑 #

在React SDK的组件配置中替换默认系统消息渲染组件，识别到自定义类型的系统消息时，从消息自定义字段取出所有用户ID，优先从客户端本地缓存读取最新的用户昵称（用户修改昵称后本地缓存会自动同步更新），缓存无数据时批量拉取用户资料，动态拼接展示内容：

import { MessageSystem } from 'stream-chat-react';

const CustomSystemMessage = (props) => {
  const { message, client } = props;
  // 非自定义加群提示消息走默认渲染逻辑
  if (message.custom_type !== 'member_add_notice') {
    return <MessageSystem {...props} />
  }

  const { operator_id, added_member_ids } = message.custom;
  // 从本地用户缓存取最新昵称，自动同步用户改名后的结果
  const operatorName = client.user.id === operator_id 
    ? '你' 
    : (client.state.users[operator_id]?.name || operator_id);
  const addedMemberNames = added_member_ids
    .map(uid => client.state.users[uid]?.name || uid)
    .join('、');

  return (
    <div className="str-chat__message--system">
      {operatorName} 将 {addedMemberNames} 加入了聊天
    </div>
  )
}

// 注入自定义消息组件到Channel容器
<Channel MessageSystem={CustomSystemMessage}>
  <MessageList />
  <MessageInput />
</Channel>

关键注意事项 #

• 不要开启SDK默认的自动系统消息功能，默认逻辑会将触发事件时的用户昵称直接固化写入消息文本，后续无法动态更新
• 查看较早的历史消息遇到本地缓存无对应用户信息时，批量调用用户查询接口拉取最新资料存入本地缓存即可，无需修改原始消息
• 其余场景的系统消息（用户退群、群信息变更、管理员权限变更等）均可复用该逻辑，所有可变内容仅存关联ID，渲染阶段动态取值即可实现自动同步

内容的提问来源于stack exchange，提问作者Tanuj Gupta