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

环境准备

引入SDK
  1. 以script标签引入CDN文件,在URL中指定版本。
    <script src="//g.alicdn.com/code/npm/@ali/aim-sdk/0.0.4/AIM.web.min.js"></script>
    const { 
      IMSDK, // 核心 SDK
      DataSDK, // 数据 SDK
      constants, // 常量定义
      convFeature, // 会话相关辅助函数
      msgFeature, // 消息相关辅助函数
      initStore, // 数据 SDK,初始化 Store
      getFileUrl,  // 获取文件访问地址
      mediaId, // 资源 ID 工具
    } = window.AIM
  2. 下载SDK,项目引入。
    import { AIM } from './AIM.web.min.js';
    const { 
      IMSDK, // 核心 SDK
      DataSDK, // 数据 SDK
      constants, // 常量定义
      convFeature, // 会话相关辅助函数
      msgFeature, // 消息相关辅助函数
      initStore, // 数据 SDK,初始化 Store
      getFileUrl,  // 获取文件访问地址
      mediaId, // 资源 ID 工具
    } = AIM

登录和初始化

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

  1. 初始化IMSDK
    const deviceId = await IMSDK.getAuthService().getDeviceId();
    const Setting = {
      appKey, // 应用 key
      mediaHost: 'media 地址',
      deviceId, // 设备唯一id
      appName, // app_name 应用名称
      debug: true,
      wsUrl: url,
      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()
            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)