open-im-sdk-web 的安装和配置教程

2025-05-25 05:27:29作者：凌朦慧Richard

1. 项目基础介绍和主要编程语言

open-im-sdk-web 是一个开源项目，它提供了用于在网页应用中集成即时通讯功能的 JavaScript SDK。通过连接到自托管的 OpenIM 服务器，开发者可以轻松地将即时通讯功能集成到自己的应用程序中。该项目主要使用 TypeScript 语言开发，以确保类型的正确性和代码的健壮性。

2. 项目使用的关键技术和框架

该项目依赖于以下关键技术和框架：

TypeScript：一种由微软开发的开源编程语言，它是 JavaScript 的一个超集，添加了静态类型选项。
WebSocket：一种网络通信协议，提供了一个在单个 TCP 连接上进行全双工通讯的方式。
OpenIM SDK Core：open-im-sdk-web 通过与 OpenIM SDK Core 的 WebSocket 代理层通信来实现功能。

3. 项目安装和配置的准备工作及详细安装步骤

准备工作

在开始安装之前，请确保你已经安装了以下环境：

Node.js：JavaScript 的运行环境，用于执行 npm 命令。
npm：Node.js 的包管理工具，用于管理项目依赖。

安装步骤

以下是将 open-im-sdk-web SDK 集成到你的项目中的详细步骤：

克隆项目

首先，你需要克隆或下载项目到你的本地环境。你可以使用以下命令：
```
git clone https://github.com/openimsdk/open-im-sdk-web.git
```
安装依赖

进入项目目录后，使用 npm 安装项目依赖：
```
cd open-im-sdk-web
npm install
```
集成 SDK

在你的项目中，你可以通过以下方式引入 open-im-sdk-web SDK：
```
import { OpenIMSDK } from 'open-im-sdk';
```

配置 SDK

在使用 SDK 之前，你需要配置 SDK 的参数，包括用户 ID、token、服务器地址等。以下是一个示例配置：

const OpenIM = new OpenIMSDK({
    userID: 'IM user ID',
    token: 'IM user token',
    platformID: 5,
    wsAddr: 'ws://your-server-ip:10003',
    apiAddr: 'http://your-server-ip:10002',
});

登录和监听事件

在配置完 SDK 后，你可以监听连接状态事件，并执行登录操作：

OpenIM.on(CbEvents.OnConnecting, handleConnecting);
OpenIM.on(CbEvents.OnConnectFailed, handleConnectFailed);
OpenIM.on(CbEvents.OnConnectSuccess, handleConnectSuccess);

OpenIM.login({
    userID: 'IM user ID',
    token: 'IM user token',
    platformID: 5,
    wsAddr: 'ws://your-server-ip:10003',
    apiAddr: 'http://your-server-ip:10002',
});

function handleConnecting() {
    // 正在连接...
}

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

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

发送和接收消息

最后，你可以监听新消息事件，并发送消息给其他用户：

OpenIM.on(CbEvents.OnRecvNewMessages, handleNewMessages);

const message = (await OpenIM.createTextMessage('hello openim')).data;
OpenIM.sendMessage({
    recvID: 'recipient user ID',
    groupID: '',
    message,
}).then(() => {
    // 消息发送成功 ✉️
}).catch(err => {
    // 发送消息失败 ❌
    console.log(err);
});

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