React+Vite项目集成OpenIM遇问题：open-im-sdk-wasm API调用失败求助

一、安装 SDK 依赖 #

在项目根目录执行：

npm install open-im-sdk-wasm --save

二、适配 Vite 配置 #

修改 vite.config.js，添加 WASM 相关配置避免加载异常：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ['open-im-sdk-wasm']
  },
  server: {
    headers: {
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Opener-Policy': 'same-origin'
    }
  }
})

三、SDK 初始化与登录 #

创建 src/utils/openIM.js 封装 SDK 核心操作：

import { OpenIMSDK } from 'open-im-sdk-wasm'

const sdk = new OpenIMSDK()

// 初始化SDK配置
export async function initSDK() {
  await sdk.initSDK({
    platformID: 5, // Web平台固定值为5
    apiAddr: 'http://你的OpenIM服务端API地址:10002',
    wsAddr: 'ws://你的OpenIM服务端WS地址:10001',
  })

  // 监听连接状态
  sdk.onConnectSuccess(() => console.log('SDK连接成功'))
  sdk.onConnectFailed(() => console.error('SDK连接失败'))
}

// 用户登录
export async function login(userID, token) {
  try {
    await sdk.login({ userID, token })
    console.log('登录成功')
    return true
  } catch (err) {
    console.error('登录失败:', err)
    return false
  }
}

export { sdk }

在项目入口文件（如 src/main.jsx）执行初始化：

import { initSDK } from './utils/openIM'

async function bootstrap() {
  await initSDK()
  // 可在此处从本地存储获取用户信息后调用login
}

bootstrap()

四、实现基础消息收发 #

1. 发送文本消息 #

在业务组件中调用发送逻辑：

import { sdk } from '../utils/openIM'

async function sendTextMsg(toUserID, content) {
  try {
    const msg = await sdk.createTextMessage(content)
    await sdk.sendMessage({
      recvID: toUserID,
      groupID: '', // 单聊留空，群聊填写对应群ID
      msg,
    })
    console.log('消息发送成功')
  } catch (err) {
    console.error('消息发送失败:', err)
  }
}

2. 接收并展示新消息 #

在聊天组件中监听并渲染消息：

import { useState, useEffect } from 'react'
import { sdk } from '../utils/openIM'

function ChatComponent() {
  const [messages, setMessages] = useState([])

  useEffect(() => {
    // 监听新消息推送
    const msgListener = sdk.onRecvNewMsg((msgList) => {
      setMessages(prev => [...prev, ...msgList])
    })

    // 组件卸载时移除监听
    return () => sdk.off('onRecvNewMsg', msgListener)
  }, [])

  return (
    <div className="chat-container">
      {messages.map((msg, idx) => (
        <div key={idx} className="message-item">
          <p>{msg.content.text}</p>
        </div>
      ))}
    </div>
  )
}

export default ChatComponent

五、API调用失败排查要点 #

• 确认Vite配置中的跨域头已正确添加，WASM加载依赖Cross-Origin-Embedder-Policy和Cross-Origin-Opener-Policy头
• 检查initSDK中的apiAddr和wsAddr是否与部署的OpenIM服务端地址、端口完全匹配
• 所有消息相关API必须在登录成功后调用，未登录状态下调用会直接失败
• 打开浏览器控制台查看具体错误信息，定位是否存在WASM资源加载失败、接口跨域、token无效等问题

内容的提问来源于stack exchange，提问作者guang bi