TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

优化消息发送函数，设定音视频通话的记录发送规则

Browse Source
This commit is contained in:
Jason.Chen
2022-03-01 10:40:00 +08:00
parent 04d9d772c4
commit dbda19870f
11 changed files with 324 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
pages/im/components/conversation/messagePreview.vue
View File

@@ -7,33 +7,36 @@
<view class="preview" v-if="msg.objectName=='RC:TxtMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>{{ msg.content || '' }}
</view>
<view class="preview" v-if="msg.objectName=='RC:HQVCMsg'">
<view class="preview" v-else-if="msg.objectName=='RC:HQVCMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[语音]
</view>
<view class="preview" v-if="msg.objectName=='RC:ImgMsg'">
<view class="preview" v-else-if="msg.objectName=='RC:ImgMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[图片]
</view>
<view class="preview" v-if="msg.objectName=='RC:GIFMsg'">
<view class="preview" v-else-if="msg.objectName=='RC:GIFMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[表情]
</view>
<view class="preview" v-if="msg.objectName=='RC:FileMsg'">
<view class="preview" v-else-if="msg.objectName=='RC:FileMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[文件]
</view>
<view class="preview" v-if="msg.objectName=='RC:LBSMsg'">
<view class="preview" v-else-if="msg.objectName=='RC:LBSMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[位置]
</view>
<view class="preview" v-if="msg.objectName=='RC:InfoNtf' && JSON.parse(msg.message).mediaType==0">
<view class="preview" v-else-if="msg.objectName=='RC:AudioMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[语音通话]
</view>
<view class="preview" v-if="msg.objectName=='RC:InfoNtf' && JSON.parse(msg.message).mediaType==1">
<view class="preview" v-else-if="msg.objectName=='RC:VideoMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[视频通话]
</view>
<view class="preview" v-if="msg.objectName=='RC:GrpNtf'">
<view class="preview" v-else-if="msg.objectName=='RC:GrpNtf'">
[{{ msg.message }}]
</view>
<view class="preview" v-if="msg.objectName=='RC:RcNtf'">
<view class="preview" v-else-if="msg.objectName=='RC:RcNtf'">
<text v-if="conversationType == 3">{{ user.name }}：</text> 撤回了一条消息
</view>
<view class="preview" v-else>
{{ msg.objectName }}
</view>
</block>
</view>
</template>

12
pages/im/components/sent/sentPopups.vue
View File

