好消息 突破:IM开源项目OpenIM采用wasm技术实现jssdk 2022-11-25 20:45·OpenIM OpenI

举报
OpenIM 发表于 2022/11/26 12:55:17 2022/11/26
【摘要】 好消息 突破:IM开源项目OpenIM采用wasm技术实现jssdkOpenIM 客户端sdk用golang实现,同时采用sqlite存储本地聊天记录,通过gomobile生成sdk,供iOS Android 调用,达到了了一套代码多端复用的效果。最近融合wasm技术,让浏览器具备存储能力,本地聊天记录存储在浏览器,彻底放弃了之前jssdk server服务端。WebAssembly 是一种...

好消息 突破: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-loaderworker-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都是非常好的选择。

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

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。