From 73499d4b40badf820be737d53f6f05877cb54d7c Mon Sep 17 00:00:00 2001
From: Bloomingg <1293499952@qq.com>
Date: Mon, 27 May 2024 16:05:39 +0800
Subject: [PATCH] docs: instructions for use electron sdk

---
 README.md | 113 ++++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 80 insertions(+), 33 deletions(-)

diff --git a/README.md b/README.md
index 07c177d..b50b5c1 100644
--- a/README.md
+++ b/README.md
@@ -1,33 +1,71 @@
-# Node/Electron Client SDK for OpenIM 👨‍💻💬
+# Electron Client SDK for OpenIM 👨‍💻💬
 
 Use this SDK to add instant messaging capabilities to your application. By connecting to a self-hosted [OpenIM](https://www.openim.online/) server, you can quickly integrate instant messaging capabilities into your app with just a few lines of code.
 
-The underlying SDK core is implemented in [OpenIM SDK Core](https://github.com/openimsdk/openim-sdk-core). Using the [WebAssembly](https://webassembly.org/) support provided by Go language, it can be compiled into wasm for web integration. The web interacts with the [OpenIM SDK Core](https://github.com/openimsdk/openim-sdk-core) through JSON, and the SDK exposes a re-encapsulated API for easy usage. In terms of data storage, JavaScript handles the logic of the SQL layer by virtualizing SQLite and storing it in IndexedDB using [sql.js](https://sql.js.org/).
+The underlying SDK core is implemented in [OpenIM SDK Core](https://github.com/openimsdk/openim-sdk-core). Using cgo, it is exported as C interfaces and provided as dynamic libraries such as DLL, SO, and DYLIB for use by other languages, implemented in [OpenIM SDK Cpp](https://github.com/openimsdk/openim-sdk-cpp.git).The web interacts with the [OpenIM SDK Cpp](https://github.com/openimsdk/openim-sdk-cpp.git) through JSON, using FFI (Foreign Function Interface) to communicate with the C interfaces, and the SDK exposes a re-encapsulated API for easy usage. For data storage, it utilizes the SQLite layer that is provided internally by the [OpenIM SDK Core](https://github.com/openimsdk/openim-sdk-core).
 
 ## Documentation 📚
 
-Visit [https://doc.rentsoft.cn/](https://doc.rentsoft.cn/) for detailed documentation and guides.
+Visit [https://docs.openim.io/](https://docs.openim.io/) for detailed documentation and guides.
 
-For the SDK reference, see [https://doc.rentsoft.cn/sdks/quickstart/browser](https://doc.rentsoft.cn/sdks/quickstart/browser).
+For the SDK reference, see [https://docs.openim.io/sdks/quickstart/electron](https://docs.openim.io/sdks/quickstart/electron).
 
 ## Installation 💻
 
 ### Adding Dependencies
 
 ```shell
-npm install open-im-sdk-node --save
+npm install open-im-sdk-wasm @openim/electron-client-sdk --save
 ```
 
+### Obtaining Required Static Resources for WASM
+
+Follow these steps to obtain the static resources required for WebAssembly (WASM):
+
+1. Locate the `open-im-sdk-wasm` subdirectory in the `node_modules` directory of your project. Copy all the files in the `assets` folder to your project's public resource directory.
+
+   The files to be copied are:
+
+   - `openIM.wasm`
+   - `sql-wasm.wasm`
+   - `wasm_exec.js`
+
+2. After copying the files, import the `wasm_exec.js` file in your `index.html` file using a `<script>` tag.
+
+### Possible Issues ❗
+
+> if you are using webpack4, you may flow this issue [How to import open-im-sdk-wasm in webpack4.x](https://github.com/openimsdk/open-im-sdk-web-wasm/issues/73).
+
 ## Usage 🚀
 
 The following examples demonstrate how to use the SDK. TypeScript is used, providing complete type hints.
 
 ### Importing the SDK
 
-```typescript
-import OpenIMSDK from 'open-im-sdk-node';
+## In main process
 
-const OpenIM = new OpenIMSDK();
+```typescript
+import OpenIMSDKMain from '@openim/electron-client-sdk';
+
+...
+new OpenIMSDKMain(libPath, mainWindow.webContents);
+...
+```
+
+## In preload script
+
+```typescript
+import '@openim/node-client-sdk/lib/preload';
+```
+
+## In renderer process
+
+```typescript
+import { getWithRenderProcess } from '@openim/node-client-sdk/lib/render';
+
+const { instance } = getWithRenderProcess();
+
+export const IMSDK = instance;
 ```
 
 ### Logging In and Listening for Connection Status
@@ -35,19 +73,37 @@ const OpenIM = new OpenIMSDK();
 > Note: You need to [deploy](https://github.com/openimsdk/open-im-server#rocket-quick-start) OpenIM Server first, the default port of OpenIM Server is 10001, 10002.
 
 ```typescript
-import { CbEvents } from 'open-im-sdk-wasm';
-import type { WSEvent } from 'open-im-sdk-wasm';
+import { CbEvents, LogLevel } from 'open-im-sdk-wasm';
+import type { WSEvent } from 'open-im-sdk-wasm/lib/types/entity';
 
-OpenIM.on(CbEvents.OnConnecting, handleConnecting);
-OpenIM.on(CbEvents.OnConnectFailed, handleConnectFailed);
-OpenIM.on(CbEvents.OnConnectSuccess, handleConnectSuccess);
+IMSDK.on(CbEvents.OnConnecting, handleConnecting);
+IMSDK.on(CbEvents.OnConnectFailed, handleConnectFailed);
+IMSDK.on(CbEvents.OnConnectSuccess, handleConnectSuccess);
 
-OpenIM.login({
-  userID: 'IM user ID',
-  token: 'IM user token',
+// 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() {
@@ -64,7 +120,7 @@ function handleConnectSuccess() {
 }
 ```
 
-To log into the IM server, you need to create an account and obtain a user ID and token. Refer to the [access token documentation](https://doc.rentsoft.cn/restapi/userManagement/userRegister) for details.
+To log into the IM server, you need to create an account and obtain a user ID and token. Refer to the [access token documentation](https://docs.openim.io/restapi/userManagement/userRegister) for details.
 
 ### Receiving and Sending Messages 💬
 
@@ -72,15 +128,15 @@ OpenIM makes it easy to send and receive messages. By default, there is no restr
 
 ```typescript
 import { CbEvents } from 'open-im-sdk-wasm';
-import type { WSEvent, MessageItem } from 'open-im-sdk-wasm';
+import type { WSEvent, MessageItem } from 'open-im-sdk-wasm/lib/types/entity';
 
 // Listenfor new messages 📩
-OpenIM.on(CbEvents.OnRecvNewMessages, handleNewMessages);
+IMSDK.on(CbEvents.OnRecvNewMessages, handleNewMessages);
 
-const message = (await OpenIM.createTextMessage('hello openim')).data;
+const message = (await IMSDK.createTextMessage('hello openim')).data;
 
-OpenIM.sendMessage({
-  recvID: 'recipient user ID',
+IMSDK.sendMessage({
+  recvID: 'recv user id',
   groupID: '',
   message,
 })
@@ -102,27 +158,18 @@ function handleNewMessages({ data }: WSEvent<MessageItem[]>) {
 
 You can find a demo web app that uses the SDK in the [openim-pc-web-demo](https://github.com/openimsdk/open-im-pc-web-demo) repository.
 
-## Browser Support 🌐
-
-| Browser             | Desktop OS            | Mobile OS |
-| ------------------- | --------------------- | --------- |
-| Chrome (61+)        | Windows, macOS, Linux | Android   |
-| Firefox (58+)       | Windows, macOS, Linux | Android   |
-| Safari (15+)        | macOS                 | iOS       |
-| Edge (Chromium 16+) | Windows, macOS        |           |
-
 ## Community :busts_in_silhouette:
 
 - 📚 [OpenIM Community](https://github.com/OpenIMSDK/community)
 - 💕 [OpenIM Interest Group](https://github.com/Openim-sigs)
-- 🚀 [Join our Slack community](https://join.slack.com/t/openimsdk/shared_invite/zt-22720d66b-o_FvKxMTGXtcnnnHiMqe9Q)
+- 🚀 [Join our Slack community](https://join.slack.com/t/openimsdk/shared_invite/zt-2ijy1ys1f-O0aEDCr7ExRZ7mwsHAVg9A)
 - :eyes: [Join our wechat (微信群)](https://openim-1253691595.cos.ap-nanjing.myqcloud.com/WechatIMG20.jpeg)
 
 ## Community Meetings :calendar:
 
 We want anyone to get involved in our community and contributing code, we offer gifts and rewards, and we welcome you to join us every Thursday night.
 
-Our conference is in the [OpenIM Slack](https://join.slack.com/t/openimsdk/shared_invite/zt-22720d66b-o_FvKxMTGXtcnnnHiMqe9Q) 🎯, then you can search the Open-IM-Server pipeline to join
+Our conference is in the [OpenIM Slack](https://join.slack.com/t/openimsdk/shared_invite/zt-2ijy1ys1f-O0aEDCr7ExRZ7mwsHAVg9A) 🎯, then you can search the Open-IM-Server pipeline to join
 
 We take notes of each [biweekly meeting](https://github.com/orgs/OpenIMSDK/discussions/categories/meeting) in [GitHub discussions](https://github.com/openimsdk/open-im-server/discussions/categories/meeting), Our historical meeting notes, as well as replays of the meetings are available at [Google Docs :bookmark_tabs:](https://docs.google.com/document/d/1nx8MDpuG74NASx081JcCpxPgDITNTpIIos0DS6Vr9GU/edit?usp=sharing).