uniapp小程序接入腾讯IM聊天

这篇具有很好参考价值的文章主要介绍了uniapp小程序接入腾讯IM聊天。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  1. 腾讯IM中创建项目 拿到AppID 与 密钥 

uniapp小程序接入腾讯IM聊天
  1. 下载demo 将debug 文件夹拖到自己项目中 

uniapp小程序接入腾讯IM聊天

在第一个js文件中填入自己项目的APPID 与密钥

uniapp小程序接入腾讯IM聊天
  1. 下载(tim-wx-sdk 上传文件 的依赖 看项目所需文章来源地址https://www.toymoban.com/news/detail-509488.html

import TIM from 'tim-wx-sdk';
import TIMUploadPlugin from 'tim-upload-plugin';
let options = {
    // SDKAppID: 1400770479
    SDKAppID: 1400372093 // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
};
// 创建 SDK 实例,`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
let tim = TIM.create(options); // SDK 实例通常用 tim 表示

// 设置 SDK 日志输出级别,详细分级请参见 setLogLevel  https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#setLogLevel 接口的说明</a>
tim.setLogLevel(0); // 普通级别,日志量较多,接入时建议使用
// tim.setLogLevel(1); // release 级别,SDK 输出关键信息,生产环境时建议使用

// 注册腾讯云即时通信 IM 上传插件
tim.registerPlugin({
    'tim-upload-plugin': TIMUploadPlugin
});
Vue.prototype.tim = tim
Vue.prototype.TIM = TIM
// v2.22.0 起支持 uni-app 打包 native app 时使用离线推送插件
// 请注意!应合规要求,在用户同意隐私协议的前提下,登录成功后 SDK 会通过推送插件获取推送 token,并将推送 token 传递至后台(若获取 token 失败则会导致离线推送无法正常使用)
// const TUIOfflinePush = uni.requireNativePlugin("TencentCloud-TUIOfflinePush");
tim.registerPlugin({
    // 'tim-offline-push-plugin': TUIOfflinePush,
    'offlinePushConfig': {
        // huawei
        'huaweiBusinessID': '', // 在腾讯云控制台上传第三方推送证书后分配的证书 ID
        // xiaomi
        'xiaomiBusinessID': '', // 在腾讯云控制台上传第三方推送证书后分配的证书 ID
        'xiaomiAppID': '', // 小米开放平台分配的应用 APPID
        'xiaomiAppKey': '', // 小米开放平台分配的应用 APPKEY
        // meizu
        'meizuBusinessID': '', // 在腾讯云控制台上传第三方推送证书后分配的证书 ID
        'meizuAppID': '', // 魅族开放平台分配的应用 APPID
        'meizuAppKey': '', // 魅族开放平台分配的应用 APPKEY
        // vivo
        'vivoBusinessID': '', // 在腾讯云控制台上传第三方推送证书后分配的证书 ID
        // oppo
        'oppoBusinessID': '', // 在腾讯云控制台上传第三方推送证书后分配的证书 ID
        'oppoAppKey': '', // oppo 开放平台分配的应用 APPID
        'oppoAppSecret': '', // oppo 开放平台分配的应用 Secret
        // ios
        'iosBusinessID': '', // 在腾讯云控制台上传第三方推送证书后分配的证书 ID
    }
});

登录腾讯IM

TencentIMlogin() {
                uni.getStorage({ 
                    key: 'userInfo',
                    success: (res) => {
                        this.username = res.data.userId
                        let userSig = genTestUserSig(this.username).userSig
                        let promise = this.tim.login({
                            userID: this.username,
                            userSig: 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); // 登录失败的相关信息
                        });
                    }
                })

            }

发送单聊消息

Go() {
                if (!this.isReady) return
                //  createTextMessage 创建一个文本信息
                //  conversationType : c2c 单聊           GROUP 群聊
                //     payload (载荷): 存放聊天消息 文本 text属性
                let message = this.tim.createTextMessage({
                    // to: 'ef985c7e92604ca3b5daa29e039d8236',
                    to: "7b65c4ddadf04a128223942c9fd16ad4",
                    conversationType: 'GROUP',
                    payload: {
                        text: this.text
                    }
                });
                this.messages.push(message)
                console.log(message);
                // 发送消息
                this.tim.sendMessage(message);
            },

