集成说明

环境准备

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。