【无标题】好消息突破：IM开源项目OpenIM采用wasm技术实现jssdk-Toy模板网

这篇具有很好参考价值的文章主要介绍了【无标题】好消息突破：IM开源项目OpenIM采用wasm技术实现jssdk。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

OpenIM 客户端sdk用golang实现，同时采用sqlite存储本地聊天记录，通过gomobile生成sdk，供iOS Android 调用，达到了了一套代码多端复用的效果。最近融合wasm技术，让浏览器具备存储能力，本地聊天记录存储在浏览器，彻底放弃了之前jssdk server服务端。

WebAssembly 是一种运行在现代网络浏览器中的新型代码，并且提供新的性能特性和效果。它设计的目的不是为了手写代码而是为诸如 C、C++和 Rust 等低级源语言提供一个高效的编译目标。

对于网络平台而言，这具有巨大的意义——这为客户端 app 提供了一种在网络平台以接近本地速度的方式运行多种语言编写的代码的方式；在这之前，客户端 app 是不可能做到的。

而且，你在不知道如何编写 WebAssembly 代码的情况下就可以使用它。WebAssembly 的模块可以被导入的到一个网络 app（或 Node.js）中，并且暴露出供 JavaScript 使用的 WebAssembly 函数。JavaScript 框架不但可以使用 WebAssembly 获得巨大性能优势和新特性，而且还能使得各种功能保持对网络开发者的易用性。

webpack5+引入方式

1.获取npm包

npm包主页
npm install open-im-sdk-wasm

2.获取wasm所需静态资源

在项目根目录下的node_modules目录下找到open-im-sdk-wasm子目录，将其中assets文件夹下的所有文件拷贝到项目公共资源目录中（public）。
文件清单
openIM.wasm
sql-wasm.wasmwasm_exec.js
并在您的index.html文件中通过script标签引入wasm_exec.js文件

3.在你的项目中引入SDK

引入SDK
import { getSDK } from "open-im-sdk-wasm";
const OpenIM = getSDK();
- 可能遇到的问题
- 解决方案：在webpack配置中新增配置如下
- resolve: {
  fallback: {path: false,
  crypto: false,
  },},

vite或webpack4引入方式

第一、二步同上

3.在你的项目中引入SDK

将npm包中的lib目录拷贝到项目中，如：src/utils/lib。
修改lib/api/index.js文件中对web worker的引入方式。
- Webpack4.x
- + import IMWorker from 'worker-loader!./worker.js';
  - worker = new Worker(new URL('./worker.js', import.meta.url));
  + worker = new IMWorker();
- vite
- + import IMWorker from './worker?worker';
  - worker = new Worker(new URL('./worker.js', import.meta.url));
  + worker = new IMWorker();
引入SDK
路径为拷贝后放置lib的路径
import { getSDK } from "@/utils/lib";
const OpenIM = getSDK();

4.引入loader（webpack4）

这一步仅适用于webpack4引入，webpack5或vite可忽略

安装worker-loader和worker-plugin
npm install worker-loader worker-plugin -D
在webpack中新增配置
const WorkerPlugin = require("worker-plugin");
...
plugins: [new WorkerPlugin()]
...

常见问题

1.如何关闭wasm日志打印？

答：开发环境下为了调试可以打开wasm日志，可以在wasm_exec.js文件中找到console.log(outputBuf.substr(0, nl));取消注释

2.生产环境wasm包体过大？

答：生产环境建议启用gzip，wasm模块经压缩仅5Mb，且仅初次加载或有变动时才会进行全量加载。

3.我的开发环境对于以上引入方式都不适用？

答：目前官方仅提供几种常见编译工具的引入教程，若有使用其他编译工具的小伙伴可自行尝试引入，并欢迎向文档提供PR。

项目介绍

OpenIM继续领跑开源IM领域，在广大开发者的支持下，目前github star突破10k。在数据泄露、信息外泄、隐私滥用的时代，IM私有化部署需求旺盛。其中，政企协同办公对IM需求猛增，随着信息化技术的迭代升级以及信创产业加速落地和实践，协同办公软件的发展潜力将进一步被释放。“安全可控“逐步成为第一要素。对于社区交友领域，暴露出的隐私安全问题越来越多，私有化部署确保用户数据不泄露。

OpenIM从服务端到客户端SDK开源即时通讯（IM）整体解决方案，可以轻松替代第三方IM云服务，打造具备聊天、社交、办公功能的app，目前sdk包括uniapp flutter iOS Android jssdk等全端覆盖。 openim 集成,开源,rust,开发语言,后端