C2-mobile-im NPM

IM聊天模块

android端问题

若在gradle编译时gradle下载报错，则修改文件:/node_modules/@react-native/gradle-plugin/gradle/libs.versions.toml文件，将其中的gradle版本修改为与主公程一至的版本

状态管理

使用hox进行状态管理

即时通信插件包

该插件实现了单聊会话，会话实现文本，图片，文件的发送

:::warning{title=特别说明}

聊天系统基于系统管理X实现，基于c2-mobile的登录用户关系实现
在线消息通信基于Websocket, @stomp/stompjs 进行实现
当前版本并未实现聊天消息的推送
受限于后端数据支持问题，当前版本并未实现群聊 :::

第三方依赖

依赖库	用途
json-bigint	处理消息数据中长数字精度丢失问题
@stomp/stompjs	对接后端数据通信协议的依赖库
text-encoding	@stomp/stompjs 在RN环境中依赖异常的依赖库
chinese-to-pinyin	联系人首字母索引功能的的依赖库
dayjs	时间处理库

开始使用

1工程目录执行npm install c2-mobile-im
2 工程中通过 c2config/im.config.ts 进制IM 特性的初始化配置
3 RouterConfig.ts 文件中天际 C2IMRouter 的路由配置

初始化配置 `c2config/im.config.ts 添加配置`

import type {C2IMConfigType} from 'c2-mobile-im';

/** IM 配置 */
const Config: C2IMConfigType = {
    /** sockjs 连接地址 */
    socketPath: 'http://172.21.44.1:9992/uniformserver/imws',
    /** 开启消息日志方法 */
    socketDebug: msg => {
        console.log("日志：", msg)
    },
    /** 聊天页面底部插件项配置 */
    plugins: ['file', 'image'],
    /** 会话排序策略 */
    sessionSortStrategy: 'server',
    /** 聊天页面每一页请求消息数量 */
    messagePageSize: 20,
    /** 消息样式 */
    messageStyle: {
        /** 发送消息气泡样式 */
        sendBubble: {
            backgroundColor: '#3c6aaf',
            color: '#ffffff',
            borderRadius: 16
        },
        /** 接收消息气泡样式 */
        receiveBubble: {
            backgroundColor: '#ffffff',
            color: '#262626'
        }
    },
    /** 页面样式 */
    activityStyle: {
        backgroundColor: '#EBEFF5'
    },
    /**
     * 文件上传路径
     */
    uploadUrl: '/s3storagecontroller/upload',
    /**
     * 默认下载地址（直接当做前缀拼接到业务的附件地址前）
     */
    downloadUrl: '/s3storagecontroller/download?filePath=',
};
export default Config;

:::warning{title=完整的配置} 完整配置规则请参照 C2IMConfigType 类型注释 :::

添加路由配置： `RouterConfig.ts 添加配置`

需要在 c2-mobile 路由配置文件RouterConfig.ts 文件中添加 IM相关路由

提供接口

导入 import {C2IMClient} from 'c2-mobile-im'

开启IM连接
C2IMClient.connect() :::warning{title=连接逻辑}
- 清除聊天缓存信息
- 采集c2-mobile StorageKeyEnum.UserInfo,StorageKeyEnum.SSOAuthToken 存储的用户信息和认证信息进行连接，如果SSOAuthToken被刷新时需要进行重新连接
- stompjs 基于Websocket 发起连接；连接异常时stompjs 存在机制没隔5秒将尝试重连 :::

关闭IM连接
C2IMClient.disconnect()

IM监听事件

useEffect(() => {
//创建订阅处置对象
const bag = new C2IMDisposeBag()

//订阅消息接收事件
C2IMClient.$receive.subscribe((msg)=>{
  console.log("IM收到消息:",msg)
}).disposedBy(bag)

//订阅IM socket 连接事件
C2IMClient.$status.subscribe((event)=>{
  if(event.status === 1){
    console.log('IM socket 连接成功')
  }else {
    console.log('IM socket 断开连接')
  }
}).disposedBy(bag)

return ()=>{
  //取消订阅
  bag.dispose()
}
}, []);

未读消息数量

监听方法

import { C2IMSessionManager,C2IMDisposeBag } from 'c2-mobile-im'

 //未读消息数量
const [unread, setUnread] = useState(C2IMSessionManager.$updateUnread.rawValue?.total || 0);

useEffect(() => {
    //订阅处置对象
    const bag = new C2IMDisposeBag()

    //订阅未读消息
    C2IMSessionManager.$updateUnread.subscribe(({total}) => {
        setUnread(total);
    }).disposedBy(bag);

    return () => {
        //取消订阅
        bag.dispose();
    };
}, []);

角标组件
角标组件基于 C2IMSessionManager.$updateUnread 的订阅实现，使用如下
import { C2IMBadge } from 'c2-mobile-im';//导入角标组件
```
<C2IMBadge keys={['chat']}/>
```

引入页面

集成到Tab页面

  /** 通信录页面组件 */
const Contact = () => {
        return <C2IMContactBookActivity hideBack title={'通讯录'}/>;
    };

/** 会话/消息页面组件 */
const Session = () => {
    return <C2IMSessionListActivity hideBack title={'消息'}/>;
};

const App = () => {
    return (
        <Tab.Navigator>
            <Tab.Screen name={'Message'} component={Session} options={{headerShown: false}}/>
            <Tab.Screen name={'AddressBook'} component={Contact} options={{headerShown: false}}/>
        </Tab.Navigator>
    );
}
```