集成说明

环境准备

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)