本文介绍AIM JSSDK的集成步骤,包括引入SDK、登录和初始化。
环境准备
引入SDK- 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
- 如果您还未下载最新SDK,请点击AIM.web.min.js下载。
- 在项目中引入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。
- 在应用加载时,初始化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)
- 登录
在服务端接入后,前端引入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> );
- 初始化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)