vue1.x + 网易云信开发过程中遇到的问题

vue1.x + 网易云信开发过程中遇到的问题

vue单页面应用中,切换路由时,因为没有收到服务器的回包,所以登录成功的回调就不执行了,登录没成功,后面的同步信息也就同步不到了,因为网易云信的SDK是单实例

解决方法如下:
  • 主要是在刚进入这个页面的时候检测需不需要reload此页面,用session来存一个标识,再在切换路由时销毁此标识
  • 主要就是需要重新加载一次页面,因为不手动刷新就没有相应的回调
methods: {
    validate() { // 登录验证
                setCookie('uid', this.loginMsg.account.toLocaleLowerCase())
                setCookie('sdktoken', this.loginMsg.token)
                this.sdk()
            },
            unvalidate() {
                // 断开 IM
                nim.disconnect();

                delCookie('uid');
                delCookie('sdktoken');

                this.$route.router.go("/welcome")
                window.location.reload()

            },
            
            sdk() {
                let _this = this
  
                var data = {}
                // 注意这里, 引入的 SDK 文件不一样的话, 你可能需要使用 SDK.NIM.getInstance 来调用接口
                nim = NIM.getInstance({
                    // debug: true,
                    db: true,
   
                    appKey: _this.loginMsg.appKey,  // 心猫
                    account: readCookie('uid'), //
                    token: readCookie('sdktoken'), //
                    onconnect: onConnect,
                    onwillreconnect: onWillReconnect,
                    ondisconnect: onDisconnect,
                    onerror: onError,
                    onmyinfo: onMyInfo,
                    onroamingmsgs: onRoamingMsgs,
                    onofflinemsgs: onOfflineMsgs,
                    onsessions: onSessions,
                    onupdatesession: onUpdateSession,
                    onusers: onUsers,
                    onfriends: onFriends,
                    onsyncfriendaction: onSyncFriendAction

                })

                console.log(nim)

                console.log('db:' + NIM.support.db) // 支持数据库



  


                function getUsersDone(error, users) {
                    console.log(error);
                    console.log(users);



                    // console.log('获取用户资料数组' + (!error?'成功':'失败'));
                    if (!error) {
                        onUsersFriends(users);
                    }
                }

                function onUsersFriends(users) {
                    data.users = nim.mergeUsers(data.users, users);
                    _this.friendsInfoList = data.users
                    // console.log('收到haoyou用户名片列表', JSON.stringify(users));



                }

    

                function onUsers(users) {
                    data.users = nim.mergeUsers(data.users, users);
                    _this.sdkData.users = data.users
                    console.log('收到用户名片列表', JSON.stringify(users));
                }



                function onDisconnect(error) {
                    // 此时说明 `SDK` 处于断开状态,开发者此时应该根据错误码提示相应的错误信息,并且跳转到登录页面
                    var that = this;
                    console.log('连接断开');
                    alert('连接断开')
                    if (error) {
                        switch (error.code) {
                            // 账号或者密码错误, 请跳转到登录页面并提示错误
                            case 302:
                                alert(error.message);
                                delCookie('uid');
                                delCookie('sdktoken');
                                window.location.href = './welcome';
                                break;
                            // 被踢, 请提示错误后跳转到登录页面
                            case 'kicked':
                                var map = {
                                    PC: "电脑版",
                                    Web: "网页版",
                                    Android: "手机版",
                                    iOS: "手机版",
                                    WindowsPhone: "手机版"
                                };
                                var str = error.from;
                                alert("你的帐号于" + dateFormat(+new Date(), "HH:mm") + "被" + (map[str] || "其他端") + "踢出下线,请确定帐号信息安全!");
                                delCookie('uid');
                                delCookie('sdktoken');
                                window.location.href = './welcome';
                                break;
                            default:
                                break;
                        }
                    }
                }

                function onRoamingMsgs(obj) {
                    console.log('漫游消息', obj);

                }

                function onOfflineMsgs(obj) {
                    console.log('收到离线消息', obj);

                }

                function onMyInfo(data) {
                    console.log('onMyInfo');
                    console.log(data.account)

                    _this.Object.account = data.account
                    _this.Object.avatar = data.avatar
                    _this.Object.createTime = data.createTime
                    _this.Object.gender = data.gender
                    _this.Object.nick = data.nick
                    _this.Object.updateTime = data.updateTime
                    console.log(_this.Object.updateTime)
                }

                function onConnect(data) {
                    console.log(data)
                    _this.loginMsg = '连接成功'
                    console.log("连接成功----------------", _this.loginMsg)
                }

                function onWillReconnect(obj) {
                    // 此时说明 SDK 已经断开连接 请开发者在界面上提示用户连接已断开, 而且正在重新建立连接
                    console.log('即将重连');
                    console.log(obj.retryCount);
                    console.log(obj.duration);
                }

                function onDisconnect(error) {
                    // 此时说明 SDK 处于断开状态, 开发者此时应该根据错误码提示相应的错误信息, 并且跳转到登录页面
                    alert(`丢失连接:${error.message}`)
                    if (error) {
                        switch (error.code) {
                            // 账号或者密码错误, 请跳转到登录页面并提示错误
                            case 302:
                                break;
                            // 重复登录, 已经在其它端登录了, 请跳转到登录页面并提示错误

                            case 417:
                                break;
                            // 被踢, 请提示错误后跳转到登录页面
                            case 'kicked':
                                break;
                            default:
                                break;
                        }
                    }
                }

                function onError(error) {
                    console.log(error);
                }

                function onSessions(sessions) {
                    console.log("收到会话哈哈哈------------------------", sessions)



                    data.sessions = nim.mergeSessions(data.sessions, sessions)
                    console.log(data.sessions)
                    _this.sdkData.sessions = data.sessions
                    // getAvatar(data.sessions)
                    getAvatarFilter(data.sessions)
                    _this.getLocalHistory() // 刷新界面

                }

                function onUpdateSession(session) {
                    console.log('会话更新了', session)
                    console.log(window._chatImThis, _this)


                    // 向上层发送消息
                    if (window.location.pathname.split("?")[0].split("/")[1] !== "imChat"  && session.unread > 0) {
                        document.querySelector('#im-unread-number-id-wrap').style.display = "list-item"
                        document.querySelector("#im-unread-number-id").innerHTML = session.unread

                    } else {
                        document.querySelector('#im-unread-number-id-wrap').style.display = "none"
                    }




                    data.sessions = nim.mergeSessions(data.sessions, session)
                    _this.sdkData.sessions = data.sessions
                     // getAvatar(data.sessions)
                    getAvatarFilter(data.sessions)
                    _this.getLocalHistory(); // 刷新界面

                    nim.getFriends({
                        done: getFriendsDone
                    });

                    function getFriendsDone(error, friends) {
                        console.log('获取好友列表' + (!error?'成功':'失败'), error, friends);
                        if (!error) {
                            onFriends(friends);
                        }
                    }

                }


                function getAvatar(sessions) {   // 头像列表
                    let arr = [], avatarArr = []
                    sessions.forEach((item) => {
                        let account = item.id.split('-')[1]  //// 111111111111111111111
                        arr.push(account)
                    })
                    nim.getUsers({
                        accounts: arr,
                        done: setChatList
                    })
                }


                function getAvatarFilter(sessions) {   //   对话不过滤 只过滤需要显示头像的账号
                    let arr = [], avatarArr = []
                    sessions.forEach((item) => {
                        if (accountFliter(item.lastMsg)) {
                            let account = item.id.split('-')[1]  //// 111111111111111111111
                            arr.push(account)
                        }
                    })
                    nim.getUsers({
                        accounts: arr,
                        done: setChatList
                    })
                }

                function accountFliter(lastMsg) {
                    let bool = true
                    let type = lastMsg.type
                    if (type == 'custom') {
                        try {
                            let xmType = JSON.parse(lastMsg.content).xmMessageType
                            if (xmType != 3 && xmType != 102 && xmType != 103 && xmType != 104 && xmType != 105) {
                                bool = false
                            }
                        } catch(e) {
                            console.log(e)
                        }


                    }
                    return bool
                }


                function setChatList(error, users) {
                    if (!error) {
                        users.forEach((item, index) => {
                            _this.sdkData.sessions.forEach((chat) => {
                                if (chat.id.split('-')[1] == item.account) {
                                    chat.path = item.avatar
                                    chat.nick = item.nick
                                }
                            })
                        })
                    }
                    _this.sessions = _this.sdkData.sessions

   

  



                }


 

            },
  
},

route: {

            deactivate(transition) {
                window.sessionStorage.removeItem("imChatIsNeedReload")
                transition.next()
            }
        },

        ready() {

            if (!sessionStorage.getItem('imChatIsNeedReload')) {
                window.sessionStorage.imChatIsNeedReload = '11111111111'
                window.location.reload()
            }


            this.validate();

        }
复制代码
发布了136 篇原创文章 · 获赞 46 · 访问量 19万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览