OpenIM SDK Web 使用教程

OpenIM SDK Web 使用教程

1. 项目介绍

OpenIM SDK Web 是一个基于 JavaScript 的即时通讯（IM）客户端 SDK，它允许开发者将即时通讯功能集成到自己的 Web 应用程序中。该 SDK 通过连接到自托管的 OpenIM 服务器，可以实现快速集成消息收发、用户状态监听等功能。

2. 项目快速启动

在开始之前，请确保您已经安装了 Node.js。

安装 SDK

使用 npm 安装 OpenIM SDK Web：

npm install open-im-sdk --save

初始化 SDK

在您的 JavaScript 文件中，引入 SDK 并创建一个 OpenIMSDK 实例：

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

const OpenIM = new OpenIMSDK();

登录和监听连接状态

在登录前，您需要确保已经部署了 OpenIM 服务器，并且拥有用户 ID、用户 token、平台 ID、WebSocket 地址和 API 地址。

import { CbEvents } from 'open-im-sdk';
import type { WsResponse } from 'open-im-sdk';

// 监听连接状态
OpenIM.on(CbEvents.OnConnecting, handleConnecting);
OpenIM.on(CbEvents.OnConnectFailed, handleConnectFailed);
OpenIM.on(CbEvents.OnConnectSuccess, handleConnectSuccess);

// 登录 OpenIM 服务器
OpenIM.login({
  userID: 'IM 用户 ID',
  token: 'IM 用户 token',
  platformID: 5,
  wsAddr: 'ws://您的服务器IP:10003',
  apiAddr: 'http://您的服务器IP:10002',
});

// 连接中...
function handleConnecting() {
  // 连接中...
}

// 连接失败
function handleConnectFailed({ errCode, errMsg }: WsResponse) {
  console.log(errCode, errMsg);
}

// 连接成功
function handleConnectSuccess() {
  // 连接成功...
}

发送和接收消息

在收到新消息时，可以通过监听 OnRecvNewMessages 事件来获取消息内容。

import { CbEvents } from 'open-im-sdk';
import type { WsResponse, MessageItem } from 'open-im-sdk';

// 监听新消息
OpenIM.on(CbEvents.OnRecvNewMessages, handleNewMessages);

// 发送消息
const message = await OpenIM.createTextMessage('hello openim');
OpenIM.sendMessage({
  recvID: '接收者用户 ID',
  groupID: '',
  message,
}).then(() => {
  // 消息发送成功
}).catch(err => {
  // 消息发送失败
  console.log(err);
});

// 处理新消息
function handleNewMessages({ data }: WsResponse<MessageItem[]>) {
  // 新消息列表
  console.log(data);
}

3. 应用案例和最佳实践

• 用户认证：确保用户在登录前进行认证，获取有效的 token。
• 消息加密：对于敏感信息，确保在发送前进行加密处理。
• 错误处理：对于 SDK 抛出的错误，及时处理并反馈给用户。

4. 典型生态项目

目前使用 OpenIM SDK Web 的项目有：

• openim-pc-web-demo：一个使用 OpenIM SDK Web 的演示 Web 应用。
• 其他由社区贡献的项目，可以在 OpenIM 社区了解更多。

以上就是 OpenIM SDK Web 的使用教程，希望对您有所帮助。