跳到主要内容

🚀使用 Demo

我们强烈建议您首先运行我们为您准备的框架相关的示例 DEMO 。这不仅可以让您直观体验 OpenIM SDK 的功能,还将帮助您在实际集成过程中迅速定位和解决问题。

集成步骤

1. 添加依赖

npm install @openim/wasm-client-sdk

2. 获取 wasm 所需静态资源

在项目根目录下的node_modules目录下找到@openim/wasm-client-sdk子目录,将其中assets文件夹下的所有文件拷贝到项目公共资源目录中(public)。

  • 文件清单
openIM.wasm
sql-wasm.wasm
wasm_exec.js

3. 引入 SDK

  • 引入 SDK
import { getSDK } from '@openim/wasm-client-sdk';

const IMSDK = getSDK({
coreWasmPath: "./openIM.wasm";
sqlWasmPath: "/sql-wasm.wasm";
debug: true; // false不打印日志
});

4. 登录、设置监听

import { getSDK, CbEvents } from '@openim/wasm-client-sdk';

const IMSDK = getSDK();

IMSDK.on(CbEvents.OnConnecting, () => {
// 连接中
})
IMSDK.on(CbEvents.OnConnectSuccess, () => {
// 连接成功
})
IMSDK.on(CbEvents.OnConnectFailed, () => {
// 连接失败
})
IMSDK.on(CbEvents.OnUserTokenExpired, () => {
// token无效
})

IMSDK.login({
userID: string; // IM 用户 userID
token: string; // IM 用户令牌
platformID: number; // 当前登录平台号,web端为5
apiAddr: string; // IM api 地址,一般为`http://your-server-ip:10002`
wsAddr: string; // IM ws 地址,一般为`ws://your-server-ip:10001`
})
.then(() => {
// 登录完成
})
.catch(({ errCode, errMsg }) => {
// 登录失败
});

5. 收发消息

import { getSDK, CbEvents } from '@openim/wasm-client-sdk';

const IMSDK = getSDK();

IMSDK.on(CbEvents.OnRecvNewMessages, ({ data: messages }) => {
// 收到新消息
})

const { data: message } = await IMSDK.createTextMessage('hello openim')

IMSDK.sendMessage({
recvID: string; // 接收方ID
groupID: string; // 群聊ID
message: message; // 要发送的消息体
}).then(({data:succeedMessage}) => {
// 发送成功 succeedMessage为发送成功后完整的消息体
}).catch(({ errCode, errMsg }) => {
// 发送失败
})