美文网首页
在uni-app使用极光IM 开发一个聊天室

在uni-app使用极光IM 开发一个聊天室

作者: Rogi | 来源:发表于2019-10-01 20:46 被阅读0次

    国庆前有一个业务功能要实现!

    • 已知:不需要任何人际关系网!
    • 已知:需要一个类似于群的功能!
    • 已知:不需要任何人批准,只要用户进入活动就能加入到群!
    • 已知:不需要任何一个人成为那个聊天室的管理员(除了我们活动主办方)
    • 已知:需要具备发送消息、发送图片功能
    • 已知:整个流程不需要用户自己操作,比如加聊天室或者注册登陆等...全部交由代码操作
    • 综上所述:最终选择聊天室而没有选择群,主要是群需要管理员同意才能加入!!!!!!

    由于时间比较紧,而且这方面是我个人的知识盲区,而且完全评估不出什么时候能完成,没想到...一天时间就能把这个功能完成的七七八八。

    流程图


    关于为什么要退出聊天室,是因为在聊天室,获取离线的聊天室消息,只能重新加入聊天室才能,

    下面是上述流程图的代码(不要纠结为什么,我的function要放在初始化成功里面了= =写demo的时候一路写下去,懒拆了)

        // 引入sdk
        import sdk from 'jmessage-wxapplet-sdk-1.4.2.min.js'
        // 引入md5,要进行加密
        import md5 from 'js-md5/src/md5.js'
        export default {
            created() {
                // 你的appkey
                let appkey = ''
                // 随机20位字符
                let random_str = ''
                // 当前时间戳
                let timestamp = Date.parse(new Date())
                // md5加密生成密匙
                let signature = md5((`appkey=${appkey}&timestamp=${timestamp}&random_str=${random_str}&key=你的程序密匙`))
                var JIM = new sdk();
                // 初始化sdk
                JIM.init({
                    "appkey" : appkey,
                    "random_str" : random_str,
                    "signature" : signature,
                    "timestamp" : timestamp,
                    "flag" : 0
                }).onSuccess(function(data) {
                    // 初始化成功
                    // 用户账号
                    let username = ''
                    // 用户密码
                    let password = ''
                    login()
                    function login () {
                        JIM.login({
                            'username' : username,
                            'password' : password
                        }).onSuccess(function(data) {
                            console.log('登陆成功,加入聊天室')
                            enterChatroom()
                        }).onFail(function(data){
                            console.log('登陆失败,进入注册')
                            register()
                        });
                    }
                    // 注册账号
                    function register () {
                        console.log('开始注册')
                         JIM.register({
                            'username' : username,
                            'password' : password,
                            'is_md5' : false,
                            'extras' : {'自定义json': ''},
                            'address' : '用户地址'
                        }).onSuccess(function(data) {
                            login()
                        })
                    }
                    // 加入聊天室
                    function enterChatroom () {
                        JIM.enterChatroom({
                            // 聊天室ID
                            'id' : ''
                        }).onSuccess(function(data) {
                            console.log('加入聊天室成功,持续抓取信息中...')
                            onRoomMsg()
                        }).onFail(function(data) {
                            console.log(data)
                        });
                    }
                    // 监控聊天室消息
                    function onRoomMsg () {
                        JIM.onRoomMsg(function(data) {
                            console.log('发送人:' + data.from_username)
                            console.log('发送消息:' + data.content.msg_body.text)
                        });
                    }
                  }).onFail(function(data) {
                      console.log(data)
                });
            },
        }
    
    GIF.gif

    后续还有一些坑,比如,如何发送消息,让文本框始终在最底以及锁屏账户会断开连接等等等等等等等等,先到这里吧,后续在填吧。

    相关文章

      网友评论

          本文标题:在uni-app使用极光IM 开发一个聊天室

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