xsx
3 years ago
15 changed files with 383 additions and 265 deletions
@ -1,18 +1,193 @@ |
|||
<script> |
|||
export default { |
|||
methods: { |
|||
init(loginInfo) { |
|||
// 加载数据 |
|||
console.log(this) |
|||
this.$store.dispatch("load").then(() => { |
|||
// 初始化websocket |
|||
this.initWebSocket(loginInfo); |
|||
}).catch((e) => { |
|||
console.log(e); |
|||
this.quit(); |
|||
}) |
|||
}, |
|||
initWebSocket(loginInfo) { |
|||
let userId = this.$store.state.userStore.userInfo.id; |
|||
this.$wsApi.createWebSocket(process.env.WS_URL, loginInfo.accessToken); |
|||
this.$wsApi.onopen(() => { |
|||
this.pullUnreadMessage(); |
|||
}); |
|||
this.$wsApi.onmessage((cmd, msgInfo) => { |
|||
if (cmd == 2) { |
|||
// 异地登录，强制下线 |
|||
uni.showModal({ |
|||
content: '您已在其他地方登陆，将被强制下线', |
|||
showCancel: false, |
|||
}) |
|||
this.quit(); |
|||
} else if (cmd == 3) { |
|||
// 标记这条消息是不是自己发的 |
|||
msgInfo.selfSend = userId == msgInfo.sendId; |
|||
// 插入私聊消息 |
|||
this.handlePrivateMessage(msgInfo); |
|||
} else if (cmd == 4) { |
|||
// 标记这条消息是不是自己发的 |
|||
msgInfo.selfSend = userId == msgInfo.sendId; |
|||
// 插入群聊消息 |
|||
this.handleGroupMessage(msgInfo); |
|||
} |
|||
}) |
|||
}, |
|||
pullUnreadMessage() { |
|||
// 拉取未读私聊消息 |
|||
this.$http({ |
|||
url: "/message/private/pullUnreadMessage", |
|||
method: 'POST' |
|||
}); |
|||
// 拉取未读群聊消息 |
|||
this.$http({ |
|||
url: "/message/group/pullUnreadMessage", |
|||
method: 'POST' |
|||
}); |
|||
}, |
|||
handlePrivateMessage(msg) { |
|||
// 好友列表存在好友信息，直接插入私聊消息 |
|||
let friendId = msg.selfSend ? msg.recvId : msg.sendId; |
|||
let friend = this.$store.state.friendStore.friends.find((f) => f.id == friendId); |
|||
if (!friend) { |
|||
// 好友列表不存在好友信息，则发请求获取好友信息 |
|||
this.$http({ |
|||
url: `/friend/find/${msg.sendId}`, |
|||
method: 'get' |
|||
}).then((friend) => { |
|||
this.insertPrivateMessage(friend, msg); |
|||
this.$store.commit("addFriend", friend); |
|||
}) |
|||
} else { |
|||
this.insertPrivateMessage(friend, msg); |
|||
} |
|||
|
|||
}, |
|||
insertPrivateMessage(friend, msg) { |
|||
// webrtc 信令 |
|||
if (msg.type >= this.$enums.MESSAGE_TYPE.RTC_CALL && |
|||
msg.type <= this.$enums.MESSAGE_TYPE.RTC_CANDIDATE) { |
|||
|
|||
// // 呼叫 |
|||
// if (msg.type == this.$enums.MESSAGE_TYPE.RTC_CALL || |
|||
// msg.type == this.$enums.MESSAGE_TYPE.RTC_CANCEL) { |
|||
// this.$store.commit("showVideoAcceptorBox", friend); |
|||
// this.$refs.videoAcceptor.handleMessage(msg) |
|||
// } else { |
|||
// this.$refs.videoAcceptor.close() |
|||
// this.$refs.privateVideo.handleMessage(msg) |
|||
// } |
|||
// return; |
|||
} |
|||
|
|||
let chatInfo = { |
|||
type: 'PRIVATE', |
|||
targetId: friend.id, |
|||
showName: friend.nickName, |
|||
headImage: friend.headImage |
|||
}; |
|||
// 打开会话 |
|||
this.$store.commit("openChat", chatInfo); |
|||
// 插入消息 |
|||
this.$store.commit("insertMessage", msg); |
|||
// 播放提示音 |
|||
!msg.selfSend && this.playAudioTip(); |
|||
|
|||
}, |
|||
handleGroupMessage(msg) { |
|||
// 群聊缓存存在，直接插入群聊消息 |
|||
let group = this.$store.state.groupStore.groups.find((g) => g.id == msg.groupId); |
|||
if (!group) { |
|||
// 群聊缓存存在，直接插入群聊消息 |
|||
this.$http({ |
|||
url: `/group/find/${msg.groupId}`, |
|||
method: 'get' |
|||
}).then((group) => { |
|||
this.insertGroupMessage(group, msg); |
|||
this.$store.commit("addGroup", group); |
|||
}) |
|||
} else { |
|||
this.insertGroupMessage(group, msg); |
|||
} |
|||
|
|||
}, |
|||
insertGroupMessage(group, msg) { |
|||
let chatInfo = { |
|||
type: 'GROUP', |
|||
targetId: group.id, |
|||
showName: group.remark, |
|||
headImage: group.headImageThumb |
|||
}; |
|||
// 打开会话 |
|||
this.$store.commit("openChat", chatInfo); |
|||
// 插入消息 |
|||
this.$store.commit("insertMessage", msg); |
|||
// 播放提示音 |
|||
!msg.selfSend && this.playAudioTip(); |
|||
}, |
|||
quit() { |
|||
uni.showToast({ |
|||
title: "退出登录" |
|||
}) |
|||
console.log("退出登录") |
|||
this.$wsApi.closeWebSocket(); |
|||
uni.removeStorageSync("loginInfo"); |
|||
uni.navigateTo({ |
|||
url: "/pages/login/login" |
|||
}) |
|||
}, |
|||
playAudioTip() { |
|||
// let audio = new Audio(); |
|||
// let url = "/static/audio/tip.wav"; |
|||
// audio.src = url; |
|||
// audio.play(); |
|||
} |
|||
|
|||
}, |
|||
onLaunch() { |
|||
|
|||
// 跳转到登录页面 |
|||
console.log("onLaunch") |
|||
// #ifdef H5 |
|||
// 小程序不能跳转，否则会触发多次初始化 |
|||
console.log("onLaunch") |
|||
let loginInfo = uni.getStorageSync("loginInfo"); |
|||
if (loginInfo) { |
|||
// 初始化 |
|||
this.init(loginInfo) |
|||
}else{ |
|||
// 跳转到登录页 |
|||
uni.navigateTo({ |
|||
url:"/pages/login/login" |
|||
url:"/pages/login/login" |
|||
}) |
|||
// #endif |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import url('./static/icon/iconfont.css'); |
|||
|
|||
.tab-page{ |
|||
// #ifdef H5 |
|||
height: calc(100vh - 46px - 50px); // h5平台100vh是包含了顶部和底部，需要减去 |
|||
// #endif |
|||
// #ifndef H5 |
|||
height: calc(100vh); |
|||
// #endif |
|||
background-color: #f8f8f8; |
|||
} |
|||
|
|||
.page{ |
|||
// #ifdef H5 |
|||
height: calc(100vh - 45px); // h5平台100vh是包含了顶部，需要减去 |
|||
// #endif |
|||
// #ifndef H5 |
|||
height: calc(100vh); |
|||
// #endif |
|||
background-color: #f8f8f8; |
|||
} |
|||
</style> |
|||
@ -1,21 +1,55 @@ |
|||
const emoTextList = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']; |
|||
const emoTextList = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', |
|||
'冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', |
|||
'衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', |
|||
'可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', |
|||
'瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', |
|||
'跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极' |
|||
]; |
|||
|
|||
let emoImageUrlList = []; |
|||
|
|||
// 备注：经过测试，小程序的<rich-text>无法显示相对路径的图片，所以在这里对图片提前全部转成绝对路径
|
|||
// 提前初始化图片的url
|
|||
for (let i = 0; i < emoTextList.length; i++) { |
|||
let path = `/static/emoji/${i}.gif`; |
|||
uni.getImageInfo({ |
|||
src: path, |
|||
success(res) { |
|||
emoImageUrlList[i] = res.path |
|||
}, |
|||
fail(res) { |
|||
emoImageUrlList = path; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
|
|||
let transform = (content) => { |
|||
return content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, textToImg); |
|||
} |
|||
|
|||
|
|||
|
|||
// 将匹配结果替换表情图片
|
|||
let textToImg = (emoText) => { |
|||
let word = emoText.replace(/\#|\;/gi, ''); |
|||
let idx = emoTextList.indexOf(word); |
|||
let url = `/static/emoji/${idx}.gif`; |
|||
return `<img src="${url}" style="vertical-align:bottom;"/>` |
|||
let img = `<img src="${emoImageUrlList[idx]}" style="vertical-align:bottom;"/>`; |
|||
return img; |
|||
} |
|||
|
|||
|
|||
let textToPath = (emoText) => { |
|||
let word = emoText.replace(/\#|\;/gi, ''); |
|||
let idx = emoTextList.indexOf(word); |
|||
return `/static/emoji/${idx}.gif`; |
|||
} |
|||
|
|||
|
|||
|
|||
export default { |
|||
emoTextList, |
|||
transform, |
|||
textToImg |
|||
} |
|||
textToImg, |
|||
textToPath |
|||
} |
|||
Loading…
Reference in new issue