即时通讯IM WEB

腾讯云即时通信IM SDK

官方简介
腾讯是国内最早也是最大的即时通信开发商,QQ 和微信已经成为每个互联网用户必不可少的应用。顺应行业数字化转型的趋势,腾讯将高并发、高可靠的即时通信能力进行开放,您可以轻易地根据腾讯提供的 SDK 将即时通信功能集成到 App 中,来满足您业务的各种需求。
针对开发者的不同阶段需求及不同场景,即时通信 IM 团队提供了一系列解决方案,包括:Android、iOS、Windows、Web 的 SDK 组件、服务端集成 REST API 接口、第三方回调接口 等。利用这些组件和能力,开发者可以简单快捷地构建高可靠且稳定的即时通信产品,随心所想,触达全球。

官方文档地址:https://web.sdk.qcloud.com/im/doc/zh-cn//SDK.html

使用方法:

1.安装sdk

// IM Web SDK
npm install tim-js-sdk --save
// 发送图片、文件等消息需要的上传插件(不需要可不安)
npm install tim-upload-plugin --save

2.创建 SDK 实例

// 创建 SDK 实例,TIM.create() 方法对于同一个 SDKAppID 只会返回同一份实例
private options = {
    SDKAppID: 0, // 接入时需要将0替换为您的即时通信应用的 SDKAppID
    userID: '',
    userSig: '',
};
private createTim() {
    this.tim = TIM.create({ SDKAppID: this.options.SDKAppID });
        /**设置 SDK 日志输出级别,详细分级请参见 setLogLevel 接口的说明
        * 0 普通级别,日志量较多,接入时建议使用
        * 1 release级别,SDK 输出关键信息,生产环境时建议使用
        * 2 告警级别,SDK 只输出告警和错误级别的日志
        * 3 错误级别,SDK 只输出错误级别的日志
        * 4 无日志级别,SDK 将不打印任何日志
        */
    this.tim.setLogLevel(0);
    // 注册腾讯云即时通信 IM 上传插件,即时通信 IM SDK 发送图片、语音、视频、文件等消息需要使用上传插件,将文件上传到腾讯云对象存储(不需要可不注册)
    this.tim.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin });
    // 添加监听
    this.onMSG();
}

注意:create => setLogLevel => 监听 => login
在login前调用监听事件,避免漏掉 SDK 派发的事件

3.监听

let onMessageReceived = function(event) {
  // 收到推送的单聊、群聊、群提示、群系统通知的新消息,可通过遍历 event.data 获取消息列表数据并渲染到页面
  // event.name - TIM.EVENT.MESSAGE_RECEIVED
  // event.data - 存储 Message 对象的数组 - [Message]
};
tim.on(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);

4.取消监听

tim.off(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);

注意:对于同一个事件,如 [TIM.EVENT.MESSAGE_RECEIVED],调用 [on] 接口监听事件和调用 [off] 接口取消监听事件,handler 参数应当指向同一个 function,避免以下写法:

// 注意!以下代码有 bug,无法取消监听 TIM.EVENT.MESSAGE_RECEIVED,因为 bind() 方法每次会返回一个新的函数
tim.on(TIM.EVENT.MESSAGE_RECEIVED, this.onMessageReceived.bind(this));
tim.off(TIM.EVENT.MESSAGE_RECEIVED, this.onMessageReceived.bind(this));
 
// 建议写法
tim.on(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived, this);
tim.off(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);

调用 [logout] 接口,不会取消监听事件,需接入侧主动调用 [off] 接口

5.登录
使用 用户ID(userID) 和 签名串(userSig) 登录即时通信 IM,这两个字段通常由服务端下发

let promise = tim.login({userID: 'your userID', userSig: 'your userSig'});
promise.then(function(imResponse) {
  console.log(imResponse.data); // 登录成功
  if (imResponse.data.repeatLogin === true) {
    // 标识账号已登录,本次登录操作为重复登录。v2.5.1 起支持
    console.log(imResponse.data.errorInfo);
  }
}).catch(function(imError) {
  console.warn('login error:', imError); // 登录失败的相关信息
});

注意1:登录成功,需等待 sdk 处于 ready 状态后 才能调用 [sendMessage] 等需要鉴权的接口。

6.登出

let promise = tim.logout();
promise.then(function(imResponse) {
  console.log(imResponse.data); // 登出成功
}).catch(function(imError) {
  console.warn('logout error:', imError);
});

7.销毁 SDK 实例。SDK 会先 logout,然后断开 WebSocket 长连接,并释放资源

tim.destroy();
// 取消监听事件
this.offMSG();

8.方法的使用
方法接口实在是太多了,这里只示例发送消息:

    // 发送自定义消息
    public sendMessage(option: { action: string; content: object }, groupid: string) {
        if (!this.tim || this.sdkReadyStatus !== 'SDK_READY') {
            return;
        }
        // 创建自定义消息
        const message = this.tim.createCustomMessage({
            to: groupid,
            conversationType: TIM.TYPES.CONV_GROUP,
            // 消息优先级,用于群聊(v2.4.2起支持)。如果某个群的消息超过了频率限制,后台会优先下发高优先级的消息
            // 支持的枚举值: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_HIGH,
            payload: {
                data: JSON.stringify(option),
                description: '',
                extension: '',
            },
        });
        // 2. 发送消息
        this.tim
            .sendMessage(message)
            .then(function(imResponse) {
                // 发送成功
                console.log('sendMessage success:', imResponse);
            })
            .catch(function(imError) {
                // 发送失败
                // 聊天消息發送失敗
                if (option.action == 'chat') {
                    Toast.show('發送失敗,請重新發送');
                }
                console.warn('sendMessage error:', imError);
            });
    }

9.监听 EVENT

image.png

标红的事件,是必须做处理的事件,其余的监听事件根据自己的业务需要进行增减

10.ERROR_CODE 错误码
常见错误码:
2000 无 SDKAppID
2002 无 userID
2003 无 userSig
2024 用户未登录
2025 重复登录
2100 消息发送失败
2800 网络错误
2801 请求超时
2805 未连接到网络

你可能感兴趣的:(即时通讯IM WEB)