跳到主要内容

🚀使用 Demo

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

快速集成

1. 添加依赖

npm install @openim/wasm-client-sdk @openim/electron-client-sdk --save

2. 获取 wasm 所需静态资源

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

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

3. 引入 SDK

  • 主进程
import OpenIMSDKMain from '@openim/electron-client-sdk';

...
new OpenIMSDKMain(libPath, mainWindow.webContents);
...
  • preload脚本
import '@openim/electron-client-sdk/lib/preload';

...
  • 渲染进程
import { getWithRenderProcess } from '@openim/electron-client-sdk/lib/render';

const { instance } = getWithRenderProcess();

export const IMSDK = instance;

4. 登录、设置监听

注意:在electron和web环境下,初始化SDK的方式有所不同。如果需要同时支持electron和web,需要注意分别处理。

import { CbEvents, LogLevel } from '@openim/wasm-client-sdk';
import type { WSEvent } from '@openim/wasm-client-sdk/lib/types/entity';

IMSDK.on(CbEvents.OnConnecting, handleConnecting);
IMSDK.on(CbEvents.OnConnectFailed, handleConnectFailed);
IMSDK.on(CbEvents.OnConnectSuccess, handleConnectSuccess);

// electron
await IMSDK.initSDK({
platformID: 'your-platform-id',
apiAddr: 'http://your-server-ip:10002',
wsAddr: 'ws://your-server-ip:10001',
dataDir: 'your-db-dir',
logFilePath: 'your-log-file-path',
logLevel: LogLevel.Debug,
isLogStandardOutput: true,
});

await IMSDK.login({
userID: 'your-user-id',
token: 'your-token',
});

// web
await IMSDK.login({
userID: 'your-user-id',
token: 'your-token',
platformID: 5,
apiAddr: 'http://your-server-ip:10002',
wsAddr: 'ws://your-server-ip:10001',
logLevel: LogLevel.Debug,
});

function handleConnecting() {
// Connecting...
}

function handleConnectFailed({ errCode, errMsg }: WSEvent) {
// Connection failed ❌
console.log(errCode, errMsg);
}

function handleConnectSuccess() {
// Connection successful ✅
}

5. 收发消息

import { CbEvents } from '@openim/wasm-client-sdk';
import type { WSEvent, MessageItem } from '@openim/wasm-client-sdk/lib/types/entity';

// Listenfor new messages 📩
IMSDK.on(CbEvents.OnRecvNewMessages, handleNewMessages);

const message = (await IMSDK.createTextMessage('hello openim')).data;

IMSDK.sendMessage({
recvID: 'recv user id',
groupID: '',
message,
})
.then(() => {
// Message sent successfully ✉️
})
.catch(err => {
// Failed to send message ❌
console.log(err);
});

function handleNewMessages({ data }: WSEvent<MessageItem[]>) {
// New message list 📨
console.log(data);
}