IM即时通讯 | vue

仔细阅读下文，基本上就可以跑通直播类的即时通讯业务需求了...
这里是IM api入口

1、引入IM的SDK

import TIM from 'tim-js-sdk'
import COS from 'cos-js-sdk-v5'

2、创建实例

创建 SDK 实例，TIM.create() 方法对于同一个 SDKAppID 只会返回同一份实例

export default {
    data () {
        return {
            imoptions: {
                SDKAppID: process.env.IM_APPID
            }
        }
    }
}

这里SDKAppID写到了config文件中xxx.env.js中方便根据环境使用不同的值

3、加入房间

在加入房间之前需要向服务端获取房间id，然后和xxh_拼接成IM需要的groupID就可以了

export default {
    data () {
        return {
            imoptions: {
                SDKAppID: process.env.IM_APPID
            }
        }
    },
    methods: {
        joinIM () {
            var $this = this
            let tim = TIM.create($this.imoptions)
            tim.setLogLevel(2)
            let promise = tim.joinGroup({ groupID: `xxh_${$this.option.channel}`, type: TIM.TYPES.GRP_AVCHATROOM });
            $this.imHandleEvents(tim)
            promise.then(function(imResponse) {
                switch (imResponse.data.status) {
                    case TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意
                    break;
                    case TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
                    break;
                    case TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
                    break;
                    default:
                    break;
                }
            }).catch(function(imError){
                console.warn('joinGroup error:', imError); // 申请加群失败的相关信息
            });
        }
    }
}

**
setLogLevel：
0 普通级别，日志量较多，接入时建议使用
1 release级别，SDK 输出关键信息，生产环境时建议使用
2 告警级别，SDK 只输出告警和错误级别的日志
3 错误级别，SDK 只输出错误级别的日志
4 无日志级别，SDK 将不打印任何日志

imHandleEvents:<函数自定义>
IM事件监听处理，看下文 **

4、IM事件监听

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

imHandleEvents (tim) {
    tim.on(TIM.EVENT.MESSAGE_RECEIVED, function(event) {
    	for (let i = 0; i < event.data.length; i++) {
            let imString = JSON.parse(event.data[i].payload.text)
            // opt指的是消息体类型，具体可看文档介绍
            if (imString.opt === 'JOIN_CHAT' || imString.opt === 'TEXT_MSG' || imString.opt === 'GIFT') {
                // 根据拿到的imString处理所需要的数据
            	console.log(imString);
            }
    	}
    });
}

5、退出群聊

可以在destroy销毁使用

let tim = TIM.create(this.imoptions)
let promise = tim.quitGroup(`xxh_${this.option.channel}`);
promise.then(function(imResponse) {
    // 退出成功的群 ID
}).catch(function(imError){
    // 退出群组失败的相关信息
});