@@ -132,11 +132,13 @@
break;
case 'location':
uni.chooseLocation({
success: (location) => {
console.log(location);
im.sentLocation(this.conversationType, this.targetId, location).then(() => {
this.success()
})
success: (location) => {
const thumbnail = ''
// 通过 location 的经纬度，合成一张图片，再把图片的base64发送出去
im.sentLocation(this.conversationType, this.targetId, location, thumbnail)
.then(() => {
this.success()
})
}
})
break;

2
pages/im/components/sent/sentText.vue
View File

@@ -59,7 +59,7 @@
RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
this.$emit('success')
this.inputTxt = ''
})
})
}
},
focus() {

84
pages/im/components/show/showAudio.vue Normal file
View File

@@ -0,0 +1,84 @@
<template>
<view class="msg--call">
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
<view class="im--text" :class="isRemote ? 'left': 'right'">
<uni-icons type="phone" size="44rpx" />
{{ label }}
</view>
</view>
</template>
<script>
import utils from '@/utils/index.js'
import moment from 'moment'
import imBase from '../../mixins/imBase.js'
export default {
mixins: [
imBase
],
props: {
message: {
type: Object,
default: () => {
return {}
}
},
isGroup: {
type: Boolean,
default: false
}
},
computed: {
label() {
return this.message.content.customFields.status == 1 ? '通话时长：' + duration : '未接通'
},
isRemote() {
return this.message.messageDirection == 2
},
duration() {
if (this.message.content.customFields.duration > 3600) {
return moment.utc(this.message.content.customFields.duration * 1000).format('HH:mm:ss')
} else {
return moment.utc(this.message.content.customFields.duration * 1000).format('mm:ss')
}
}
}
}
</script>
<style scoped lang="scss">
.msg--call {
.name {
font-size: 26rpx;
color: $text-gray-m;
display: inline-block;
}
.im--text {
max-width: 508rpx;
padding: 20rpx;
line-height: 46rpx;
font-size: 32rpx;
color: $text-color;
display: flex;
flex-direction: row;
align-items: center;
&.left {
border-radius: 0 20rpx 20rpx 20rpx;
background: white;
}
&.right {
border-radius: 20rpx 0 20rpx 20rpx;
background: $main-color;
color: white;
.uni-icons {
color: white !important;
}
}
}
}
</style>

15
pages/im/components/show/showLocation.vue
View File

@@ -7,9 +7,11 @@
<view class="location" :class="isRemote ? 'left': 'right'" @click="showLocation">
<view class="location--name">
{{ content.customFields.name }}
{{ content.customFields.address }}
</view>
<view class="location--address">
{{ content.customFields.address }}
</view>
<image class="map" :src="content.customFields.thumbnail" />
<image class="map" :src="require('@/static/imgs/map.jpeg')" mode="aspectFill" />
</view>
</view>
</view>
@@ -81,9 +83,16 @@
background: #FFFFFF;
padding: 10rpx;
.location--name {
.location--name {
font-size: 32rpx;
overflow: hidden;
word-break: break-all;
}
.location--address {
padding-bottom: 10rpx;
font-size: 24rpx;
color: $text-gray-m;
}
.map {

8
pages/im/components/show/showNormal.vue
View File

@@ -1,11 +1,15 @@
<template>
<view class="">
<show-location v-if="message.content.objectName == 'RC:LBSMsg'" :message="message" :isGroup="isGroup" />
<show-video v-else-if="message.content.objectName == 'RC:VideoMsg'" :message="message" :isGroup="isGroup" />
<show-audio v-else-if="message.content.objectName == 'RC:AudioMsg'" :message="message" :isGroup="isGroup" />
</view>
</template>
<script>
import showLocation from './showLocation'
import showAudio from './showAudio'
import showVideo from './showVideo'
export default {
props: {
@@ -21,7 +25,9 @@
}
},
components: {
showLocation
showLocation,
showAudio,
showVideo
}
}
</script>

84
pages/im/components/show/showVideo.vue Normal file
View File

@@ -0,0 +1,84 @@
<template>
<view class="msg--call">
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
<view class="im--text" :class="isRemote ? 'left': 'right'">
<uni-icons type="videocam" size="44rpx" />
{{ label }}
</view>
</view>
</template>
<script>
import utils from '@/utils/index.js'
import moment from 'moment'
import imBase from '../../mixins/imBase.js'
export default {
mixins: [
imBase
],
props: {
message: {
type: Object,
default: () => {
return {}
}
},
isGroup: {
type: Boolean,
default: false
}
},
computed: {
label() {
return this.message.content.customFields.status == 1 ? '通话时长：' + duration : '未接通'
},
isRemote() {
return this.message.messageDirection == 2
},
duration() {
if (this.message.content.customFields.duration > 3600) {
return moment.utc(this.message.content.customFields.duration * 1000).format('HH:mm:ss')
} else {
return moment.utc(this.message.content.customFields.duration * 1000).format('mm:ss')
}
}
}
}
</script>
<style scoped lang="scss">
.msg--call {
.name {
font-size: 26rpx;
color: $text-gray-m;
display: inline-block;
}
.im--text {
max-width: 508rpx;
padding: 20rpx;
line-height: 46rpx;
font-size: 32rpx;
color: $text-color;
display: flex;
flex-direction: row;
align-items: center;
&.left {
border-radius: 0 20rpx 20rpx 20rpx;
background: white;
}
&.right {
border-radius: 20rpx 0 20rpx 20rpx;
background: $main-color;
color: white;
.uni-icons {
color: white !important;
}
}
}
}
</style>

5
pages/im/index.vue
View File

@@ -55,6 +55,11 @@
connectionStatus
},
onLoad() {
RongIMLib.getCurrentUserId(({
userId
}) => {
console.log('getCurrentUserId', userId);
})
// 监听新的好友申请
uni.$on('onNewContactConversation', () => {
console.log('更新好友申请数量');

32
pages/im/private/call.nvue
View File

@@ -75,7 +75,7 @@
// 关闭扬声器
volumeOff: false,
// 通话时长
duration: 0,
duration: 0,
interval: null
}
},
@@ -83,7 +83,7 @@
this.avatarSize = utils.rpx2px(200)
this.targetId = e.targetId
this.mediaType = e.mediaType
this.isCall = Boolean(e.isCall)
this.isCall = Boolean(e.isCall)
// 进入页面开启外呼
if (this.isCall) {
CallLib.startSingleCall(this.targetId, this.mediaType, '');
@@ -131,25 +131,9 @@
}
},
methods: {
afterHangup() {
clearInterval(this.interval)
const targetId = this.targetId
const sentStatus = 30
const messageContent = {
objectName: 'RC:InfoNtf',
userInfo: this.$store.getters.sender,
message: JSON.stringify({
mediaType: this.mediaType,
connected: this.connected,
duration: this.duration
})
}
const sentTime = 0
if (this.isCall) {
IMLib.insertOutgoingMessage(1, targetId, sentStatus, messageContent, sentTime)
} else {
IMLib.insertIncomingMessage(1, targetId, targetId, sentStatus, messageContent, sentTime)
}
afterHangup() {
clearInterval(this.interval)
// duration: this.duration
uni.$emit('onReceiveMessage_' + this.targetId, {
targetId: this.targetId
})
@@ -179,9 +163,9 @@
CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0, false)
CallLib.setVideoView(session.mine.userId, this.$refs.smallVideoView.ref, 0, true)
}, 200)
}
this.interval = setInterval(() => {
this.duration++
}
this.interval = setInterval(() => {
this.duration++
}, 1000)
},
// 切换主屏显示人

BIN
static/imgs/map.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

163
utils/im/message.js
View File

