跳到主要内容

🚀使用 Demo

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

集成步骤(Vite/Webpack5+)

1. 添加依赖

npm install open-im-sdk-wasm

2. 获取 wasm 所需静态资源

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

  • 文件清单
openIM.wasm
sql-wasm.wasm
wasm_exec.js
  • 拷贝完成后在您的index.html文件中通过 script 标签引入wasm_exec.js文件

3. 引入 SDK

  • 引入 SDK
import { getSDK } from 'open-im-sdk-wasm';

const IMSDK = getSDK();
  • 可能遇到的问题 webpack5_error

  • 解决方案

    在 webpack 配置中新增配置如下

    resolve: {
    fallback: {
    fs: false,
    path: false,
    crypto: false,
    },
    },

4. 登录、设置监听

import { getSDK, CbEvents } from 'open-im-sdk-wasm';

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 'open-im-sdk-wasm';

const IMSDK = getSDK();

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

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

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