腾讯云-即时通信 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