AIM提供的客户端JSSDK名为AIM Web SDK,即AIM(阿里巴巴即时通信)的Web版本,提供了创建IMSDK、DataSDK、常量定义、辅助函数等能力。集成AIM Web SDK可在浏览器端使用AIM的能力。本文介绍AIM Web SDK,及其核心SDK、数据SDK、会话相关辅助函数、消息相关辅助函数。

概述

说明 目前支持桌面和移动端的浏览器,暂不支持小程序。
AIM Web SDK包含IMSDK和DataSDK。
模块 内容 特性
IMSDK 核心SDK:基础能力API、事件中心等。 底层的API和事件系统。
DataSDK 数据SDK:对API和事件的整合。 可监听取得实时数据Store。
与其他客户端SDK差异

由于SDK部分能力依赖平台或浏览器提供, 例如发送地理位置、发送语音、拍摄短视频。在Web端,这类消息发送会受限或者能力不全,但消息接收不受到影响。

IMSDK

  • 介绍

    AIM IMSDK是各个模块的整合,同时也是入口,通过IMSDK可以方便地使用各个模块的能力。

  • API
    方法 返回模块 介绍
    getSettingService Setting 获取Setting模块
    getAuthService Auth Auth包含登入、登出、连接状态等
    getMsgService Msg Msg模块,消息收发等API
    getConvService Conv Conv模块,会话相关API
    getEventService Event 事件中心,注册/解除事件
    getLoggerService Logger 日志模块
  • 调用示例
    IMSDK.getAuthService().login() // 登入
    IMSDK.getAuthService().logout() // 登出

DataSDK

  • 介绍
    AIM DataSDK是AIM统一数据层的SDK。具有以下能力:
    • 统一封装消息会话数据获取和变更处理。
    • 提供动态的数据内存存储。
    • 封装基础API, 可执行发消息、激活会话等操作。

    通过DataSDk.subscribe方法, 监听实时变更的IStore

    说明 SDK导出了用于DataSDK初始化的initStore。
  • API
    方法 请求参数 返回值 描述
    subscribe Function(IStore Function 监听Store变更,实时得到最新数据
    activeConv appCid、IActiveOption Promise<Boolean> 激活选中会话
    • appCid必填,为待激活会话的ID
    • IActiveOption可选
    inactiveConv - Boolean 取消激活会话
    removeLocalDismissedConv appCid void 移除本地Store中的已经解散的会话
    listConversations - Promise<Number> 拉取最近会话列表
    listPrevMsgs cursor、count Promise<Number> 拉取历史消息
    listNextMsgs cursor、count Promise<Number> 拉取最新消息
    updateTypingStatus isTyping、TypingType void 更新正在输入状态
    sendTextMessage appCid、text、ISendMsgExtraOptions Promise<void> 发送文本消息

    ISendMsgExtraOptions为额外消息参数,可选

    sendCustomMessage appCid、CustomContentModelISendMsgExtraOptions Promise<void> 发送自定义消息

    ISendMsgExtraOptions为额外消息参数,可选

    sendPhotoMessage appCid、File、ISendMsgExtraOptions Promise<void> 发送图片消息
    • File:浏览器File对象,请参见File
    • ISendMsgExtraOptions为额外消息参数,可选
    sendLinkMessage appCid、LinkContentModelISendMsgExtraOptions Promise<void> 发送链接消息

    ISendMsgExtraOptions为额外消息参数,可选

    sendAtMessage appCid、ElementModel[]、ISendMsgExtraOptions Promise<void> 发送@人消息

    ISendMsgExtraOptions为额外消息参数,可选

    sendStructMessage appCid、StructContentModelISendMsgExtraOptions Promise<void> 发送结构化消息

    ISendMsgExtraOptions为额外消息参数,可选

    sendFileMessage appCid、File、ISendMsgExtraOptions Promise<void> 发送文件消息
    • File:浏览器File对象,请参见File
    • ISendMsgExtraOptions为额外消息参数,可选

msgFeature

  • 介绍

    消息相关的辅助函数。

  • API
    方法 参数 返回值 介绍
    isMyMsg UserMessageModel Boolean 判断消息是否为登录用户发送
    genUUid - String 获取SDK唯一的ID

convFeaure

mediaId

  • 介绍

    图片和多媒体相关的辅助函数。

    以下为mediaId相关的能力。mediaId是AIM资源ID,为String类型,通过以下能力可转换为对应的URL地址

  • API
    方法 参数 返回值 介绍
    isMediaId mediaId Boolean 判断传入字符串,是否为合法medaiId
    mid2Object mediaId、IMidOption IMidResultObj 解析mediaId,得到宽、高、URL等信息
    mid2Url mediaId、IMidOption String 解析mediaId,得到URL信息
  • 类型
    名称 是否必选 类型 介绍
    mediaId String 图片和多媒体资源ID
    表 1. IMidOption
    名称 是否必选 类型 介绍
    imageSize String 图片大小。取值:
    • thumb:小缩略图
    • normal:中缩略图
    • origin:原图
    queryParams {[key: String]: String} URL参数
    表 2. IMidResultObj
    名称 是否必选 类型 介绍
    url String 图片访问地址
    width Number 宽度,单位:像素
    height Number 高度,单位:像素
    type String[] 文件类型,例如["IMAGE", "JPG"]
  • 调用示例
    import { Image } from 'antd';
    
    const {
        IMSDK,
        mediaId: {
            isMediaId,
            mid2Object,
            mid2Url,
        }
    } = AIM
    
    // 获取缩略图信息(应用在 消息列表)
    const midObj = React.useMemo(() => {
        let result = {
            width: parseInt(msg.message?.content?.photo?.extension?.width || '0', 10),
            height: parseInt(msg.message?.content?.photo?.extension?.height || '0', 10),
            url: '',
            type: [],
        };
        const mediaId = msg?.message?.content?.photo?.mediaId || '';
        if (mediaId.indexOf('data:image') === 0 || mediaId.indexOf('http') === 0) {
            result.url = mediaId;
        } else if (mediaId && isMediaId(mediaId)) {
            result = mid2Object(mediaId, {
                imageSize: 'normal',
                queryParams: {
                    auth_bizType: 'impaas',
                    bizType: 'impaas',
                    auth_bizEntity: JSON.stringify({ cid: msg.message?.appCid || '', msgId: msg.message?.messageId }),
                    domain: IMSDK.getSettingService().get().appName || '',
                },
            });
        }
        return result;
    }, [msg]);
    console.log(midObj)
    
    // 获取原图地址
    const previewSrc = React.useMemo(() => {
        const mediaId = msg?.message?.content?.photo?.mediaId || '';
        if (mediaId.indexOf('data:image') === 0 || mediaId.indexOf('http') === 0) {
            return mediaId
        } else if (isMediaId(mediaId)) {
            return mid2Url(mediaId, {
                imageSize: 'normal',
                queryParams: {
                    auth_bizType: 'impaas',
                    bizType: 'impaas',
                    auth_bizEntity: JSON.stringify({ cid: msg.message?.appCid || '', msgId: msg.message?.messageId }),
                    domain: IMSDK.getSettingService().get().appName || '',
                },
            })
        }
    }, [msg]);
    
    return (
        <div className="img-msg">
            <Image src={midObj.url} width={width} height={height} preview={{
                src: previewSrc,
            }} />
        </div>
    );