写点什么

好消息 突破:IM 开源项目 OpenIM 采用 wasm 技术实现 jssdk

作者:Geek_1ef48b
  • 2022-11-26
    云南
  • 本文字数:2074 字

    阅读完需:约 7 分钟

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 等全端覆盖。


github 地址:https://github.com/OpenIMSDK/Open-IM-Server

开发者中心:https://doc.rentsoft.cn/#/

OpenIM 团队

开源一词最初是指开源软件(OSS)。开源软件是源代码可以任意获取的计算机软件,任何人都能查看、修改和分发他们认为合适的代码。

开源软件依托同行评审和社区生产,皆以分散、协作的方式开发。开源软件由社区开发,而非单个作者或公司,因此通常成本更低、更灵活,寿命比专有软件更长。开源已成为一种超越软件生产界限的运动和工作方式。开源运动旨在利用开源软件的价值和分散的生产模型,为其社区和行业的问题寻找新的解决方法

OpenIM 邀请全球技术极客参与技术优化,让开发者轻松集成,让每一个应用都具备 IM 功能,同时考虑企业的接入成本、服务器资源以及最重要的数据安全性和私密性。

团队来自资深 IM 技术团队,我们致力于用开源技术创造服务价值,打造轻量级、高可用的 IM 架构,开发者只需简单调用 SDK,即可在应用内构建多种即时通讯及实时音视频互动场景。OpenIM 优势:开源,安全,可靠,低成本。对于信息安全重视的电子政务,企业协同办公,OpenIM 都是非常好的选择。

从公司成立之初就将“开源”作为核心战略来推进,开源充分体现了自由、平等、分享的互联网精神。

用户头像

Geek_1ef48b

关注

还未添加个人签名 2021-08-25 加入

还未添加个人简介

评论

发布
暂无评论
好消息 突破:IM开源项目OpenIM采用wasm技术实现jssdk_Geek_1ef48b_InfoQ写作社区