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

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 集成到你的项目中的详细步骤：

1. 克隆项目

   首先，你需要克隆或下载项目到你的本地环境。你可以使用以下命令：

   git clone https://github.com/openimsdk/open-im-sdk-web.git
   

2. 安装依赖

   进入项目目录后，使用 npm 安装项目依赖：

   cd open-im-sdk-web
   npm install
   

3. 集成 SDK

   在你的项目中，你可以通过以下方式引入 open-im-sdk-web SDK：

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

4. 配置 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',
   });
   

5. 登录和监听事件

   在配置完 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() {
       // 连接成功 ✅
   }
   

6. 发送和接收消息

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

   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);
   }
   

完成以上步骤后，你就可以在你的网页应用中使用 open-im-sdk-web SDK 实现即时通讯功能了。