腾讯云-即时通信 IM 对接直播群聊开发分享

2022-09-301961

腾讯云-即时通信 IM 对接直播群聊开发分享

前言

​ 在项目开发中,会有遇到聊天功能的需求,我们可以借助腾讯云 SDK 来进行实现,快速方便的完成功能的开发,并且你会发现这个功能的实现并没有想象中的困难,这篇文章就带领大家一起来了解 im 群聊实现过程。

​ 在讲解具体的开发过程前,我们需要先了解一下 im 群聊的类型,按目前官方文档介绍是有 5 类,每个类型对应的应用场景存在区别,所以在开发前需要先查看我们的功能是需要哪一个类型的群聊,避免开发错误。在这里我们以“直播群”为例,当我们掌握其中一个类型的开发流程后,其他类型的开发自然也不在话下。

开发流程

一、SDK 安装及初始化

1、IM SDK web网页版安装(如果是小程序和APP需要使用另外的版本)

npm install tim-js-sdk --save
// 发送图片、文件等消息需要腾讯云即时通信 IM 上传插件
npm install tim-upload-plugin --save

2、TIM.create 方法初始化 SDK。一般我们可以在 utils 中创建 tim.js 引入下方代码,用过 export 的方式导出实例对象进行后续开发。

import TIM from 'tim-js-sdk';
import TIMUploadPlugin from 'tim-upload-plugin';

// SDKAppID 在购买的套餐包信息中可以找到,并且每个套餐包的 SDKAppID 是固定的,接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID,
let options = {
  SDKAppID: 0 
};
// 创建 SDK 实例,`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
let tim = TIM.create(options); // SDK 实例通常用 tim 表示

// 设置 SDK 日志输出级别
tim.setLogLevel(0); // 普通级别,日志量较多,接入时建议使用
// tim.setLogLevel(1); // release 级别,SDK 输出关键信息,生产环境时建议使用

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

export { tim, TIM }

二、im 登录及事件监听

在进行接收消息和发送消息等功能前,需要登录才能进行其他的操作,登录需要用户提供 UserID、UserSig 等信息。

// userSig 用户登录即时通信 IM 的密码,其本质是对 UserID 等信息加密后得到的密文。一般是调用接口由后端返回后获取使用。
// userID 一般是在我们的应用当中,用户的账号所对应的 id 值
tim
    .login({
        userSig:userSig,
        userID: userId,
    })
    .then(({ code, data }) => {
        if (code == 0) {
            console.log('登录成功');
            // 登录成功后,绑定 im 事件进行监听
            timListener();
        } else {
            console.warn('登录错误:' + data);
        }
    })
    .catch((err) => {
        console.warn('登录失败:' + err);
    });
// im 监听事件绑定
function timListener() {
    // 登录成功后会触发 SDK_READY 事件,该事件触发后,可正常使用 SDK 接口
    // 登录成功后触发 onReadyStateUpdate,可在此事件中加入群聊中
    tim.on(TIM.EVENT.SDK_READY, onReadyStateUpdate);
    // 收到新消息后触发 onReceiveMessage,可在此事件处理聊天信息回显逻辑
    tim.on(TIM.EVENT.MESSAGE_RECEIVED, onReceiveMessage);
    // 群组列表更新后触发 onGroupListUpdated,可在此事件处理群成员登入/出状态
    tim.on(TIM.EVENT.GROUP_LIST_UPDATED, onGroupListUpdated);
}

三、im 的事件监听

1、TIM.EVENT.SDK_READY 事件,在登录 im 成功后触发,在这个阶段我们需要进行加入群聊操作,才能发送消息

// 登录成功触发,让该用户加入群聊当中
// groupID 每个群聊都有自己的 id 号,在创建群聊之后可以获取
// type 为群聊的类型,这里我们以“直播群”为例
function onReadyStateUpdate() {
    // 加入群聊
    tim
        .joinGroup({
            groupID: groupId,
            type: 'AVChatRoom',
        })
        .then((res) => {
            switch (res.data.status) {
                case TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意
                    console.warn('等待管理员同意');
                    break;
                case TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
                    console.log('加入群聊成功');
                    break;
                case TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
                    console.log('已加入群聊');
                    break;
                default:
                    break;
            }
        })
        .catch((err) => {
            console.warn('加入群聊失败:' + err);
        });
}

2、TIM.EVENT.MESSAGE_RECEIVED 事件,接收消息列表需要监听此事件

function onReceiveMessage(data) {
    // data 即获取到的消息列表,在这里可以编写我们的页面回显逻辑
    console.log('消息接收', data);
}

3、TIM.EVENT.GROUP_LIST_UPDATED 事件,群组成员列表发生变化时触发

// im 监听 群聊是否有成员数量发生变化,在这里可以做加入群聊,退出群聊的显示逻辑
function onGroupListUpdated(data) {
    console.log('成员数量变化', data);
}

四、聊天信息发送

发送聊天信息需要先调用 api 创建 im message 实例

// to 添加群聊 id ,绑定你要发送的群聊
// conversationType 会话类型,取值TIM.TYPES.CONV_C2C(端到端会话)或TIM.TYPES.CONV_GROUP(群组会话)
// payload-text 聊天消息的内容
// createTextMessage 创建 im message 实例
const message = tim.createTextMessage({
    to: groupId,
    conversationType: TIM.TYPES.CONV_GROUP,
    payload: {
        text: sendMsgValue.value,
    },
});

// 发送聊天信息
tim.sendMessage(message)
    .then((res) => {
        console.log('发送成功');
    })
    .catch((err) => {
        console.warn('发送失败' + err);
    });

五、退出群聊、 登出 im 实例

需要留意如果是群主账号,是不能退出群聊的,需要判断一下。

tim.quitGroup(groupId)
    .then(() => {
        console.log('退出群聊成功');
        // 退出 im 登录状态
        tim.logout()
            .then(() => {
                console.log('登出成功');
                // 销毁 im 实例
                tim.destroy();
            })
            .catch((err) => {
                console.warn('登出失败:' + err);
            });
    })
    .catch((err) => {
        console.warn('退出群聊失败', err);
    });

以上就是一个 im 群聊的基本开发流程,还有更多其他 API 是这里没有展示出来的,但在使用上基本一致,如果需要可以自行查看官方文档。

文末贴一下官方文档地址:https://cloud.tencent.com/document/product/269/75285

分享
点赞0
打赏
上一篇:代理工具Fiddler -调试与替换接口状态
下一篇:TypeScript简介以及使用