xsx
3 years ago
15 changed files with 383 additions and 265 deletions
@ -1,18 +1,193 @@ |
|||||
<script> |
<script> |
||||
export default { |
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() { |
onLaunch() { |
||||
|
|
||||
// 跳转到登录页面 |
// 跳转到登录页面 |
||||
console.log("onLaunch") |
console.log("onLaunch") |
||||
// #ifdef H5 |
let loginInfo = uni.getStorageSync("loginInfo"); |
||||
// 小程序不能跳转，否则会触发多次初始化 |
if (loginInfo) { |
||||
|
// 初始化 |
||||
|
this.init(loginInfo) |
||||
|
}else{ |
||||
|
// 跳转到登录页 |
||||
uni.navigateTo({ |
uni.navigateTo({ |
||||
url:"/pages/login/login" |
url:"/pages/login/login" |
||||
}) |
}) |
||||
// #endif |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss"> |
<style lang="scss"> |
||||
@import url('./static/icon/iconfont.css'); |
@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> |
</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) => { |
let transform = (content) => { |
||||
return content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, textToImg); |
return content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, textToImg); |
||||
} |
} |
||||
|
|
||||
|
|
||||
|
|
||||
// 将匹配结果替换表情图片
|
// 将匹配结果替换表情图片
|
||||
let textToImg = (emoText) => { |
let textToImg = (emoText) => { |
||||
let word = emoText.replace(/\#|\;/gi, ''); |
let word = emoText.replace(/\#|\;/gi, ''); |
||||
let idx = emoTextList.indexOf(word); |
let idx = emoTextList.indexOf(word); |
||||
let url = `/static/emoji/${idx}.gif`; |
let img = `<img src="${emoImageUrlList[idx]}" style="vertical-align:bottom;"/>`; |
||||
return `<img src="${url}" 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 { |
export default { |
||||
emoTextList, |
emoTextList, |
||||
transform, |
transform, |
||||
textToImg |
textToImg, |
||||
} |
textToPath |
||||
|
} |
||||
Loading…
Reference in new issue