腾讯TIM实现即时通信 v3+ts实践

最新推荐文章于 2025-03-10 15:04:36 发布

前端贾公子

最新推荐文章于 2025-03-10 15:04:36 发布

阅读量2.5k

点赞数

分类专栏： pinia 文章标签：腾讯云云计算

本文链接：https://blog.csdn.net/qq_63358859/article/details/129235247

版权

根据指定的消息 sequence 或消息时间跳拉会话的消息列表

初始化sdk

功能描述

在使用 IM SDK 的各项功能前，必须先进行初始化。

初始化

初始化 SDK 需要操作以下步骤：

准备 SDKAppID。
调用 TIM.create 初始化 SDK。
添加 SDK 事件监听器。

下面我们将分步骤依次为您详细讲解。

准备 SDKAppID

您必须拥有正确的 SDKAppID，才能进行初始化。
SDKAppID 是腾讯云 IM 服务区分客户帐号的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的，不能互通。
您可以在即时通信 IM 控制台查看所有的 SDKAppID，单击 创建新应用，可以创建新的 SDKAppID。

调用初始化接口

操作完上述步骤后，您可以调用 TIM.create 初始化 SDK。

接口

TIM.create(options);

参数 options 为 Object 类型，包含的属性值如下：

Name	Type	Description
SDKAppID	Number	即时通信 IM 应用的 SDKAppID

        public tim: ChatSDK | undefined
        private initTimSdk(SDKAppID: number) {
        let options = {
            SDKAppID,// 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
        };
        // 创建 SDK 实例，`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
        let tim = TIM.create(options); // SDK 实例通常用 tim 表示

        // 设置 SDK 日志输出级别，详细分级请参见 setLogLevel https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#setLogLevel 接口的说明</a>
        tim.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用
        // tim.setLogLevel(1); // release 级别，SDK 输出关键信息，生产环境时建议使用

        // 注册腾讯云即时通信 IM 上传插件
        tim.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin })
        this.tim = tim
    
    }

监听事件

SDK 进入 ready 状态时触发，接入侧监听此事件，然后可调用 SDK 发送消息等 API，使用 SDK 的各项功能


    // 监听sdk准备完成的事件
    private bindTIMEvent() {
        this.tim?.on(TIM.EVENT.SDK_READY, this.handleSDKReady, this)
    }

SDK 收到推送的单聊、群聊、群提示、群系统通知的新消息，接入侧可通过遍历 event.data 获取消息列表数据并渲染到页面

    private handleSDKReady = () => {
        console.log('sdk准备完成');
        this.onReady()

        console.log('执行');

        this.tim?.on(TIM.EVENT.MESSAGE_RECEIVED, this.handleMessageReceived, this)

    }
    private handleMessageReceived = (event: TextMessageEvent) => {
        console.log('接收到消息', event);
        this.messageReceived(event)

    }
    public messageReceived = (event: TextMessageEvent) => { }

发送消息

创建消息

创建文本消息

创建文本消息的接口，此接口返回一个消息实例，可以在需要发送文本消息时调用发送消息接口发送消息实例。

接口

tim.createTextMessage(options);

参数

参数 options 为 Object 类型，包含的属性值如下：

Name	Type	Default	Description
to	String	-	消息接收方的 userID 或 groupID
conversationType	String	-	会话类型，取值`TIM.TYPES.CONV_C2C`（端到端会话）或`TIM.TYPES.CONV_GROUP`（群组会话）
priority	String	TIM.TYPES.MSG_PRIORITY_NORMAL	消息优先级
payload	Object	-	消息内容的容器
cloudCustomData	String	''	消息自定义数据（云端保存，会发送到对端，程序卸载重装后还能拉取到，v2.10.2起支持）

payload 的描述如下：

Name	Type	Description
text	String	消息文本内容

返回值

消息实例 Message。

示例

        private getMessageOptions = (userID: string, payload: ITextPayload) => {
            return this.tim?.createTextMessage({
            to: userID,
            conversationType: TIM.TYPES.CONV_C2C,
            // 消息优先级，用于群聊（v2.4.2起支持）。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息，详细请参考：https://cloud.tencent.com/document/product/269/3663#.E6.B6.88.E6.81.AF.E4.BC.98.E5.85.88.E7.BA.A7.E4.B8.8E.E9.A2.91.E7.8E.87.E6.8E.A7.E5.88.B6)
            // 支持的枚举值：TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL（默认）, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST
            // priority: TIM.TYPES.MSG_PRIORITY_NORMAL,
            payload,
            // v2.20.0起支持C2C消息已读回执功能，如果您发消息需要已读回执，需购买旗舰版套餐，并且创建消息时将 needReadReceipt 设置为 true
            needReadReceipt: true
            // 消息自定义数据（云端保存，会发送到对端，程序卸载重装后还能拉取到，v2.10.2起支持）
            // cloudCustomData: 'your cloud custom data'
        })
    }

       public sendMessage = async (userID: string, payload: ITextPayload) => {
        // 创建消息
        const messOption = this.getMessageOptions(userID, payload)
        await this.tim?.sendMessage(messOption!)
        console.log('发送成功');

    }
    public sendMessage = async (userID: string, payload: ITextPayload) => {
        // 创建消息
        const messOption = this.getMessageOptions(userID, payload)
        await this.tim?.sendMessage(messOption!)
        console.log('发送