🚀使用 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

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

• 可能存在的问题

  如果您正在使用webpack4，可能需要参考这个issue来进行配置How to import @openim/wasm-client-sdk in webpack4.x

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 }) => {
  // 发送失败
})