本文介绍AIM JSSDK的集成步骤,包括引入SDK、登录和初始化。

环境准备

引入SDK
  1. HTML页面代码中使用script标签引入SDK文件(AIM.web.min.js),在URL中指定版本。
    <script src="//g.alicdn.com/code/npm/@ali/aim-sdk/1.0.9/AIM.web.min.js"></script>
    const {
        IMSDK, // 核心SDK。
        DataSDK, // 数据SDK。
        constants, // 常量定义。
        convFeature, // 会话相关辅助函数。
        msgFeature, // 消息相关辅助函数。
        initStore, // 数据SDK,初始化Store。
        getFileUrl,  // 获取文件访问地址。
        mediaId, // 资源ID工具, 请参见整体介绍-mediaId。
        ConnectionStatus, // 连接状态枚举,请参见ConnectionStatus。
        EventNameEnum, //  事件名列表枚举,请参见EventNameEnum。
        IMsgStatusType, // 消息状态枚举,请参见IMsgStatusType。
        IRecallOperatorType, // 撤回操作者枚举,请参见IRecallOperatorType。
        TypingType, // 正在输入的类型,请参见TypingType。
    } = window.AIM
  2. 如果您还未下载最新SDK,请点击AIM.web.min.js下载。
  3. 在项目中引入SDK。
    import { AIM } from './AIM.web.min.js';
    const {
        IMSDK, // 核心SDK。
        DataSDK, // 数据SDK。
        constants, // 常量定义。
        convFeature, // 会话相关辅助函数。
        msgFeature, // 消息相关辅助函数。
        initStore, // 数据SDK,初始化Store。
        getFileUrl,  // 获取文件访问地址。
        mediaId, // 资源ID工具, 请参见整体介绍-mediaId。
        ConnectionStatus, // 连接状态枚举,请参见ConnectionStatus。
        EventNameEnum, //  事件名列表枚举,请参见EventNameEnum。
        IMsgStatusType, // 消息状态枚举,请参见IMsgStatusType。
        IRecallOperatorType, // 撤回操作者枚举,请参见IRecallOperatorType。
        TypingType, // 正在输入的类型,请参见TypingType。
    } = AIM

登录和初始化

IMSDK通过AuthService中的set方法传入AIM配置,进行初始化,并通过login方法登录,登录成功后即可初始化DataSDK。

  1. 在应用加载时,初始化IMSDK。
    const deviceId = await IMSDK.getAuthService().getDeviceId();
    const Setting = {
      appKey, // 应用key。
      deviceId, // 设备唯一id。
      appName, // app_name应用名称。
      debug: true,
      log: {
        error(...args) { console.error(...args) },
        info(...args) { console.info(...args) }
      },
      async authTokenCallback(uid) {
        return fetch('服务端地址获取URL' )
          .then((res) => res.json())
          .then((res) => {
          if (res) {
              return { ...res, uid };
          }
          throw new Error('token is null');
        });
      },
    };
    
    IMSDK.getSettingService().set(Setting)
  2. 登录

    在服务端接入后,前端引入SDK并初始化完成,即可调用登录。

    // 初始化。
    IMSDK.getSettingService().set(Setting)
    // 登录。
    IMSDK.getAuthService().login()
    
    // 登出。
    const logout = React.useCallback(() => {
      IMSDK.getAuthService().logout()
    }, [])
    // 判断是否登录成功。
    // 登录成功前,渲染Login组件。登录成功后,渲染Chat组件。
    const [loginStatus, setLoginStatus] = React.useState(ConnectionStatus.CONN_UNCONNECTED)
    React.useEffect(() => {
      imsdk.getEventService().register((eventName: EventNameEnum, eventData: any) => {
        switch (eventName) {
          case EventNameEnum.PaaSConnectionChanged:
            setLoginStatus(eventData)
            break;
        }
      })
    }, [])
    return (
      <Layout>
        <Header>
        <Topbar loginStatus={loginStatus} logout={logout} />
        </Header>
      <Layout>
        {loginStatus !== ConnectionStatus.CONN_AUTHED ? <Login login={login} /> : <Chat />}
        </Layout>
    </Layout>
    );
  3. 初始化DataSDK

    在登录成功后,即可初始化DataSDK。

    以React为例,监听Store变更将更新State数据,即可完成会话和消息的实时渲染。

    // hooks/useStore.js
    export const useStore = () => {
    
        const [store, setStore] = React.useState(initStore)
    
        React.useEffect(function DidMount() {
            const storeUnsubscribe = DataSDK.subscribe((store) => {
                setStore(store)
            })
            DataSDK.listConversations(0, 1000)
            return () => {
                storeUnsubscribe()
            }
        }, [])
    
        return [store, dataSDK]
    }
    
    // Chat组件
    const [store, DataSDK] = useStore()
    const { convIdList, convMap, msgIdList, msgMap, typingStatusMap } = store
    return (
      <div>
        会话列表:JSON.stringify(convIdList)
        消息列表:JSON.stringify(msgIdList)
      </div>
    )
    
    // 备注
    // 激活会话:DataSDK.activeConv(appCid).then(scrollToBottom)
    // 发文本消息:DataSDK.sendTextMessage(sendParams)

Demo下载

点此下载JSSDK Demo。