@@ -83,7 +83,7 @@ const getGroupPendinglist = (targetId, callback) => {
*/
const sentText = (conversationType, targetId, content) => {
return new Promise((resolve, reject) => {
const msg = {
const message = {
conversationType: conversationType,
targetId: String(targetId),
content: {
@@ -93,24 +93,10 @@ const sentText = (conversationType, targetId, content) => {
}
}
RongIMLib.sendMessage(msg, ({
code,
messageId
}) => {
if (code === 0) {
if (conversationType == 3) {
RongIMLib.sendReadReceiptRequest(messageId, (res) => {
console.log('发送回执请求', res);
})
}
resolve(messageId)
} else {
uni.showToast({
icon: 'none',
title: '发送失败' + code
})
reject(code)
}
sendCommonMessage(message, (messageId) => {
resolve(messageId)
}, (errCode) => {
reject(errCode)
})
})
}
@@ -136,11 +122,9 @@ const sentVoice = (conversationType, targetId, voiceUrl, time) => {
}
}
RongIMLib.sendMediaMessage(msg, {
success: (messageId) => {
if (conversationType == 3) {
RongIMLib.sendReadReceiptRequest(messageId, (res) => {
console.log('发送回执请求', res);
})
success: (messageId) => {
if (conversationType == 3) {
RongIMLib.sendReadReceiptRequest(messageId)
}
resolve(messageId)
},
@@ -169,11 +153,9 @@ const sentImage = (conversationType, targetId, imageUrl) => {
}
}
RongIMLib.sendMediaMessage(msg, {
success: (messageId) => {
if (conversationType == 3) {
RongIMLib.sendReadReceiptRequest(messageId, (res) => {
console.log('发送回执请求', res);
})
success: (messageId) => {
if (conversationType == 3) {
RongIMLib.sendReadReceiptRequest(messageId)
}
resolve(messageId)
},
@@ -201,11 +183,9 @@ const sentFile = (conversationType, targetId, fileUrl) => {
}
RongIMLib.sendMediaMessage(msg, {
success: (messageId) => {
if (conversationType == 3) {
RongIMLib.sendReadReceiptRequest(messageId, (res) => {
console.log('发送回执请求', res);
})
success: (messageId) => {
if (conversationType == 3) {
RongIMLib.sendReadReceiptRequest(messageId)
}
resolve(messageId)
},
@@ -219,48 +199,111 @@ const sentFile = (conversationType, targetId, fileUrl) => {
}
// 发送地理位置
const sentLocation = (conversationType, targetId, location) => {
const sentLocation = (conversationType, targetId, location, thumbnail) => {
return new Promise((resolve, reject) => {
const msg = {
const message = {
conversationType: conversationType,
targetId: String(targetId),
objectName: 'RC:LBSMsg',
content: {
customType: 2,
objectName: 'RC:LBSMsg',
customFields: {
name: location.name,
name: location.name,
address: location.address,
latitude: Number(location.latitude),
longitude: Number(location.longitude),
thumbnail: ''
longitude: Number(location.longitude),
thumbnail: thumbnail
},
userInfo: store.getters.sender,
}
}
RongIMLib.sendMessage(msg, ({
code,
messageId
}) => {
if (code === 0) {
if (conversationType == 3) {
RongIMLib.sendReadReceiptRequest(messageId, (res) => {
console.log('发送回执请求', res);
})
}
resolve(messageId)
} else {
uni.showToast({
icon: 'none',
title: '发送失败' + code
})
reject(code)
}
sendCommonMessage(message, (messageId) => {
resolve(messageId)
}, (errCode) => {
reject(errCode)
})
})
}
/**
* 发送视频通话结果
*/
const sentVideo = (conversationType, targetId, status, time) => {
return new Promise((resolve, reject) => {
const message = {
conversationType: conversationType,
targetId: String(targetId),
content: {
customType: 2,
objectName: 'RC:VideoMsg',
customFields: {
status: status,
duration: time
},
userInfo: store.getters.sender,
}
}
sendCommonMessage(message, (messageId) => {
resolve(messageId)
}, (errCode) => {
reject(errCode)
})
})
}
/**
* 发送语音通话结果
*/
const sentAudio = (conversationType, targetId, status, time) => {
return new Promise((resolve, reject) => {
const message = {
conversationType: conversationType,
targetId: String(targetId),
content: {
customType: 2,
objectName: 'RC:AudioMsg',
customFields: {
status: status,
duration: time
},
userInfo: store.getters.sender,
}
}
sendCommonMessage(message, (messageId) => {
resolve(messageId)
}, (errCode) => {
reject(errCode)
})
})
}
/**
* 发送普通消息
*/
const sendCommonMessage = (message, success, fail) => {
RongIMLib.sendMessage(message, ({
code,
messageId
}) => {
if (code === 0) {
if (message.conversationType == 3) {
RongIMLib.sendReadReceiptRequest(messageId)
}
success(messageId)
} else {
uni.showToast({
icon: 'none',
title: '发送失败' + code
})
fail(code)
}
})
}
export default {
getMessageList,
getPendingList,
@@ -269,5 +312,7 @@ export default {
sentVoice,
sentImage,
sentFile,
sentLocation
sentLocation,
sentVideo,
sentAudio
}