发送群组消息

var message = this.tim.createTextAtMessage({
                    to: this.orderid,
                    conversationType: this.TIM.TYPES.CONV_GROUP,
                    payload: {
                        text: this.text,
                    },
                });
                // 2. 发送消息
                let promise = this.tim.sendMessage(message);
                promise.then((imResponse) => {
                    // 发送成功
                    this.messages.push(message)
                    this.scrollToBottom()
                    uni.setStorage({
                        key: 'messages',
                        data: this.messages
                    })
                    console.log(imResponse);
                }).catch(function(imError) {
                    console.log(imError);
                    // 发送失败
                    uni.showModal({
                        title: '提示',
                        content: '医生还未进入诊室,无法发送消息!',
                        success: function(res) {
                            if (res.confirm) {
                                // 执行确认后的操作
                            } else {
                                // 执行取消后的操作
                            }
                        }
                    })
                });

发送图片

GoImage() {
                uni.chooseImage({
                    count: 2,
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
                    sourceType: ['album'], // 从相册选择
                    success: (res) => {
                        let message = this.tim.createImageMessage({
                            // to: '5MYfeMTrSEvmAF1cLct',
                            to: this.orderid,
                            conversationType: this.TIM.TYPES.CONV_GROUP,
                            payload: {
                                file: res
                            },
                            onProgress: function(event) {
                                console.log('file uploading:', event)
                            }
                        });
                        // 2. 发送消息
                        let promise = this.tim.sendMessage(message);
                        // this.messages.push(message)    
                        promise.then((imResponse) => {
                            this.messages.push(message)
                            this.scrollToBottom()
                            uni.setStorage({
                                key: 'messages',
                                data: this.messages
                              })
                            console.log(message);
                            // 发送成功
                            console.log(imResponse);
                        }).catch((imError) => {
                            // 发送失败
                            console.warn('sendMessage error:', imError);
                        });
                    }
                });
            },
// 点击图像全屏
            bigImg(url) {
                console.log(111)
                this.bigFlag = !this.bigFlag
                wx.previewImage({
                    urls: [url], //需要预览的图片http链接列表,多张的时候,url直接写在后面就行了
                    current: '', // 当前显示图片的http链接,默认是第一个
                })

            },

拉取历史消息

// 拉取历史消息
            GetMessageList(groupid) {
                let promise = this.tim.getMessageList({
                    conversationID: 'GROUP' + groupid
                });
                promise.then((imResponse) => {
                    const messageList = imResponse.data.messageList; // 消息列表。
                    console.log('messageList', messageList)
                    this.messages = messageList
                    this.scrollToBottom()
                    const nextReqMessageID = imResponse.data.nextReqMessageID; // 用于续拉,分页续拉时需传入该字段。
                    const isCompleted = imResponse.data.isCompleted;
                    // 表示是否已经拉完所有消息isCompleted 为 true 时,nextReqMessageID 为 ""。
                });
            },

监听收到消息

let onMessageReceived = (e) => {
                        let data = JSON.parse(e.data[0].payload.data.videoCall)
  };
   this.tim.on(this.TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived, this);

