-
![]()
+
{{name.substring(0,1).toUpperCase()}}
From f18a8e62ebc1edb19fced1a72e0a9e52f60e244c Mon Sep 17 00:00:00 2001
From: xsx <825657193@qq.com>
Date: Sat, 30 Mar 2024 13:49:11 +0800
Subject: [PATCH 4/7] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E6=96=AD=E7=BA=BF?=
=?UTF-8?q?=E9=87=8D=E8=BF=9E=E6=97=B6=E5=8F=AF=E8=83=BD=E4=BC=9A=E5=87=BA?=
=?UTF-8?q?=E7=8E=B0=E6=B6=88=E6=81=AF=E4=B9=B1=E5=BA=8F=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
im-ui/src/store/chatStore.js | 12 ++++++++++--
im-uniapp/store/chatStore.js | 12 ++++++++++--
2 files changed, 20 insertions(+), 4 deletions(-)
diff --git a/im-ui/src/store/chatStore.js b/im-ui/src/store/chatStore.js
index 4bc504e..505cc70 100644
--- a/im-ui/src/store/chatStore.js
+++ b/im-ui/src/store/chatStore.js
@@ -174,8 +174,16 @@ export default {
});
chat.lastTimeTip = msgInfo.sendTime;
}
- // 新的消息
- chat.messages.push(msgInfo);
+ // 根据id顺序插入,防止消息乱序
+ let insertPos = chat.messages.length;
+ for (let idx in chat.messages) {
+ if (chat.messages[idx].id && msgInfo.id < chat.messages[idx].id) {
+ insertPos = idx;
+ console.log(`消息出现乱序,位置:${chat.messages.length},修正至:${insertPos}`);
+ break;
+ }
+ }
+ chat.messages.splice(insertPos, 0, msgInfo);
this.commit("saveToStorage");
},
updateMessage(state, msgInfo) {
diff --git a/im-uniapp/store/chatStore.js b/im-uniapp/store/chatStore.js
index b959ab6..005ec61 100644
--- a/im-uniapp/store/chatStore.js
+++ b/im-uniapp/store/chatStore.js
@@ -176,8 +176,16 @@ export default {
});
chat.lastTimeTip = msgInfo.sendTime;
}
- // 新的消息
- chat.messages.push(msgInfo);
+ // 根据id顺序插入,防止消息乱序
+ let insertPos = chat.messages.length;
+ for (let idx in chat.messages) {
+ if (chat.messages[idx].id && msgInfo.id < chat.messages[idx].id) {
+ insertPos = idx;
+ console.log(`消息出现乱序,位置:${chat.messages.length},修正至:${insertPos}`);
+ break;
+ }
+ }
+ chat.messages.splice(insertPos, 0, msgInfo);
this.commit("saveToStorage");
},
updateMessage(state, msgInfo) {
From 8cc3ed9352ebcd557b15a7b1cb93f2f1b4889c0d Mon Sep 17 00:00:00 2001
From: xsx <825657193@qq.com>
Date: Sun, 31 Mar 2024 17:38:32 +0800
Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
=?UTF-8?q?=E6=94=AF=E6=8C=81=E8=AF=AD=E9=9F=B3=E6=B6=88=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
im-uniapp/common/recorder-app.js | 62 +++++
im-uniapp/common/recorder-h5.js | 54 +++++
.../chat-message-item/chat-message-item.vue | 96 +++++---
.../components/chat-record/chat-record.vue | 227 ++++++++++++++++++
im-uniapp/main.js | 8 +
im-uniapp/package.json | 10 +-
im-uniapp/pages/chat/chat-box.vue | 78 ++++--
im-uniapp/static/icon/iconfont.css | 14 +-
im-uniapp/static/icon/iconfont.ttf | Bin 6696 -> 7216 bytes
9 files changed, 497 insertions(+), 52 deletions(-)
create mode 100644 im-uniapp/common/recorder-app.js
create mode 100644 im-uniapp/common/recorder-h5.js
create mode 100644 im-uniapp/components/chat-record/chat-record.vue
diff --git a/im-uniapp/common/recorder-app.js b/im-uniapp/common/recorder-app.js
new file mode 100644
index 0000000..dce0cbf
--- /dev/null
+++ b/im-uniapp/common/recorder-app.js
@@ -0,0 +1,62 @@
+import UNI_APP from '@/.env.js';
+
+const rc = uni.getRecorderManager();
+// 录音开始时间
+let startTime = null;
+
+let start = () => {
+ return new Promise((resolve, reject) => {
+ rc.onStart(() => {
+ startTime = new Date();
+ resolve()
+ });
+ rc.onError((e) => {
+ console.log(e);
+ reject(e)
+ })
+ rc.start({
+ format: 'mp3' // 录音格式,可选值:aac/mp3
+ });
+ })
+}
+
+let pause = () => {
+ rc.stop();
+}
+
+let close = () => {
+ rc.stop();
+}
+
+let upload = () => {
+ return new Promise((resolve, reject) => {
+ rc.onStop((wavFile, a, b) => {
+ uni.uploadFile({
+ url: UNI_APP.BASE_URL + '/file/upload',
+ header: {
+ accessToken: uni.getStorageSync("loginInfo").accessToken
+ },
+ filePath: wavFile.tempFilePath,
+ name: 'file',
+ success: (res) => {
+ const duration = (new Date().getTime() - startTime.getTime()) / 1000
+ const data = {
+ duration: Math.round(duration),
+ url: JSON.parse(res.data).data
+ }
+ resolve(data);
+ },
+ fail: (e) => {
+ reject(e);
+ }
+ })
+ });
+ })
+}
+
+export {
+ start,
+ pause,
+ close,
+ upload
+}
\ No newline at end of file
diff --git a/im-uniapp/common/recorder-h5.js b/im-uniapp/common/recorder-h5.js
new file mode 100644
index 0000000..1f435ca
--- /dev/null
+++ b/im-uniapp/common/recorder-h5.js
@@ -0,0 +1,54 @@
+import Recorder from 'js-audio-recorder';
+import UNI_APP from '@/.env.js';
+
+let rc = null;
+let start = () => {
+ if(rc != null){
+ close();
+ }
+ rc = new Recorder();
+ return rc.start();
+}
+
+let pause = () => {
+ rc.pause();
+}
+
+let close = () => {
+ rc.destroy();
+ rc = null;
+}
+
+let upload = () => {
+ return new Promise((resolve, reject) => {
+ const wavBlob = rc.getWAVBlob();
+ const newbolb = new Blob([wavBlob], { type: 'audio/wav'})
+ const name = new Date().getDate() + '.wav';
+ const file = new File([newbolb], name)
+ uni.uploadFile({
+ url: UNI_APP.BASE_URL + '/file/upload',
+ header: {
+ accessToken: uni.getStorageSync("loginInfo").accessToken
+ },
+ file: file,
+ name: 'file',
+ success: (res) => {
+ const data = {
+ duration: parseInt(rc.duration),
+ url: JSON.parse(res.data).data
+ }
+ resolve(data);
+ },
+ fail: (e) => {
+ reject(e);
+ }
+ })
+ })
+}
+
+export {
+ start,
+ pause,
+ close,
+ upload
+}
\ No newline at end of file
diff --git a/im-uniapp/components/chat-message-item/chat-message-item.vue b/im-uniapp/components/chat-message-item/chat-message-item.vue
index 74be926..6f69044 100644
--- a/im-uniapp/components/chat-message-item/chat-message-item.vue
+++ b/im-uniapp/components/chat-message-item/chat-message-item.vue
@@ -1,13 +1,16 @@
- {{msgInfo.content}}
+
+ {{msgInfo.content}}
{{$date.toTimeText(msgInfo.sendTime)}}
-
+
{{showName}}
@@ -26,7 +29,6 @@
-
@@ -40,31 +42,28 @@
-
-
-
+
+
+ {{JSON.parse(msgInfo.content).duration+'"'}}
+
+
+
+
+
+
{{msgInfo.content}}
-
已读
未读
-
{{msgInfo.readedCount}}人已读
-
@@ -97,6 +96,7 @@
data() {
return {
audioPlayState: 'STOP',
+ innerAudioContext: null,
menu: {
show: false,
style: ""
@@ -135,13 +135,27 @@
icon: "none"
})
},
- onPlayVoice() {
- if (!this.audio) {
- this.audio = new Audio();
+ onPlayAudio() {
+ // 初始化音频播放器
+ if (!this.innerAudioContext) {
+ this.innerAudioContext = uni.createInnerAudioContext();
+ let url = JSON.parse(this.msgInfo.content).url
+ this.innerAudioContext.src = url;
+ this.innerAudioContext.onEnded((e) => {
+ console.log('停止')
+ this.audioPlayState = "STOP"
+ })
+ }
+ if (this.audioPlayState == 'STOP') {
+ this.innerAudioContext.play();
+ this.audioPlayState = "PLAYING";
+ } else if (this.audioPlayState == 'PLAYING') {
+ this.innerAudioContext.pause();
+ this.audioPlayState = "PAUSE"
+ } else if (this.audioPlayState == 'PAUSE') {
+ this.innerAudioContext.play();
+ this.audioPlayState = "PLAYING"
}
- this.audio.src = JSON.parse(this.msgInfo.content).url;
- this.audio.play();
- this.handlePlayVoice = 'RUNNING';
},
onSelectMenu(item) {
this.$emit(item.key.toLowerCase(), this.msgInfo);
@@ -357,12 +371,24 @@
}
+ .chat-msg-audio {
+ display: flex;
+ align-items: center;
-
+ .chat-audio-text {
+ padding-right: 8px;
+ }
+
+ .icon-voice-play {
+ font-size: 20px;
+ padding-right: 8px;
+ }
+ }
.chat-realtime {
display: flex;
align-items: center;
+
.iconfont {
font-size: 20px;
padding-right: 8px;
@@ -373,13 +399,13 @@
display: block;
.chat-readed {
- font-size: 10px;
- color: #ccc;
+ font-size: 12px;
+ color: #888;
font-weight: 600;
}
-
+
.chat-unread {
- font-size: 10px;
+ font-size: 12px;
color: #f23c0f;
font-weight: 600;
}
@@ -436,14 +462,28 @@
.chat-msg-file {
flex-direction: row-reverse;
}
-
+
+ .chat-msg-audio {
+ flex-direction: row-reverse;
+
+ .chat-audio-text {
+ padding-right: 0;
+ padding-left: 8px;
+ }
+ .icon-voice-play {
+ transform: rotateY(180deg);
+ }
+ }
+
.chat-realtime {
display: flex;
flex-direction: row-reverse;
+
.iconfont {
transform: rotateY(180deg);
}
}
+
}
}
}
diff --git a/im-uniapp/components/chat-record/chat-record.vue b/im-uniapp/components/chat-record/chat-record.vue
new file mode 100644
index 0000000..623333a
--- /dev/null
+++ b/im-uniapp/components/chat-record/chat-record.vue
@@ -0,0 +1,227 @@
+
+
+ {{recording?'正在录音':'长按 说话'}}
+
+
+
+
+
+
+
+
+
+
+ {{recordTip}}
+
+
+
+ {{moveToCancel? '松手取消':'松手发送,上划取消'}}
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/im-uniapp/main.js b/im-uniapp/main.js
index 62747fa..f3f3774 100644
--- a/im-uniapp/main.js
+++ b/im-uniapp/main.js
@@ -6,6 +6,13 @@ import * as date from './common/date';
import * as socketApi from './common/wssocket';
import store from './store';
import { createSSRApp } from 'vue'
+// #ifdef H5
+import * as recorder from './common/recorder-h5';
+// #endif
+// #ifndef H5
+import * as recorder from './common/recorder-app';
+// #endif
+
export function createApp() {
const app = createSSRApp(App)
@@ -15,6 +22,7 @@ export function createApp() {
app.config.globalProperties.$emo = emotion;
app.config.globalProperties.$enums = enums;
app.config.globalProperties.$date = date;
+ app.config.globalProperties.$rc = recorder;
return {
app
}
diff --git a/im-uniapp/package.json b/im-uniapp/package.json
index bb25321..680d46c 100644
--- a/im-uniapp/package.json
+++ b/im-uniapp/package.json
@@ -1,6 +1,10 @@
{
+ "name": "盒子IM",
"uni-app": {
- "scripts": {
- }
+ "scripts": {}
+ },
+ "dependencies": {
+ "js-audio-recorder": "^1.0.7",
+ "recorder-core": "^1.3.23122400"
}
-}
\ No newline at end of file
+}
diff --git a/im-uniapp/pages/chat/chat-box.vue b/im-uniapp/pages/chat/chat-box.vue
index ff6d7d1..36836ba 100644
--- a/im-uniapp/pages/chat/chat-box.vue
+++ b/im-uniapp/pages/chat/chat-box.vue
@@ -9,8 +9,7 @@
-
@@ -29,7 +28,10 @@
-
+
+
+
+
-
+
- 语音输入
-
+ 语音消息
+
回执消息
-
+
视频通话
-
+
语音通话
@@ -101,6 +103,7 @@