跳到主要内容

🚀使用 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.createTextMessage('hello openim')

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