🚀使用 Demo

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

快速集成

1. 添加依赖

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

2. 获取 wasm 所需静态资源

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

• 文件清单

openIM.wasm
sql-wasm.wasm
wasm_exec.js

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

• 可能存在的问题

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

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 'open-im-sdk-wasm';
import type { WSEvent } from 'open-im-sdk-wasm/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 'open-im-sdk-wasm';
import type { WSEvent, MessageItem } from 'open-im-sdk-wasm/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);
}