到了这里,关于uniapp小程序接入腾讯IM聊天的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 小程序接入腾讯实时音视频trtc-wx

    环境要求 微信 App iOS 最低版本要求:7.0.9 微信 App Android 最低版本要求:7.0.8 小程序基础库最低版本要求:2.10.0 由于小程序测试号不具备 和 的使用权限,请使用企业小程序账号申请相关权限进行开发。 由于微信开发者工具不支持原生组件(即 和 标签),需要在真机上进行

    2024年02月11日
    浏览(37)
  • 记录一下uniapp 集成腾讯im特别卡(未解决)

    uniapp的项目运行在微信小程序 , 安卓 , ios手机三端 , 之前这个项目集成过im,不过版本太老了,0.x的版本, 现在需要添加客服功能,所以就升级了 由于是二开 , 也为了方便 , 沿用之前的webview嵌套腾讯IM的方案 , 选用uniapp集成ui ,升级之后所有安卓用户反馈点击进去特别卡,几乎不能用

    2024年01月21日
    浏览(42)
  • IM即时通讯源码/im源码基于uniapp框架从0开始设计搭建在线聊天系统

    随着人社交产品的不断发展,即时通讯聊天这门技术也越来越重要,很多人都开启了学习通讯技术,本文就介绍了即时通讯的基础内容。 在开始设计和搭建聊天系统之前,需要确定所需技术栈。常用的技术栈包括前端、后端和数据库。例如,前端可以选择uni-app,后端可以选

    2024年02月04日
    浏览(57)
  • uniapp对接腾讯云IM+音视频。音视频含UI集成

    提示:作者已经实现uniapp集成腾讯云IM+音视频到android和ios平台,如有疑问可在下方留言。音视频为含ui集成 uniapp腾讯云音视频插件地址 官方插件显示的ios版本为9-15,本人ios版本号为16.1,亲测可行 uniapp 腾讯云音视频文档 uniapp 腾讯云IM文档 注意这个是uni的v3+ts版本,如果是v2版

    2024年02月07日
    浏览(51)
  • uniapp - 微信小程序接入腾讯视频播放器功能插件,uniapp开发微信小程序端调用引入并使用腾讯视频播放组件完整全流程(详细示例源码,一键复制开箱即用)

    在uniapp 微信小程序项目中,集成腾讯视频功能插件,实现播放腾讯视频效果,附带详细示例源码及注释, 你可以跟着步骤一步步来,保证几分钟就能快速在uniapp小程序项目中植入腾讯视频功能!

    2024年02月12日
    浏览(68)
  • 开源im聊天系统源码全套+php即时通讯源码带直播红包系统(uniapp/pc/app/h5四端)

    随着移动互联网的迅猛发展,即时通讯(Instant Messaging,简称IM)已经成为现代社交生活中不可或缺的一部分。无论是个人还是企业,都需要一种高效、安全、稳定的即时通讯方式来满足实时沟通的需求。因此,IM源码的开发变得越来越重要,它为我们提供了构建现代化即时通

    2024年02月03日
    浏览(57)
  • Uni-app 小程序使用腾讯云IM实时通讯

    // IM 小程序 SDK npm install tim-wx-sdk --save // 发送图片、文件等消息需要的 COS SDK  如果不需要发送图片等文件不需要下载 在APP.vue中配置好你的腾讯云配置 我测试了一下如果直接引入:import TIM from \\\'tim-wx-sdk\\\'的话在添加好友的地方会有错误 所以我找到了这种引入方式 :import TIM

    2024年02月15日
    浏览(58)
  • 微信小程序集成腾讯im,会话列表数据过多(长列表),卡顿问题的解决

    我这边用小程序集成im,然后结合公司的需求,做了一个聊天的小程序,在测试上线的时候没有问题,结果到客户那边,因为他们聊天的人多,会话列表达到了300多条,然后点击会话列表,进入聊天页面,会卡顿。下图是测试环境的 因为我在im原有基础上,增加了很多遍历逻

    2024年02月09日
    浏览(37)
  • uniapp接入微信客服聊天流程(企业微信)

    多平台开发企业微信客服是最好的解决方案 企业微信 如果多平台开发可以都接入 里面有步骤,按照步骤走即可( 看完官方教程一定回来继续看代码!! ) 4.1微信小程序接入 客服连接有用复制一下,然后 看教程即可 附上代码: 4.2app接入 接入流程和小程序类似,直接上代

    2024年02月11日
    浏览(48)
  • hbuilder创建基于vue2的uniapp小程序项目

    参考vant官网:https://vant-contrib.gitee.io/vant/v3/#/zh-CN/quickstart#an-zhuang官网 参考别人博客:https://www.yii666.com/blog/465379.html 1.1 hbuilder进去右上角点击文件–新建–项目 1.2 vue2项目如下图 2.1 2.2

    2024年02月17日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包