美文网首页
即时通讯IM WEB

即时通讯IM WEB

作者: plum_meizi | 来源:发表于2021-11-15 16:31 被阅读0次

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

          本文链接:https://www.haomeiwen.com/subject/fquhtrtx.html