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();
}
