Skip to main content

🚀 Using the Demo​

We strongly recommend that you first run the framework-specific sample DEMO we have prepared for you. This will not only give you a firsthand experience of OpenIMSDK's features but will also assist you in quickly identifying and resolving issues during the actual integration process.

Integration Steps (Webpack5+)​

1. Add Dependencies​

npm install @openim/wasm-client-sdk

2. Obtain the static resources required for wasm​

In the node_modules directory at the root of your project, find the @openim/wasm-client-sdk sub-directory and copy all files from the assets folder to the public resources directory of your project (public).

  • File list:
openIM.wasm
sql-wasm.wasm
wasm_exec.js
  • After copying, include the wasm_exec.js file in your index.html via the script tag.

3. Import SDK​

  • Import SDK
import { getSDK } from '@openim/wasm-client-sdk';

const OpenIM = getSDK();
  • Potential issue you might encounter webpack5_error

  • Solution

    Add the following configuration in the webpack setup:

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

Integration Steps (Vite, Webpack4)​

The first and second steps are the same as the Webpack5+ integration steps mentioned above.

Import SDK​

Copy the lib directory from the npm package to your project, such as: src/utils/lib​

If using Webpack4, you also need to import the worker loader:​

  • Install worker-loader and worker-plugin
npm install worker-loader worker-plugin -D
  • Add the following configuration in webpack:
const WorkerPlugin = require("worker-plugin");

...
plugins: [new WorkerPlugin()]
...

Modify the import method of web worker in the lib/api/index.js file.​

  • For Webpack4.x:
+ import IMWorker from 'worker-loader!./worker.js';

- worker = new Worker(new URL('./worker.js', import.meta.url));
+ worker = new IMWorker();
  • For Vite:
+ import IMWorker from './worker?worker';

- worker = new Worker(new URL('./worker.js', import.meta.url));
+ worker = new IMWorker();

Importing​

The path is where the lib was placed after copying

import { getSDK } from '@/utils/lib';

const OpenIM = getSDK();