跳到主要内容

Web SDK (openIM.wasm) 快速集成与编译

Web 端通过将 qxj-im-core (v3.8.3-patch.3, Apache-2.0) 的 ./wasm/cmd/ 编译为 openIM.wasm，配合 Go 官方运行库 wasm_exec.js 与 Web SQLite (sql.js / IndexedDB) 运行在浏览器主线程或 Web Worker 中。

1. 从源码编译 openIM.wasm​

在 qxj-im-core 仓库根目录执行：

# 1. 编译精简符号表的 openIM.wasm
GOOS=js GOARCH=wasm go build -trimpath -ldflags="-s -w" -o _output/bin/openIM.wasm ./wasm/cmd/

# 2. 拷贝当前 Go 工具链配套的 wasm_exec.js
cp "$(go env GOROOT)/lib/wasm/wasm_exec.js" _output/bin/wasm_exec.js
已包含 Web 端 WebSocket 关闭状态码修复

本仓库已在 internal/interaction/ws_js.go 中将浏览器 WebSocket 主动断开码修复为 websocket.StatusNormalClosure (1000)，避免了现代 Chrome / Safari 浏览器下 Close() 抛出 DOMException 的问题。

2. 在前端项目 (qxj-im-web) 中安装与集成​

方式一：通过公司 Nexus 原生 NPM 仓库安装 @qxj/im-wasm（推荐）​

公司测试服 Nexus 已开启原生 NPM Registry (qxj-npm)，并将 openIM.wasm、wasm_exec.js 与 TypeScript 类型声明打包发布为标准 NPM 包 @qxj/im-wasm：

1) 在前端工程根目录 .npmrc 中配置 @qxj 作用域源​

@qxj:registry=https://nexus.test.qxjapp.com/repository/qxj-npm/

2) 使用 bun / pnpm / npm 安装依赖​

bun add @qxj/im-wasm@3.8.3-patch.3

3) 一键同步静态资源或通过 Bundler 直接引入​

  • 拷贝至 public/openim 静态目录（内置 CLI 工具 qxj-im-wasm-copy）： 
    bunx qxj-im-wasm-copy public/openim
  • 或者在 Vite / Webpack 中直接作为 ES Module URL 引入： 
    import { getOpenIMWasmUrl, getWasmExecUrl } from '@qxj/im-wasm';

    const wasmUrl = getOpenIMWasmUrl();
    const wasmExecUrl = getWasmExecUrl();

方式二：从 Nexus Raw 仓库直接按 URL 下载​

若构建环境不便配置 .npmrc，也可直接从 qxj-raw 下载对应版本产物：

mkdir -p public/openim
curl -fL https://nexus.test.qxjapp.com/repository/qxj-raw/im-core/wasm/3.8.3-patch.3/openIM.wasm \
  -o public/openim/openIM.wasm
curl -fL https://nexus.test.qxjapp.com/repository/qxj-raw/im-core/wasm/3.8.3-patch.3/wasm_exec.js \
  -o public/openim/wasm_exec.js

方式三：本地源码构建产物拷贝​

将编译产出的 _output/bin/openIM.wasm 与 _output/bin/wasm_exec.js 拷贝至前端工程的 public/openim/ 静态资源目录（确保 Web 服务器配置了 .wasm 的 MIME 类型 application/wasm，并建议开启 zstd 或 gzip 压缩）。