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

语音消息发送成功，播放暂时不支持带token的路径

Browse Source
This commit is contained in:
Jason.Chen
2022-01-30 17:46:36 +08:00
parent 3ae6ab881b
commit 83061d7c8e
4 changed files with 585 additions and 476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

801
pages/im/private/chat.nvue
View File

@@ -1,393 +1,412 @@
<template>
<view class="chat">
<!-- chat -->
<list class="chat-scroll">
<cell class="cell" v-for="(item, index) in messages" :key="index">
<view class="cell-time">
<text class="cell-time-text">{{ item.sentTime|timeCustomCN }}</text>
</view>
<view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
<image class="active" :src="userInfo.portraitUrl" mode="aspectFill" @click="showFriend(targetId, item.messageDirection)"></image>
<view class="msg">
<imAUDIO v-if="item.objectName === 'RC:VcMsg'" :guest="item.messageDirection == 1" :msg="item.content.content"></imAUDIO>
<imIMG v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1" :msg="item.content.content"></imIMG>
<imTXT v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1" :msg="item.content.content"></imTXT>
<view class="state" v-if="item.messageDirection == 1">
<text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
</view>
</view>
</view>
</cell>
<cell class="cell-footer" ref="chatBottom"></cell>
</list>
<!-- footer -->
<view class="chat-footer">
<view class="msg-type" @click="msgType">
<image class="msg-type-icon" src="@/static/icon/key-icon.png" v-if="importTabs === 0" mode="widthFix"></image>
<image class="msg-type-icon" src="@/static/icon/msg-icon.png" v-if="importTabs === 1" mode="widthFix"></image>
</view>
<block v-if="importTabs === 0">
<view class="chat-mp3" hover-class="chat-hover" @touchstart="startAudio" @touchend="chendAudio">
<text class="chat-mp3-text">按住说话</text>
</view>
</block>
<block v-if="importTabs === 1">
<input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send" cursor-spacing="10" />
</block>
<text class="chat-push" size="mini" @click="send">发送</text>
</view>
<!-- 录音中提示 -->
<view class="audio-transcribe" v-if="showAudioTranscribe">
<image class="audio-transcribe-src" src="@/static/icon/record-icon.png" mode="widthFix"></image>
<text class="audio-transcribe-text">录音中 {{transcribeTime}} s</text>
</view>
</view>
</template>
<script>
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
import im from '@/utils/im/index.js'
import permision from "@/js_sdk/wa-permission/permission.js"
import imAUDIO from '@/components/im/imAUDIO'
import imIMG from '@/components/im/imIMG'
import imTXT from '@/components/im/imTXT'
var transcribe
var recorderManager = uni.getRecorderManager()
const ChatList = uni.requireNativePlugin('dom')
export default {
data() {
return {
targetId: '',
scrollIntoID: 'chatID_0',
inputTxt: '',
messages: [],
conversationType: 1,
totalCount: 0,
userInfo: {
name: '',
userId: '',
portraitUrl: ''
},
importTabs: 1,
showAudioTranscribe: false,
transcribeTime: 60,
audioSrc: '',
audioContextPaused: true
}
},
components:{ imAUDIO, imIMG, imTXT },
onLoad(e) {
console.log(e)
console.log(11111)
this.targetId = e.targetId
this.conversationType = e.conversationType // 会话类型
// 消息总数量
RongIMLib.getMessageCount(this.conversationType, this.targetId, ({
code,
count
}) => {
if (code == 0) {
this.totalCount = count
}
})
this.userInfo = this.$store.getters.userInfo(this.targetId)
uni.setNavigationBarTitle({
title: this.$store.getters.userInfo(this.targetId).name
})
RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, new Date().getTime())
im.setNotifyBadge()
RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, new Date().getTime())
this.getMessageList()
// 监听消息回执
RongIMLib.addReadReceiptReceivedListener(({
data
}) => {
if (data.targetId == this.targetId) {
this.getMessageList()
}
})
// 监听录音结束
recorderManager.onStop(res => {
if (res.tempFilePath) this.audioSrc = res.tempFilePath
console.log('------------------获取到了录音的临时路径---------------')
console.log(res.tempFilePath)
})
// 简童收到新消息，判断是否是当前会话，更新会话内容
uni.$on('onReceiveMessage', (msg) => {
if (msg.targetId == this.targetId) {
RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime)
RongIMLib.sendReadReceiptMessage(msg.conversationType, msg.targetId, msg.sentTime)
this.getMessageList()
im.setNotifyBadge()
}
})
},
beforeDestroy() {
uni.$off('onReceiveMessage')
},
onUnload() {
RongIMLib.clearReadReceiptReceivedListener()
},
computed: {
disabled() {
return this.inputTxt.length == 0
}
},
onNavigationBarButtonTap(e) {
if (e.index == 0) {
uni.navigateTo({
url: '/pages/im/private/setting?targetId=' + this.targetId +
'&conversationType=' + this.conversationType,
events: {
messageClear: () => {
this.getMessageList()
console.log('聊天消息被清空');
}
}
})
}
},
methods: {
// 检查安卓录制权限
async getAndroidPermission() {
return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
},
// 切换聊天信息
msgType() {
this.importTabs = this.importTabs === 1 ? 0 : 1
},
// 录制语音消息
startAudio(e) {
this.getAndroidPermission().then(code => {
switch (code) {
case 1:
this.showAudioTranscribe = true
recorderManager.start()
transcribe = setInterval(() => {
this.transcribeTime -= 1
if (this.transcribeTime === 0) {
this.chendAudio()
}
}, 1000)
break;
case 0:
uni.showToast({
title: '暂无麦克风权限，请前往应用设置开启麦克风',
icon: 'none'
})
break;
case -1:
uni.showToast({
title: '应用权限错误',
icon: 'none'
})
break;
}
})
},
// 结束录音
chendAudio(e) {
if (!this.showAudioTranscribe) return
recorderManager.stop()
clearInterval(transcribe)
this.transcribeTime = 60
this.showAudioTranscribe = false
},
getMessageList() {
// 获取消息列表
const objectNames = [
'RC:TxtMsg',
'RC:VcMsg',
'RC:HQVCMsg',
'RC:ImgMsg',
'RC:GIFMsg',
'RC:ImgTextMsg',
'RC:FileMsg',
'RC:LBSMsg',
'RC:SightMsg',
'RC:ReferenceMsg',
'RC:CombineMsg'
]
const timeStamp = new Date().getTime()
const count = 20 // 获取的消息数量
const isForward = true // 是否向前获取
RongIMLib.getHistoryMessagesByTimestamp(this.conversationType, this.targetId, objectNames, timeStamp,
count,
isForward,
({
code,
messages
}) => {
if (code === 0) {
console.log(this.messages)
this.messages = messages.reverse()
this.scrollBottom()
}
}
)
},
send() {
if(this.inputTxt === '') return
im.sendMsg(this.conversationType, this.targetId, this.inputTxt, () => {
this.getMessageList()
this.inputTxt = ''
})
},
showFriend(targetId, type) {
uni.navigateTo({
url: type === 1 ? '/pages/im/friends/mine?targetId=' +targetId : '/pages/im/friends/info?targetId=' +targetId
})
},
scrollBottom() {
setTimeout(() => {
let el = this.$refs.chatBottom
ChatList.scrollToElement(el, {
animated: true
<template>
<view class="chat">
<!-- chat -->
<list class="chat-scroll">
<cell class="cell" v-for="(item, index) in messages" :key="index">
<view class="cell-time">
<text class="cell-time-text">{{ item.sentTime|timeCustomCN }}</text>
</view>
<view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
<image class="active" :src="userInfo.portraitUrl" mode="aspectFill"
@click="showFriend(targetId, item.messageDirection)"></image>
<view class="msg">
<imAUDIO v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
:msg="item.content"></imAUDIO>
<imIMG v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
:msg="item.content.content"></imIMG>
<imTXT v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content.content"></imTXT>
<view class="state" v-if="item.messageDirection == 1">
<text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
</view>
</view>
</view>
</cell>
<cell class="cell-footer" ref="chatBottom"></cell>
</list>
<!-- footer -->
<view class="chat-footer">
<view class="msg-type" @click="msgType">
<image class="msg-type-icon" src="@/static/icon/key-icon.png" v-if="importTabs === 0" mode="widthFix">
</image>
<image class="msg-type-icon" src="@/static/icon/msg-icon.png" v-if="importTabs === 1" mode="widthFix">
</image>
</view>
<block v-if="importTabs === 0">
<view class="chat-mp3" hover-class="chat-hover" @touchstart="startAudio" @touchend="chendAudio">
<text class="chat-mp3-text">按住说话</text>
</view>
</block>
<block v-if="importTabs === 1">
<input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send"
cursor-spacing="10" />
</block>
<text class="chat-push" size="mini" @click="send">发送</text>
</view>
<!-- 录音中提示 -->
<view class="audio-transcribe" v-if="showAudioTranscribe">
<image class="audio-transcribe-src" src="@/static/icon/record-icon.png" mode="widthFix"></image>
<text class="audio-transcribe-text">录音中 {{transcribeTime}} s</text>
</view>
</view>
</template>
<script>
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
import im from '@/utils/im/index.js'
import permision from "@/js_sdk/wa-permission/permission.js"
import imAUDIO from '@/components/im/imAUDIO'
import imIMG from '@/components/im/imIMG'
import imTXT from '@/components/im/imTXT'
var transcribe
var recorderManager = uni.getRecorderManager()
const ChatList = uni.requireNativePlugin('dom')
export default {
data() {
return {
targetId: '',
scrollIntoID: 'chatID_0',
inputTxt: '',
messages: [],
conversationType: 1,
userInfo: {
name: '',
userId: '',
portraitUrl: ''
},
importTabs: 1,
showAudioTranscribe: false,
transcribeTime: 60,
audioSrc: '',
audioContextPaused: true
}
},
components: {
imAUDIO,
imIMG,
imTXT
},
onLoad(e) {
this.targetId = e.targetId
this.conversationType = e.conversationType // 会话类型
this.userInfo = this.$store.getters.userInfo(this.targetId)
uni.setNavigationBarTitle({
title: this.$store.getters.userInfo(this.targetId).name
})
RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, new Date().getTime())
im.setNotifyBadge()
RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, new Date().getTime())
this.getMessageList()
// 监听消息回执
RongIMLib.addReadReceiptReceivedListener(({
data
}) => {
if (data.targetId == this.targetId) {
this.getMessageList()
}
})
// 监听收到新消息，判断是否是当前会话，更新会话内容
uni.$on('onReceiveMessage', (msg) => {
if (msg.targetId == this.targetId) {
RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime)
RongIMLib.sendReadReceiptMessage(msg.conversationType, msg.targetId, msg.sentTime)
this.getMessageList()
im.setNotifyBadge()
}
})
},
beforeDestroy() {
uni.$off('onReceiveMessage')
},
onUnload() {
RongIMLib.clearReadReceiptReceivedListener()
},
computed: {
disabled() {
return this.inputTxt.length == 0
}
},
onNavigationBarButtonTap(e) {
if (e.index == 0) {
uni.navigateTo({
url: '/pages/im/private/setting?targetId=' + this.targetId +
'&conversationType=' + this.conversationType,
events: {
messageClear: () => {
this.getMessageList()
console.log('聊天消息被清空');
}
}
})
}
},
methods: {
// 检查安卓录制权限
async getAndroidPermission() {
return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
},
// 切换聊天信息
msgType() {
this.importTabs = this.importTabs === 1 ? 0 : 1
},
// 录制语音消息
startAudio(e) {
this.getAndroidPermission().then(code => {
switch (code) {
case 1:
this.showAudioTranscribe = true
recorderManager.start()
transcribe = setInterval(() => {
this.transcribeTime -= 1
if (this.transcribeTime === 0) {
this.chendAudio()
}
}, 1000)
break;
case 0:
uni.showToast({
title: '暂无麦克风权限，请前往应用设置开启麦克风',
icon: 'none'
})
break;
case -1:
uni.showToast({
title: '应用权限错误',
icon: 'none'
})
break;
}
})
},
// 结束录音
chendAudio(e) {
if (!this.showAudioTranscribe) return
recorderManager.stop()
clearInterval(transcribe)
// 监听录音结束
recorderManager.onStop(res => {
if (res.tempFilePath) this.audioSrc = res.tempFilePath
im.sendVoiceMsg(this.conversationType, this.targetId, res.tempFilePath, (60 - this
.transcribeTime), () => {
this.getMessageList()
})
},100)
}
}
}
</script>
<style scoped>
.audio-transcribe {
background: rgba(0,0,0,.6);
position: fixed;
height: 200rpx;
width: 300rpx;
border-radius: 10rpx;
z-index: 99;
top: 550rpx;
left: 225rpx;
flex-direction: column;
align-items: center;
justify-content: center;
}
.audio-transcribe-src{
width: 88rpx;
height: 88rpx;
}
.audio-transcribe-text {
font-size: 28rpx;
color: #FFFFFF;
}
/* 窗口 */
.chat{
background: #F3F6FB;
flex: 1;
}
.chat-scroll{
flex: 1;
}
.cell{
padding:10rpx 30rpx;
}
.cell-time{
justify-content: center;
align-items: center;
padding-bottom: 20rpx;
}
.cell-time-text{
background: #fff;
font-size: 24rpx;
color: #666;
line-height: 40rpx;
padding: 0 20rpx;
border-radius: 10rpx;
}
.cell-item{
width: 690rpx;
justify-content: flex-start;
}
.cell-footer{
height: 20rpx;
}
.active{
width: 78rpx;
height: 78rpx;
background-color: white;
border-radius: 10rpx;
}
.msg{
margin: 0 20rpx;
}
.state{
padding-top: 10rpx;
}
.state-text{
font-size: 24rpx;
color: #666;
}
.cell-item.left{
flex-direction: row;
}
.cell-item.right{
flex-direction: row-reverse;
}
.cell-item.right .state{
flex-direction: row;
justify-content: flex-end;
}
/* footer */
.chat-footer{
background: white;
padding: 20rpx 30rpx;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.msg-type{
width: 70rpx;
height: 70rpx;
}
.msg-type > .msg-type-icon{
margin: 5rpx;
width: 60rpx;
height: 60rpx;
}
.chat-mp3{
background: #F3F6FB;
height: 70rpx;
line-height: 70rpx;
justify-content: center;
align-items: center;
width: 460rpx;
border-radius: 10rpx;
margin-right: 15rpx;
}
.chat-mp3-text{
font-size: 30rpx;
color: #333;
}
.chat-input{
background: #F3F6FB;
height: 70rpx;
width: 460rpx;
border-radius: 10rpx;
margin-right: 15rpx;
padding: 0 20rpx;
}
.chat-push{
background: #34CE98;
color: white;
width: 120rpx;
line-height: 70rpx;
text-align: center;
border-radius: 10rpx;
font-size: 30rpx;
font-weight: bold;
}
this.transcribeTime = 60
this.showAudioTranscribe = false
})
},
getMessageList() {
// 获取消息列表
const objectNames = [
'RC:TxtMsg',
'RC:VcMsg',
'RC:HQVCMsg',
'RC:ImgMsg',
'RC:GIFMsg',
'RC:ImgTextMsg',
'RC:FileMsg',
'RC:LBSMsg',
'RC:SightMsg',
'RC:ReferenceMsg',
'RC:CombineMsg'
]
const timeStamp = new Date().getTime()
const count = 30 // 获取的消息数量
const isForward = true // 是否向前获取
RongIMLib.getHistoryMessagesByTimestamp(this.conversationType, this.targetId, objectNames, timeStamp,
count,
isForward,
({
code,
messages
}) => {
if (code === 0) {
this.messages = messages.reverse()
this.scrollBottom()
}
}
)
},
send() {
if (this.inputTxt === '') return
im.sendMsg(this.conversationType, this.targetId, this.inputTxt, () => {
this.getMessageList()
this.inputTxt = ''
})
},
showFriend(targetId, type) {
uni.navigateTo({
url: type === 1 ? '/pages/im/friends/mine?targetId=' + targetId :
'/pages/im/friends/info?targetId=' + targetId
})
},
scrollBottom() {
setTimeout(() => {
let el = this.$refs.chatBottom
ChatList.scrollToElement(el, {
animated: true
})
}, 100)
}
}
}
</script>
<style scoped>
.audio-transcribe {
background: rgba(0, 0, 0, .6);
position: fixed;
height: 200rpx;
width: 300rpx;
border-radius: 10rpx;
z-index: 99;
top: 550rpx;
left: 225rpx;
flex-direction: column;
align-items: center;
justify-content: center;
}
.audio-transcribe-src {
width: 88rpx;
height: 88rpx;
}
.audio-transcribe-text {
font-size: 28rpx;
color: #FFFFFF;
}
/* 窗口 */
.chat {
background: #F3F6FB;
flex: 1;
}
.chat-scroll {
flex: 1;
}
.cell {
padding: 10rpx 30rpx;
}
.cell-time {
justify-content: center;
align-items: center;
padding-bottom: 20rpx;
}
.cell-time-text {
background: #fff;
font-size: 24rpx;
color: #666;
line-height: 40rpx;
padding: 0 20rpx;
border-radius: 10rpx;
}
.cell-item {
width: 690rpx;
justify-content: flex-start;
}
.cell-footer {
height: 20rpx;
}
.active {
width: 78rpx;
height: 78rpx;
background-color: white;
border-radius: 10rpx;
}
.msg {
margin: 0 20rpx;
}
.state {
padding-top: 10rpx;
}
.state-text {
font-size: 24rpx;
color: #666;
}
.cell-item.left {
flex-direction: row;
}
.cell-item.right {
flex-direction: row-reverse;
}
.cell-item.right .state {
flex-direction: row;
justify-content: flex-end;
}
/* footer */
.chat-footer {
background: white;
padding: 20rpx 30rpx;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.msg-type {
width: 70rpx;
height: 70rpx;
}
.msg-type>.msg-type-icon {
margin: 5rpx;
width: 60rpx;
height: 60rpx;
}
.chat-mp3 {
background: #F3F6FB;
height: 70rpx;
line-height: 70rpx;
justify-content: center;
align-items: center;
width: 460rpx;
border-radius: 10rpx;
margin-right: 15rpx;
}
.chat-mp3-text {
font-size: 30rpx;
color: #333;
}
.chat-input {
background: #F3F6FB;
height: 70rpx;
width: 460rpx;
border-radius: 10rpx;
margin-right: 15rpx;
padding: 0 20rpx;
}
.chat-push {
background: #34CE98;
color: white;
width: 120rpx;
line-height: 70rpx;
text-align: center;
border-radius: 10rpx;
font-size: 30rpx;
font-weight: bold;
}
</style>