本文介绍 IM UIKit 默认支持的基本消息类型，以及如何实现自定义消息收发。

基本消息类型

IM UIKit 内置了几种基本消息类型（见下表），如果基本消息类型无法满足您的业务需求，您可自定义消息类型。

消息类型	显示效果
文本消息
图片消息
文件消息
表情

前提条件

实现自定义消息收发前，请确保已集成会话消息界面。

实现方法

发送自定义消息

发送方可以在会话界面的消息发送按钮上绑定发送消息的函数，您可以根据业务需要，决定调用sendCustomMsgActive或sendCustomMsgBySDK函数发送自定义消息。

以“发送一条评价消息”为例，发送时，可将“是否为评价消息”标记在附件信息attach字段中，然后在消息接收时进行判断:

• 如果是评价消息，则使用自定义渲染。
• 如果不是，则返回 null，使用默认的消息渲染逻辑。

示例代码：

import { ComplexAvatarContainer } from '@xkit-yx/im-kit-ui'
//自定义发送按钮
const actions = [
  {
    action: 'setting',
    visible: true,
    render: () => {
      return (
        <div onClick={sendEvaluationMessage} style={{margin: '0 10px', fontSize: '14px'}}>
          <i style={{ fontSize: '14px'}} className="iconfont seeting">&#xe72f;</i>
        </div>
      )
    }
  },
  {
    action: 'emoji',
    visible: true,
  },
  {
    action: 'sendImg',
    visible: true,
  },
  {
    action: 'sendFile',
    visible: true,
  }
]

//发送消息时，在发送的dom上绑定该函数，调用store中发送消息的方法，在消息体上加入自定义的参数
const sendEvaluationMessage = () => {
  const [scene, to] = store.uiStore.selectedSession.split('-')
  const from = store.userStore.myUserInfo.account
  //用户自定义参数
  const attach = {
    isEvaluation: true
  }
  store.msgStore.sendCustomMsgActive({
    scene,
    from,
    to,
    attach: JSON.stringify(attach)
  })
}


<ChatContainer
    ...
    actions={actions}
  />

接收自定义消息

同样以“接收评价消息”为例，接收方可从如下回调函数中获取 IM UIKit 渲染一条消息的所有参数，从而自行实现任意的 UI 展示。

如果需要针对特定类型(type）的消息进行单独的渲染处理，可以根据type判断并返回自定义的内容，如果返回undefined或false则使用默认渲染方式。

回调	类型	说明
renderP2pCustomMessage	((options: RenderP2pCustomMessageOptions) => Element | null)	渲染单聊中的自定义消息
renderTeamCustomMessage	((options: RenderTeamCustomMessageOptions) => Element | null)	渲染群聊中的自定义消息
renderMessageOuterContent	((msg: IMMessage) => JSX.Element | null | undefined)	自定义渲染会话消息，气泡样式也需要自定义
renderMessageInnerContent	((msg: IMMessage) => JSX.Element | null | undefined)	自定义渲染会话消息，不需要自定义气泡样式

const evaluationMessage = (options) => {
    let isEvaluation
    if(options.attach){
      isEvaluation = options.attach.isEvaluation
    }
    return (
      isEvaluation ?  
         <div className='msg-wrapper'>
          <div className='text'>欢迎您进行评价</div>
          <img className='star' src="https://yx-web-nosdn.netease.im/common/57dea86c692f76efdfecff37ee7e1059/星星.png"/>
          <img className='star' src="https://yx-web-nosdn.netease.im/common/57dea86c692f76efdfecff37ee7e1059/星星.png"/>
          <img className='star' src="https://yx-web-nosdn.netease.im/common/57dea86c692f76efdfecff37ee7e1059/星星.png"/>
          <img className='star' src="https://yx-web-nosdn.netease.im/common/57dea86c692f76efdfecff37ee7e1059/星星.png"/>
          <img className='star' src="https://yx-web-nosdn.netease.im/common/57dea86c692f76efdfecff37ee7e1059/星星.png"/>
        </div> : undefined
    )
  }
  
   <ChatContainer
     //...
      renderMessageInnerContent={evaluationMessage}
    />

查看在线示例

查看在线示例

在 IMAppProps 传入正确的 appkey、account 和 token 即可在线预览效果。

最终实现的效果参见如下 gif 动图：

常见问题

可通过哪些参数/回调自定义渲染消息的样式？

支持通过如下参数/回调自定义渲染单聊和群聊的自定义消息。

参数/回调	类型	说明
renderP2pCustomMessage	((options: RenderP2pCustomMessageOptions) => Element | null)	渲染单聊中的自定义消息
renderTeamCustomMessage	((options: RenderTeamCustomMessageOptions) => Element | null)	渲染群聊中的自定义消息
renderMessageAvatar	(msg: IMMessage) => JSX.Element | null | undefined	自定义渲染消息头像
renderMessageOuterContent	((msg: IMMessage) => JSX.Element | null | undefined)	自定义渲染会话消息，气泡样式也需要自定义
renderMessageInnerContent	((msg: IMMessage) => JSX.Element | null | undefined)	自定义渲染会话消息，不需要自定义气泡样式
renderMessageName	(msg: IMMessage) => JSX.Element | null | undefined	自定义渲染消息昵称